Visual Studio 2010 Chart Control 使用经验总结

转自：http://www.ntdrv.cn/Blog/Article.aspx?ID=2037

一．什么是图表

上面这张表中所示的就是一张图表的所有组成。
从中我们可以看出，图表的五大元素为：附注（Annotations）、图表区（ChartAreas）、图例（Legends）、列（Series）、标题(Titles)。

上面这张表中所示的就是一张图表的所有组成。
从中我们可以看出，图表的五大元素为：附注（Annotations）、图表区（ChartAreas）、图例（Legends）、列（Series）、标题(Titles)。

*二．如何把 Chart控件添加到VS2008工具箱

这三个文件可以从微软网站下载到或是在我的附件中下载。安装的顺序图中排列顺序，其中 MSChart.exe就是图表控件的安装程序； MSChartLP_chs.exe是语言包；MsChart_VisualStudioAddon.exe是扩展安装。
都安装完成后，打开 VS2008，在工具箱中任意处右击-"选择项..."，将下图中所示的两项打上勾，即可在工具箱中的Data栏中看到 Chart控件。

我们可以把它移动到"数据"栏中，如下图所示：

二．如果你使用的是Visual Studio 2010，在工具箱-->data中直接拖拽chart控件就可以使用了 

　　Visual studio 正式版已经发布，建议下载使用

三．创建一个最简单的图表

在设计视图中从工具箱中拖拽 Chart控件至页面，如下图所示：

如果在这个时候预览网页的话，是什么也看不见的，是一张图表，因为它没有数据，所以我们要给它赋值并设置相关属性。下同是整个Chart控件的页面代码，如何给它赋值大家可以研究一下这段代码。

<asp:Chart ID="Chart2" runat="server">
    <Annotations>
        <asp:LineAnnotation Name="LineAnnotation1">
        </asp:LineAnnotation>
    </Annotations>
    <Series>
        <asp:Series Name="Series1">
            <points>
                <asp:DataPoint YValues="40" />
                <asp:DataPoint YValues="34" />
                <asp:DataPoint YValues="67" />
                <asp:DataPoint YValues="31" />
                <asp:DataPoint YValues="27" />
                <asp:DataPoint YValues="87" />
                <asp:DataPoint YValues="45" />
                <asp:DataPoint YValues="32" />
            </points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

上面这段代码是直接在aspx文件中书写，下面要介绍的是在.vb文件中添加数据：

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        ' 创建列
        Dim series As New Series("曲线")
        series.ChartType = SeriesChartType.Spline
        series.BorderWidth = 3
        series.ShadowOffset = 2
        ' 给列赋值
        series.Points.AddY(67)
        series.Points.AddY(30)
        series.Points.AddY(83)
        series.Points.AddY(23)
        series.Points.AddY(70)
        series.Points.AddY(60)
        series.Points.AddY(90)
        series.Points.AddY(20)
        ' 将上述创建并赋过值的列添加到图表控件的Series集合中
        Chart1.Series.Add(series)
    End Sub 'Page_Load

四．图表类型（ChartStyle）

Chart控件提供了丰富的图表类型，如柱状、条状、由线、饼图、雷达图等等，并可以随时在2D和3D之间切换。下面所示的是部分图表类型的截图：

 

(3D柱形图)                                    (2D条形图)

      (2D线图)                                    (3D饼图)

图表类型的设置是是在Series集合中的，在代码中的写法如下：
Chart1.Series("Series名").ChartType=......
有了这么多的选择，就为我们不同的需求提供了大大的方便。

五．Chart 控件显示数据库中的数据

在讲绑定之前，先给大家看一张表，这张表介绍了在什么样的情况下用什么样的绑定方法，十分有用。

下面就来分别介绍这张表中介绍到的种种绑定方法。
在写示例之前我要说明一下我用到的两张表。

MyTest表：

SALESCOUNTS表：

1.使用DataBindTable方法

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '绑定一个简单的数据源.X轴表示文字型，Y轴表示数字型
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim Command As SqlCommand = New SqlCommand("SELECT [name],[score] FROM [MyTest]", conect)
            conect.Open()
            Dim reader As SqlDataReader = Command.ExecuteReader(CommandBehavior.CloseConnection)
            Chart1.DataBindTable(reader, "name")
            reader.Close()
            conect.Close()
        End Using
    End Sub

结果：

2.使用DataBind方法

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '用databind方法
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT [name],[score] FROM [MyTest]", conect)
            Chart1.DataSource = MyCommand
            Chart1.Series("Series1").XValueMember = "name"
            Chart1.Series("Series1").YValueMembers = "score"
            Chart1.Series("Series1").ChartType = SeriesChartType.Line
            Chart1.Series("Series1").IsValueShownAsLabel = True
            Chart1.DataBind()
        End Using
    End Sub

效果：

