Teechart图表应用技术详解—第三章之在图表上自行绘制

    Steema公司和慧都科技针对中国市场联合推出中文版TeeChart for .NET图表控件，一共汉化2000个词条（17000个单词），汉化文档35000个单词，包括控件设计时与运行时的界面汉化以及控件使用向导文档的汉化，总汉化90%以上！

    TeeChart for .NET中文版让您在使用和学习上没有任何语言障碍，至少可以节省30%的开发时间。TeeChart for .NET中文版具有易上手，使用方便，稳定性好，性价比高，价格优惠等优势，并且针对Web应用提供无限制服务器分发授权方式，非常有利于产品集成。

点击下载TeeChart for .NET最新试用版    

在图表上自行绘制

    如果想增加与图表轴相关联的文本框或其他形状， TShapeSerie序列是最好的选择，如果这个满足不了用户的要求，就可以在图表上绘制各种形状。TeeChart提供了通过坐标轴或屏幕像素访问图表区域的能力这里主要介绍如何将点坐标转换到像素坐标以及如何精确定义图表组件中的每个图形元素。

    为了建立数值与坐标间相互转换的关系，图表轴( ChartAxis)和序列组件提供了CalcPosValue、CalcSizeValue、CalcYPos、CalcXpos、XScreenToValue和YScreenToValue等函数，进行屏幕坐标(像素)与数值间的转换，使用户可以根据窗口的X、Y坐标得出该点位置所代表的数值，或者由具体的数值得出该值在窗口的位置坐标X、Y。

轴的值转换到屏幕坐标

• CalcPosValue：计算给定的值在屏幕的位置，可以使用任一坐标轴

Var MyPos: Integer;
MyPos:= Chart1. LeftAxis. CalcPosValue(100.0 );

    MyPos保存着值1000在 Chart1， LeftAxis轴上的像素坐标，使用这个坐标就可以自行绘制当前这个点。如果想将像素坐标转换到轴的值，可以使用下面的函数。

● CalcPosPoint

var MyValue:Double
MyValue :=Chart1. LeftAxis. CalcPosPoint(100 );

    MyValue中保存着100屏幕像素坐标在坐标轴上的值。屏幕坐标从0开始，(0,0)是图表圆点。在直接绘制到元文件、用户定义画布或打印时，图表原点是不同的。

• CalcSizeValue：该函数计算屏幕空间在巫标轴上的范围。

Var Space : Integer;
Space : =Chart1. LeftAxis.CalcSizeValue(1000);

    还可将时间轴转换一个日期范围周期：

Var Space: integer;
Space :=Chart1. BottomAxis. CalcSizeValue(
EncodeDate(2000, 12, 31)-Encode Date(2000,1,1));
EncodeDate(2000,12,31)-EncodeDate(2000,1,1);

• CalcYPos和CalcXpos：当使用CalcYPos和CalcXpos绘制时坐标原点(0,0)是图表矩形( ChartRect)的左上角。ChartRect是由图表四个轴构成的封闭区域。下面的例子是利用画布特性画一条线段：

procedure TForm1. Button1Click(Sender: TObject)；
var
   MyHalfwayPoint, YPosition: Integer;
Begin
 With Series1. YValues do
  MyHalfwayPoint: -round(((MaxValue-MinValue)*0. 5)+ MinValue);
                    //计算上述值的屏幕像素坐标
  YPosition:=DBChart1.LeftAXis, CalcYPosValue(MyHalfwayPoint);
  With DBChart1.Canvas do
   begin
     Pen.Width: =3;
     Pen.Style: =psSolid;
     Pen.Color: =clBlack;
    With DBChart1 do
    begin
     MoveTo(ChartRect. Left, YPosition);
     LineTo(ChartRect. Left+Width3D, YPosition-Height3D);
     LineTo( ChartRect.Right+Width3D, YPosition-Height 3D);
    end;
  end;
end;

序列的值转换到屏幕坐标

    序列也有类似转换坐标到点值的方法，其不同之处是使用序列提供的方法，而不需要知道轴的精确位置。

• CalcPosValue：这段代码计算Series的值为1000时，序列在屏幕的位置。

Var Mypos: Integer;
Mypos : =Series1. CalcPosValue(1000);

或者:

MyYPos:=Series1.CalcPosValue( Series1.YValue[0])；//第一个点

• CalcXPos和 CalcY Pos：计算一个指定的点或值的X、Y坐标。

MyXPos : =Series1.CalcXPos(EncodeDate(2000, 12, 31));

或者:

