TeeChart for PHP教程（十）：图表面板上的自定义绘图

本教程将会介绍图表面板上的自定义绘图。在TeeChart图表内，通过TCanvas3D组件提供广泛的定制绘图设施，使用画布您可以在图表面板的任何位置添加形状，线条和文本，并定义其颜色，笔和画笔样式。

    TeeChart for PHP包含100%的PHP源代码。它支持PHP5及更高的版本。它可作为一个调色板组件整合到针对PHP的Delphi编程环境中，从而让其他人在运行时以创建组件的方式来引用。第一个版本提供17种图表类型（2D和3D的多种组合），11个数学函数和一些图表工具组件以扩展功能。

TeeChart for PHP试用版

    本教程是TeeChart for PHP教程中图表面板上的自定义绘图这一节，这一节内容主要介绍TeeChart Canvas。在此功能下面又分为绘图线、Canvas笔和画笔、添加2D形状、添加3D形状、添加文字和应用实例。下面就开始介绍具体操作过程。

TeeChart Canvas

绘图线

2D图表

    让我们添加一个画布线：

private function Load() {         $line1->fillSampleValues(20);         $line1->setVertAxis(VerticalAxis::$BOTH);         $line1->setHorizAxis(HorizontalAxis::$BOTH);         $tChart1->getAspect->setView3D(false); }   public function chartEvent($e) {   if ($e instanceof AfterDrawEventArgs) {        $g = $tChart1->getGraphics3D();          $s = new TeePoint($tChart1->getAxes()->getLeft()->getPosition(), $tChart1->getAxes()->getTop()->getPosition());         $e = new TeePoint($tChart1->getAxes()->getRight()->getPosition(), $tChart1->getAxes()->getBottom()->getPosition());           $g->MoveTo($s);         $g->LineTo($e,0);      }}

3D图表

    在3D图表上，由于3D正交位移，轴位置会偏离图表区域，我们需要相应地移动线路（在3D图表的图表区域中从左上角到右下角对角绘制线条）：

private function Load() {         $line1->fillSampleValues(20);         $line1->setVertAxis(VerticalAxis::$BOTH);         $line1->setHorizAxis(HorizontalAxis::$BOTH);         $tChart1->getAspect->setChart3DPercent(50); }  public function chartEvent(EventArgs e) {        if ($e instanceof AfterDrawEventArgs) {            $g = $tChart1->getGraphics3D();         $s = Point3D();         $s->x = $tChart1->getAxes()->getLeft()->getPosition();         $s->y = tChart1->getAxes()->getTop()->getPosition();         $s->z = 0;          C$e = Point3D();         $e->x = $tChart1->getAxes()->getRight()->getPosition();         $e->y = $tChart1->getAxes()->getBottom()->getPosition();         $e->z = $tChart1->getAspect()->width3D;          $g->moveTo($s);         $g->lineTo($e);        }}

Canvas笔和画笔

     上面呈现的线是使用在绘画线之前绘制的最后一个对象时的笔和笔刷，那可能不是您想要的的效果，您可以自己定义（在绘制线之前定义笔）：

 public function chartEvent(EventArgs $e) {        if ($e instanceof AfterDrawEventArgs) {            $g = $tChart1->getGraphics3D();                                   $p5 = new TeePoint($line1->calcXPos(5), $line1->calcYPos(5));              $p15 = new TeePoint($line1->calcXPos(15), $line1->calcYPos(15));             $g->getPen()->setDashCap(DashCap::$SQUARE);            $g->getPen()->setEndCap(LineCap::$MITER);            $g->getPen()->setStyle(DashStyle::$DASHDOTDOT);             $g->getPen()->setTransparency(70);             $g->getPen()->setWidth(3);             $g->getPen()->setColor(Color::BLUE());             $g->moveTo($p5);             $g->lineTo($p15, 0);          }   }

添加2D形状

    以与Canvas Lines类似的方式添加2D Canvas Shapes。以下示例在图表区域的中心添加一个Rectangle：

2D图表（2D图表仅支持2D形状）

public function chartEvent(EventArgs $e) {        if ($e instanceof AfterDrawEventArgs) {            $g = $tChart1->getGraphics3D();                                $d = new Dimension(100,100);         $p = new TeePoint(((int)($g->getXCenter() - ($d->getWidth()/2))),((int)($g->getYCenter() - ($d->getHeight()/2))));                 $r = new Rectangle($p,$d);         $g->getPen()->setColor(Color::CYAN());         $g->getBrush()->setColor(Color::BLUE());         $g->rectangle($r);       }   }

3D图表

    在3D图表上，您也可以在Z平面中移动矩形。此示例即将矩形放置在左侧墙壁上，但将其移向图表后部的中间位置（朝向后墙）。