3.使用Points.DataBindX(Y)方法

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim Command As SqlCommand = New SqlCommand("SELECT [score] FROM [MyTest]", conect)
            conect.Open()
            Dim reader As SqlDataReader = Command.ExecuteReader(CommandBehavior.CloseConnection)
            'Chart1.DataBindTable(reader, "name")
            Chart1.Series("Series1").Points.DataBindY(reader, "score")
            'Chart1.Series("Series1").ChartType = SeriesChartType.Line
            Chart1.Series("Series1").IsValueShownAsLabel = True
            reader.Close()
            conect.Close()
        End Using

    End Sub

效果：

使用Points.DataBindXY方法

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim Command As SqlCommand = New SqlCommand("SELECT [name],[score] FROM [MyTest]", conect)
            conect.Open()
            Dim reader As SqlDataReader = Command.ExecuteReader(CommandBehavior.CloseConnection)
            Chart1.Series("Series1").Points.DataBindXY(reader, "name", reader, "score")
            Chart1.Series("Series1").ChartType = SeriesChartType.Pie
            'Chart1.Series("Series1").IsValueShownAsLabel = True
            reader.Close()
            conect.Close()
        End Using
    End Sub

效果：

4.使用Points.DataBind方法

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim Command As SqlCommand = New SqlCommand("SELECT * FROM [MyTest]", conect)
            conect.Open()
            Dim reader As SqlDataReader = Command.ExecuteReader(CommandBehavior.CloseConnection)
            Chart1.Series("Series1").Points.DataBind(reader, "Name", "score", "Tooltip=myhref,label=score")
            Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
            reader.Close()
            conect.Close()
        End Using
    End Sub

效果：

5. 使用DataBindCrossTable方法

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim Command As SqlCommand = New SqlCommand("SELECT * FROM [MyTest]", conect)
            conect.Open()
            Dim reader As SqlDataReader = Command.ExecuteReader(CommandBehavior.CloseConnection)
            Chart1.DataBindCrossTable(reader, "isclass", "name", "score", "label=score")
            'DataBindCrossTable(DataSource,SeriesGroup,xField,yFields,otherFields)
            '下面一段为模仿原文写，不明白为何要用 marker
            Dim marker As MarkerStyle = MarkerStyle.Star4
            For Each Ser As Series In Chart1.Series
                Ser.ChartType = SeriesChartType.Line
                Ser.ShadowOffset = 2
                Ser.BorderWidth = 3
                Ser.MarkerSize = 12
                Ser.MarkerStyle = marker
                Ser.MarkerBorderColor = Drawing.Color.Pink
                marker += 1
            Next
            reader.Close()
            conect.Close()
        End Using
    End Sub

效果：

6. DataBindSeriesByRows

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Using conect As New SqlConnection(ConfigurationManager.ConnectionStrings("NTTrafficConnectionString").ConnectionString)
            Dim Command As SqlCommand = New SqlCommand("SELECT * FROM [SALESCOUNTS]", conect)
            conect.Open()
            Dim myDataAdapter As New SqlDataAdapter()
            myDataAdapter.SelectCommand = Command
            Dim myDateSet As New DataSet()
            myDataAdapter.Fill(myDateSet, "Query")
            Dim row As DataRow
            For Each row In myDateSet.Tables("Query").Rows
                Dim seriesName As String = row("SalesRep").ToString() '显示在右上角的legend为此处的吧？
                Chart1.Series.Add(seriesName)
                Chart1.Series(seriesName).ChartType = SeriesChartType.Line
                Chart1.Series(seriesName).BorderWidth = 2
                Chart1.Series(seriesName).IsValueShownAsLabel = True
                Dim colIndex As Integer
                For colIndex = 1 To (myDateSet.Tables("Query").Columns.Count) - 1
                    Dim columnName As String = myDateSet.Tables("Query").Columns(colIndex).ColumnName '获得列名
                    Dim YVal As Integer = CInt(row(columnName)) '获得列数据
                    Chart1.Series(seriesName).Points.AddXY(columnName, YVal)
                Next colIndex
            Next row
            Command.Connection.Close()
            conect.Close()
        End Using
    End Sub

效果：

7. DataBindThenAlignAxisLabel

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim yval1 As Double() = {2, 6, 5}
        Dim xval1 As String() = {"Peter", "Andrew", "Julie"}
        Dim yval2 As Double() = {4, 5, 3}
        Dim xval2 As String() = {"Peter", "Andrew", "Dave"}
        Dim yval3 As Double() = {6, 5}
        Dim xval3 As String() = {"Julie", "Mary"}
        Chart1.Series("Series1").Points.DataBindXY(xval1, yval1)
        Chart1.Series("Series2").Points.DataBindXY(xval2, yval2)
        Chart1.Series("Series3").Points.DataBindXY(xval3, yval3)
        For Each ser As Series In Chart1.Series
            ser.Label = "#AXISLABEL"
        Next
        ' Align series using their X axis labels
        If AlignSeries.Checked Then
            Chart1.AlignDataPointsByAxisLabel()
        End If
    End Sub

效果：