TeeChart Pro .Net漢化版通過Canvas提供了許多繪圖的功能。借由Canvas您可以在圖表面板的任何地方添加圖形、直線和文本，同時還可以設定他們的顏色，畫筆及格式刷。

繪圖順序

在運用TeeChart的Canvas方法時，請記住繪圖順序是非常重要的。如果在圖表上先畫線然后再添加一系列的Series數據點，這樣會導致線被透支。

這里有四個基本的圖表繪圖事件，其順序如下所示：

• BeforeDraw 事件
• BeforeDrawAxes 事件
• BeforeDrawSeries 事件
• AfterDraw 事件

例如:

[C#]
private bool afterDraw;
private bool beforeDraw;
private bool beforeDrawAxis;
private bool beforeDrawSeries;

private void Form1_Load(object sender, System.EventArgs e) {  
     SetFlags(ref beforeDraw);
     Bar bar1 = new Bar(tChart1.Chart);
     bar1.FillSampleValues(20);
     radioButton1.Checked = true;
}
private void SetFlags(ref bool Flag) {
     beforeDraw = false;
     afterDraw = false;
     beforeDrawAxis = false;
     beforeDrawSeries = false;
     Flag = true;
}
private void DrawShape(Steema.TeeChart.Drawing.Graphics3D gg) {
     gg.Brush.Color = Color.Yellow;
     gg.Pen.Visible = true;
     gg.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;
     gg.Brush.Visible = true;
     gg.Ellipse(1,1,gg.Chart.Width - 1,gg.Chart.Height - 1);
}
private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
     if(afterDraw) {
     DrawShape(g);
    }
}
private void tChart1_BeforeDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
     if(beforeDraw) {
     DrawShape(g);
    }
}
private void tChart1_BeforeDrawAxes(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
     if(beforeDrawAxis) {
     DrawShape(g);
    }
}
private void tChart1_BeforeDrawSeries(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
     if(beforeDrawSeries) {
     DrawShape(g);
    }
}
private void radioButton4_Click(object sender, System.EventArgs e) {
     SetFlags(ref afterDraw);
     tChart1.Refresh();
}
private void radioButton3_Click(object sender, System.EventArgs e) {
     SetFlags(ref beforeDrawSeries);
     tChart1.Refresh();
}
private void radioButton2_Click(object sender, System.EventArgs e) {
     SetFlags(ref beforeDrawAxis);
     tChart1.Refresh();
}
private void radioButton1_Click(object sender, System.EventArgs e) {
     SetFlags(ref beforeDraw);
     tChart1.Refresh();
}

　　[VB.Net]    
Private BeforeDraw As Boolean
Private BeforeDrawAxis As Boolean
Private BeforeDrawSeries As Boolean
Private AfterDraw As Boolean

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    SetFlags(BeforeDraw)
    Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
    Bar1.FillSampleValues(20)
    RadioButton1.Checked = True
End Sub
Private Sub SetFlags(ByRef Flag As Boolean)
    BeforeDraw = False
    BeforeDrawAxis = False
    BeforeDrawSeries = False
    AfterDraw = False
    Flag = True
End Sub
Private Sub DrawShape(ByVal gg As Steema.TeeChart.Drawing.Graphics3D)
    gg.Brush.Color = Color.Yellow
    gg.Pen.Visible = True
    gg.Pen.Style = Drawing.Drawing2D.DashStyle.Dash
    gg.Brush.Visible = True
    gg.Ellipse(1, 1, gg.Chart.Width - 1, gg.Chart.Height - 1)
End Sub
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
    If AfterDraw = True Then
     DrawShape(g)
    End If
End Sub
Private Sub TChart1_BeforeDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.BeforeDraw
    If BeforeDraw = True Then
     DrawShape(g)
    End If
