之前微軟一直沒(méi)有相關(guān)的圖表控件，都是使用第三方的控件來(lái)實(shí)現(xiàn)或者使用Office OWC控件來(lái)實(shí)現(xiàn)，使用OWC的性能是比較差的一般不建議使用。
個(gè)人感覺(jué)優(yōu)勢(shì)還是很明顯的。我用到開(kāi)源的控件ZedGraph.dll，有一些功能限制。如XY軸文字在圖表縮小的時(shí)候也會(huì)變得很小，但MSchart就可以設(shè)置最小的字號(hào)，這樣就保證不會(huì)隨著圖變小而看不到標(biāo)量值，如下圖所示的操作：
還有一個(gè)就是如何顯示具體柱子的數(shù)值，是否顯示，顯示的位置等等都可以做到，還可以用其它的方式來(lái)處理。查看下圖可知，這個(gè)圖表控件分得非常的細(xì)。
http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c
http://www.microsoft.com/downloads/details.aspx?familyid=581FF4E3-749F-4454-A5E3-DE4C463143BD&displaylang=zh-cn
近日開(kāi)始學(xué)習(xí)和研究這個(gè)新奇的控件。
一．什么是圖表
上面這張表中所示的就是一張圖表的所有組成。
從中我們可以看出，圖表的五大元素為：附注（Annotations）、圖表區(qū)（ChartAreas）、圖例（Legends）、列（Series）、標(biāo)題(Titles)。
二．如何把 Chart控件添加到VS2008工具箱
這三個(gè)文件可以從微軟網(wǎng)站下載到或是在我的附件中下載。安裝的順序圖中排列順序，其中 MSChart.exe就是圖表控件的安裝程序； MSChartLP_chs.exe是語(yǔ)言包；MsChart_VisualStudioAddon.exe是擴(kuò)展安裝。
都安裝完成后，打開(kāi) VS2008，在工具箱中任意處右擊-"選擇項(xiàng)..."，將下圖中所示的兩項(xiàng)打上勾，即可在工具箱中的Data欄中看到 Chart控件。
我們可以把它移動(dòng)到"數(shù)據(jù)"欄中，如下圖所示：
三．創(chuàng)建一個(gè)最簡(jiǎn)單的圖表
在設(shè)計(jì)視圖中從工具箱中拖拽 Chart控件至頁(yè)面，如下圖所示：
如果在這個(gè)時(shí)候預(yù)覽網(wǎng)頁(yè)的話，是什么也看不見(jiàn)的，是一張圖表，因?yàn)樗鼪](méi)有數(shù)據(jù)，所以我們要給它賦值并設(shè)置相關(guān)屬性。下同是整個(gè)Chart控件的頁(yè)面代碼，如何給它賦值大家可以研究一下這段代碼。
<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文件中書(shū)寫(xiě)，下面要介紹的是在.vb文件中添加數(shù)據(jù)：
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' 創(chuàng)建列
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)
' 將上述創(chuàng)建并賦過(guò)值的列添加到圖表控件的Series集合中
Chart1.Series.Add(series)
End Sub 'Page_Load
四．圖表類型（ChartStyle）
Chart控件提供了豐富的圖表類型，如柱狀、條狀、由線、餅圖、雷達(dá)圖等等，并可以隨時(shí)在2D和3D之間切換。下面所示的是部分圖表類型的截圖：
(3D柱形圖) (2D條形圖)
(2D線圖) (3D餅圖)
圖表類型的設(shè)置是是在Series集合中的，在代碼中的寫(xiě)法如下：
Chart1.Series("Series名").ChartType=......
有了這么多的選擇，就為我們不同的需求提供了大大的方便。
五．Chart 控件顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)
在講綁定之前，先給大家看一張表，這張表介紹了在什么樣的情況下用什么樣的綁定方法，十分有用。
下面就來(lái)分別介紹這張表中介紹到的種種綁定方法。
在寫(xiě)示例之前我要說(shuō)明一下我用到的兩張表。
MyTest表：
SALESCOUNTS表：
1.使用DataBindTable方法
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'綁定一個(gè)簡(jiǎn)單的數(shù)據(jù)源.X軸表示文字型，Y軸表示數(shù)字型
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
結(jié)果：
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)
'下面一段為模仿原文寫(xiě)，不明白為何要用 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)) '獲得列數(shù)據(jù)
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
效果：