private function Load() {         $point3D1->LinePen->Visible = false;         $point3D1->fillSampleValues(20);         $point3D1->setVertAxis(VerticalAxis::$BOTH);         $point3D1->setHorizAxis(HorizontalAxis::$BOTH);         $tChart1->getAspect->setChart3DPercent(50);         $tChart1->getAxes()->getDepth()->setVisible(true); }  public function chartEvent(EventArgs $e) {      if ($e instanceof AfterDrawEventArgs) {        $g = $tChart1->getGraphics3D();           $d = new Dimension(100, 100);         $l = new TeePoint(((int)$tChart1->getAxes()->getLeft()->getPosition()),((int)(g->getYCenter() –                ($d->getHeight() / 2))));         $r = new Rectangle($l,$d);         $g->getPen()->setColor(Color::CYAN());         $g->getBrush().setColor(Color::BLUE());         $g->rectangle($r, $tChart1->getAspect()->width3D/2);         }

添加3D形状

    您可以将3D形状添加到3D图表中，此示例即在Chart矩形的中间绘制一个Cube：

private function Load() {         $point3D1->getLinePen()->setVisible(false);         $point3D1->fillSampleValues(20);         $tChart1->getAspect()->setChart3DPercent(50);         $tChart1->getLegend()->setVisible(false);         $tChart1->getAxes()->getDepth()->setVisible(true); }   public function chartEvent(EventArgs $e) {        if (e instanceof AfterDrawEventArgs) {            IGraphics3D g = tChart1.getGraphics3D();                                    $d = new Dimension(50,50);             $p = new TeePoint(((int)($g->getXCenter() - ($d->getWidth()/2))),((int)($g->getYCenter() –                ($d->getHeight()/2))));                     $r = new Rectangle($p,$d);             $g->cube($r, 0, 20, true);             }}

添加文本

2D文本位置

    将文本添加到最后一个Rectangle：

 public function chartEvent(EventArgs $e) {        if (e instanceof AfterDrawEventArgs) {            $text = "My Text";             $g = $tChart1->getGraphics3D();                                   $d = new Dimension(150, 50);             $p = new TeePoint(((int)($g->getXCenter() - ($d->getWidth()/2))),((int)($g->getYCenter() –                         ($d->getHeight()/2))));             $r = new Rectangle($p,$d);             $g->getPen()->setColor(Color::BLUE());             $g->rectangle($r);                 $g->textOut(((int)($g->getXCenter() - ($g->textWidth($text)/2))),                   ((int)($g->getYCenter() - ($g->textHeight($text)/2))), $text);                     }    }

3D文本位置

    通过使用带有Z坐标的TextOut重载，可以将Text放置在不同的3D平面中。

 private function Load() {         $point3D1->fillSampleValues(20);         $point3D1->getLinePen()->setVisible(false);         $tChart1->getAspect()->setChart3DPercent(50); }  public function chartEvent(EventArgs $e) {        if ($e instanceof AfterDrawEventArgs) {            $text = "My Text";             $g = $tChart1->getGraphics3D();                        $g->textOut($g->getXCenter(), $g->getYCenter(), $tChart1->getAspect()->width3D / 2, $text);         }}

应用实例

    此示例将会获取系列的第3和第10个值，在它们之间绘制一条直线，并告诉我们新线的第一个和最后一个点的值以及它们之间的差异：

'First add some data to the empty ChartPublic function button1_Click();begin  $Series1->FillSampleValues(20);end; private function Load() {         $tChart1->getAspect()->setView3D(false);         $line1->fillSampleValues(20); }   public void chartEvent(EventArgs e) {        if ($e instanceof AfterDrawEventArgs) {            $g = $tChart1->getGraphics3D();                        if($tChart1->getSeriesCount() > 0){                 if($tChart1->getSeries(0)->getCount() > 10) {                     $s = $tChart1->getSeries(0);                    $h = $g->textHeight("H");                    $p1 = new TeePoint($s->calcXPos(3), $s->calcYPos(3));                    $p2 = new TeePoint($s->calcXPos(10), $s->calcYPos(10));                    $g->getPen()->setColor(Color::BLUE());                    $g->getPen()->setWidth(2);                    $g->getPen()->setStyle(DashStyle::$DASH);                    $g->moveTo($p1);                    $g->lineTo($p2, 0);                                    $g->textOut($p1->x, $p1->y - $h, "Point value: " . $s->getYValues(3));                     $g->textOut($p2->x, $p2->y, "Point value: " . $s.getYValues(10));                     $g->textOut($p2->x, $p2->y + $h, "Change is: " + $s->getYValues(3) -                             $s->getYValues(10));             }                     }}

    本节教程就到这里了，下一章我们将会介绍TeeChart for PHP的插件和附加功能。如果您有什么建议或者疑惑都可以在评论区留言或者联系在线客服>>

    TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android均已加入在线订购，现在抢购可立享特别优惠！！！

    关注慧聚IT微信公众号了解产品的最新动态及最新资讯。

标签：

来源：慧都