End Sub
Private Sub TChart1_BeforeDrawAxes(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.BeforeDrawAxes
    If BeforeDrawAxis = True Then
     DrawShape(g)
    End If
End Sub
Private Sub TChart1_BeforeDrawSeries(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.BeforeDrawSeries
    If BeforeDrawSeries = True Then
     DrawShape(g)
    End If
End Sub
Private Sub RadioButton4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton4.Click
    SetFlags(AfterDraw)
    TChart1.Refresh()
End Sub
Private Sub RadioButton3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton3.Click
    SetFlags(BeforeDrawSeries)
    TChart1.Refresh()
End Sub
Private Sub RadioButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton2.Click
    SetFlags(BeforeDrawAxis)
    TChart1.Refresh()
End Sub
Private Sub RadioButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton1.Click
    SetFlags(BeforeDraw)
    TChart1.Refresh()
End Sub

確保自定義繪圖項目保存到Canvas中

在一個圖表事件中，如果您沒有調用Canvas繪圖代碼，那么自定義繪圖將不會永久的被保存在Canvas中，因此當一個應用程序被縮小或另一個Windows將其覆蓋時，一些添加的數據會丟失。您的代碼不需要直接存放在Chart事件中；如果您的代碼在BeforeDrawSeries/AfterDraw中，那么用戶繪圖項目將被保存為活動的圖表窗體，同時還要檢查Draw方法中所設定的標記，當其屬性為真時即可運行您的繪圖代碼，詳情可參考上一個實例。

繪制直線

現在添加一條Canvas直線:

例如 (畫一條從左上角到右下角的對角線)

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        line1.FillSampleValues(20);
        line1.VertAxis = VerticalAxis.Both;
        line1.HorizAxis = HorizontalAxis.Both;
        tChart1.Aspect.View3D = false;
}

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        Point s = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position);
        Point e = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position);
        g.MoveTo(s);
        g.LineTo(e,0);
}

　　[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Line1.FillSampleValues(20)
        Line1.VertAxis = Steema.TeeChart.VerticalAxis.Both
        Line1.HorizAxis = Steema.TeeChart.HorizontalAxis.Both
        TChart1.Aspect.View3D = False
End Sub

Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim S As New Point(TChart1.Axes.Left.Position, TChart1.Axes.Top.Position)
        Dim E As New Point(TChart1.Axes.Right.Position, TChart1.Axes.Bottom.Position)
        g.MoveTo(S)
        g.LineTo(E, 0)
End Sub

在3D圖表中，由于3D的正交位移，圖表區域的坐標軸位置將會發生偏移，我們可以相應的移動直線:

例如 (在3D圖表的圖表區域繪制一條從左上角到右下角的對角線)

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        line1.FillSampleValues(20);
        line1.VertAxis = VerticalAxis.Both;
        line1.HorizAxis = HorizontalAxis.Both;
        tChart1.Aspect.Chart3DPercent = 50;
}

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        Steema.TeeChart.Drawing.Point3D s = new Steema.TeeChart.Drawing.Point3D();
        s.X = tChart1.Axes.Left.Position;
        s.Y = tChart1.Axes.Top.Position;
        s.Z = 0;

        Steema.TeeChart.Drawing.Point3D e = new Steema.TeeChart.Drawing.Point3D();
        e.X = tChart1.Axes.Right.Position;
        e.Y = tChart1.Axes.Bottom.Position;
        e.Z = tChart1.Aspect.Width3D;
    
        g.MoveTo(s);
        g.LineTo(e);
}