MyXPos : =Series1.CalcXPos(Series1.XValues.Last ); //最后一个点

• XScreenToValue和YScreenTovalue：从屏幕像素转换到点的值。

Var MyValue:Double;
MyValue : =Series1.YScreenToValue(Y);

    利用这个方法可以使用 Series.Clicked功能，给出一对XY坐标，就可以得到点的值。

图表画布( Chart Canvas)

    Chart.Canvas是一个标准的Delphi画布，使用画布特性可以控制图表的外观。

• 写画布( Writing to the Canvas)

    下面的代码将画布的背景划分为5个区域，并根据颜色数组着色：

procedure TDrawForm.LineSeries1BeforeDrawValues(Sender: Tobject);
Const
  MyColors:array 1..5] of TColor (clNavy, clGreen, clYellow, clRed, S00000080);
var t, partial: Integer;
   tmpRect:TRect;
  With Chart1 do
   Begin
     tmpRect: =ChartRect;
     tmpRect. Right: =tmpRect .Left;
     partial: =ChartWidth div 5;  //划分为5部分
     Canvas.Brush.Style:=bsDiagCross;//改变刷子风格
     Canvas.Pen.Style: =psClear;
     for t:=1 to 5 do      //每部分填充不同的颜色
     Begin
             tmpRect.Right:=tmpRect.Right+partial+1；//调节矩形的维数
             Can               Right+Width3D, Bottom-Height3D);
                tmpRect. Left:=tmpRect.Right;    //调节矩形
             end;
      end;
end;

内部位图( Internal Bitmap）

    TChart组件有一个内部位图对象，作为一个隐含的缓冲区，当绘制完成后，缓冲区被复制到屏幕视频区域后显示。TChart的Canvas属性返回一个内部位图画布对象。在Chart绘制到内部位图以后，它被拷贝到屏幕画布，Chart的Canvas属性引用这个最初的“真”的图表画布。

图表区域( Chart Regions）

    通过调用 Chart1.Invalidate或Series1.Repaint可以强行重新绘制。围绕图表的最大矩形区域是 ChartBounds属性，ChartWidth、ChartHeight、ChartXCenter和ChartYCenter是基于ChartBounds属性的合适的坐标。坐标轴被绘制在这个空间里， ChartRect属性返回由轴限制的矩形区域内(2D和3D相同)。

    图表的图例有一个RectLegend全局属性，定义了图例的矩形范围。图表的标题和页角有一个TitleRect全局属性定义了标题和页角所在的矩形区域。图表的Width3D和Hight3D(像素)是3D深度的维数， SeriesWidth3D和SeriesHeight3D是图表中每个序列的维数。

绘制( Drawing）

    下面是绘制的一个例子，这个例子在Chart1的中间绘制一条水平线：

procedure TForm1. Chart1AfterDraw(Sender: Tobject);
begin
With Chart1 do
begin
Canvas.Pen.Color:=clYellow;
Canvas.MoveTo(ChartBounds.Left, ChartYCenter );
Canvas.LineTo(ChartBounds.Right, ChartYCenter);
end;
end;

    在坐标轴空间内绘制：

procedure TForm1, Chart1AfterDraw(Sender:TObject);
begin
Canvas.Pen.Color:=clYellow;
                    Canvas.MoveTo(ChartRect.Left, ChartYCenter );
                    Canvas.LineTo(ChartRect.Right, ChartYCenter);
end;
end;

    在序列Series1的每个点绘制一条线段：

procedure TForml.Series1AfterDrawValues(Sender: Tobject);
var  t, x, y : Integer;
begin
          for t:=0 to Series1. Count -1 do
          begin
                 x:=Series1. CalcXPos(t);
                 y:=Series1. CalcYPos(t);
               Chart1.Canvas. MoveTo(x-8,y-8);
               Chart1.Canvas. LineTo(x+8, y+8);
      end;
end;

绘制文本( Drawing Text）

    如果想在屏幕显示、打印的字体尺寸和元文件的字体尺寸相同的话，可以总是设置Chart1.Canvas.Font.Height为负值，而无需使用 Font.Size设定字体的尺寸。也就是说，为了避免屏幕显示、打印和绘制到元文件的字体不一致，只需将 Chart1.Canvas.Font.Height设为负值，而不要去设置字体的尺寸。

    下一节我们将会介绍第三章图表与序列的操作维护：点击事件。如果有对Teechart图表感兴趣的朋友，可以多多关注本教程，并且欢迎在评论区留言。

相关资料推荐：

上一章：图表的放大和滚动

Teechart 2019资源合集

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

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