转自：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
效果：