　　[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Line1.FillSampleValues(20)
        Line1.VertAxis = Steema.TeeChart.VerticalAxis.Both
        Line1.HorizAxis = Steema.TeeChart.HorizontalAxis.Both
        TChart1.Aspect.Chart3DPercent = 50
End Sub

Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim S As New Steema.TeeChart.Drawing.Point3D()
        S.X = TChart1.Axes.Left.Position
        S.Y = TChart1.Axes.Top.Position
        S.Z = 0

        Dim E As New Steema.TeeChart.Drawing.Point3D()
        E.X = TChart1.Axes.Right.Position
        E.Y = TChart1.Axes.Bottom.Position
        E.Z = TChart1.Aspect.Width3D

        g.MoveTo(S)
        g.LineTo(E)
End Sub

Canvas 畫筆及格式刷

上面的直線是先定義最后一個對象，然后再用畫筆和格式刷繪制的。但這樣不一定是您想要的畫筆。可按以下的實例改變您的畫筆：

例如 (在繪制直線前定義畫筆)

[C#]
private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        Point p5 = new Point(line1.CalcXPos(5), line1.CalcYPos(5));
        Point p15 = new Point(line1.CalcXPos(15), line1.CalcYPos(15));
        g.Pen.DashCap = System.Drawing.Drawing2D.DashCap.Triangle;
        g.Pen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;
        g.Pen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
        g.Pen.Transparency = 70;
        g.Pen.Width = 3;
        g.Pen.Color = Color.BlueViolet;
        g.MoveTo(p5);
        g.LineTo(p15, 0);
}

　　[VB.Net]
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim P5 As New Point(Line1.CalcXPos(5), Line1.CalcYPos(5))
        Dim P15 As New Point(Line1.CalcXPos(15), Line1.CalcYPos(15))
        g.Pen.DashCap = System.Drawing.Drawing2D.DashCap.Triangle
        g.Pen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor
        g.Pen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot
        g.Pen.Transparency = 70
        g.Pen.Width = 3
        g.Pen.Color = Color.BlueViolet
        g.MoveTo(P5)
        g.LineTo(P15, 0)
End Sub

添加2D圖形

添加Canvas圖形的方法跟Canvas直線很類似。以下實例是在圖表的中心區域添加一個矩形:

2D 圖表

2D圖表只支持2D圖形

例如

[C#]
private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        Size s = new Size(100,100);
        Point l = new Point(g.ChartXCenter - (s.Width / 2), g.ChartYCenter - (s.Height / 2));
        Rectangle r = new Rectangle(l,s);
        g.Pen.Color = Color.Aquamarine;
        g.Brush.Color = Color.Blue;
        g.Rectangle(r);
}

　　[VB.Net]
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim S As New Size(100, 100)
        Dim L As New Point(g.ChartXCenter - (S.Width / 2), g.ChartYCenter - (S.Height / 2))
        Dim R As New Rectangle(L, S)
        g.Pen.Color = Color.Aquamarine
        g.Brush.Color = Color.Blue
        g.Rectangle(R)
End Sub

3D 圖形

在3D圖表上您也可以將矩形移到Z平面上，詳情可參考RectangleWithZ 方法。在這個實例中，矩形框最初放在圖表的Z立面，在中途將其移向圖表的背面（靠近背立面）.

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        point3DSeries1.LinePen.Visible = false;
        point3DSeries1.FillSampleValues(20);
        point3DSeries1.VertAxis = VerticalAxis.Both;
        point3DSeries1.HorizAxis = HorizontalAxis.Both;
        tChart1.Aspect.Chart3DPercent = 50;
        tChart1.Axes.Depth.Visible = true;
}

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        Size s = new Size(100,100);
        Point l = new Point(tChart1.Axes.Left.Position, g.ChartYCenter - (s.Height / 2));
        Rectangle r = new Rectangle(l,s);
        g.Pen.Color = Color.Aquamarine;
        g.Brush.Color = Color.Blue;
        g.Rectangle(r, tChart1.Aspect.Width3D/2);
}

　　[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Point3DSeries1.LinePen.Visible = False
        Point3DSeries1.FillSampleValues(20)
        Point3DSeries1.VertAxis = Steema.TeeChart.VerticalAxis.Both
        Point3DSeries1.HorizAxis = Steema.TeeChart.HorizontalAxis.Both
        TChart1.Aspect.Chart3DPercent = 50
        TChart1.Axes.Depth.Visible = True
End Sub

Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim S As New Size(100, 100)
        Dim L As New Point(TChart1.Axes.Left.Position, g.ChartYCenter - (S.Height / 2))
        Dim R As New Rectangle(L, S)
        g.Pen.Color = Color.Aquamarine
        g.Brush.Color = Color.Blue
        g.Rectangle(R, TChart1.Aspect.Width3D / 2)
End Sub

添加3D圖形

您可以在3D圖表中添加3D圖形。這個實例是在圖表矩形的中間區域繪制一個立方體:

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        point3DSeries1.LinePen.Visible = false;
        point3DSeries1.FillSampleValues(20);
        tChart1.Aspect.Chart3DPercent = 50;
        tChart1.Legend.Visible = false;
        tChart1.Axes.Depth.Visible = true;
}

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        Size s = new Size(50,50);
        Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2));
        Rectangle r = new Rectangle(p,s);
        g.Cube(r, 0, 20, true);
}

　　[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Point3DSeries1.LinePen.Visible = False
        Point3DSeries1.FillSampleValues(20)
        TChart1.Aspect.Chart3DPercent = 50
        TChart1.Legend.Visible = False
        TChart1.Axes.Depth.Visible = True
End Sub

Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim S As New Size(50, 50)
        Dim P As New Point(g.ChartXCenter - (S.Width / 2), g.ChartYCenter - (S.Height / 2))
        Dim R As New Rectangle(P, S)
        g.Cube(R, 0, 20, True)
End Sub

添加文本

2D文本的位置

在最后繪制的矩形框中添加文本:

例如

[C#]
private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        string text = "My Text";
        Size s = new Size(150, 50);
        Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2));
        Rectangle r = new Rectangle(p,s);
        g.Pen.Color = Color.Blue;
        g.Rectangle(r);

        g.TextOut(Convert.ToInt32(g.ChartXCenter - (g.TextWidth(text)/2)), Convert.ToInt32(g.ChartYCenter - (g.TextHeight(text)/2)), text);
}

　　[VB.Net]
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim Text As String = "My Text"
        Dim S As New Size(50, 50)
        Dim P As New Point(g.ChartXCenter - (S.Width / 2), g.ChartYCenter - (S.Height / 2))
        Dim R As New Rectangle(P, S)
        g.Pen.Color = Color.Blue
        g.Rectangle(R)

        g.TextOut(Convert.ToInt32(g.ChartXCenter - (g.TextWidth(Text) / 2)), Convert.ToInt32(g.ChartYCenter - (g.TextHeight(Text) / 2)), Text)
End Sub

3D文本的位置

您可以通過重載z坐標的TextOut 方法，在各個3D平面內放置文本。

例如

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        point3DSeries1.FillSampleValues(20);
        point3DSeries1.LinePen.Visible = false;
        tChart1.Aspect.Chart3DPercent = 50;
}

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        string text = "My Text";
        g.TextOut(g.ChartXCenter, g.ChartYCenter, tChart1.Aspect.Width3D / 2, text);
}

　　[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Point3DSeries1.FillSampleValues(20)
        Point3DSeries1.LinePen.Visible = False
        TChart1.Aspect.Chart3DPercent = 50
End Sub

Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        Dim Text As String = "My Text"
        g.TextOut(g.ChartXCenter, g.ChartYCenter, TChart1.Aspect.Width3D / 2, Text)
End Sub

應用實例

這個例子使用了Series的第三個和第十個值，在它們之間繪制一條直線，并顯示第一個和最后一個點的值及他們之間的差別：

例如

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        tChart1.Aspect.View3D = false;
        line1.FillSampleValues(20);
}

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
        if(tChart1.Series.Count > 0){
            if(tChart1.Series[0].Count > 10) {
                Series s = tChart1.Series[0];
                int h = Convert.ToInt32(g.TextHeight("H"));
                Point p1 = new Point(s.CalcXPos(3), s.CalcYPos(3));
                Point p2 = new Point(s.CalcXPos(10), s.CalcYPos(10));
                g.Pen.Color = Color.Blue;
                g.Pen.Width = 2;
                g.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;
                g.MoveTo(p1);
                g.LineTo(p2, 0);
                g.TextOut(p1.X, p1.Y - h, "Point value: " + s.YValues[3].ToString());
                g.TextOut(p2.X, p2.Y, "Point value: " + s.YValues[10].ToString());
                g.TextOut(p2.X, p2.Y + h, "Change is: " + Convert.ToString(s.YValues[3] - s.YValues[10]));
            }
        }
}

　　[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        TChart1.Aspect.View3D = False
        Line1.FillSampleValues(20)
End Sub

Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        If TChart1.Series.Count > 0 Then
            If TChart1.Series(0).Count > 10 Then
                Dim S As Steema.TeeChart.Series = TChart1.Series(0)
                Dim H As Integer = Convert.ToInt32(g.TextHeight("H"))
                Dim P1 As New Point(S.CalcXPos(3), S.CalcYPos(3))
                Dim P2 As New Point(S.CalcXPos(10), S.CalcYPos(10))
                g.Pen.Color = Color.Blue
                g.Pen.Width = 2
                g.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash
                g.MoveTo(P1)
                g.LineTo(P2, 0)
                g.TextOut(P1.X, P1.Y - H, "Point value: " & S.YValues(3))
                g.TextOut(P2.X, P2.Y, "Point value: " & S.YValues(10))
                g.TextOut(P2.X, P2.Y + H, "Change is: " & (S.YValues(3) - S.YValues(10)))
            End If
        End If
End Sub