html5 for vs2008插件,Chart 控件 for vs2008的安装

近日开始学习和研究这个新奇的控件。

一．什么是图表

上面这张表中所示的就是一张图表的所有组成。

从中我们可以看出，图表的五大元素为：附注(Annotations)、图表区(ChartAreas)、图例(Legends)、列(Series)、标题(Titles)。

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

这三个文件可以从微软网站下载到或是在我的附件中下载。安装的顺序图中排列顺序，其中 MSChart.exe就是图表控件的安装程序； MSChartLP_chs.exe是语言包；MsChart_VisualStudioAddon.exe是扩展安装。

都安装完成后，打开 VS2008，在工具箱中任意处右击-"选择项..."，将下图中所示的两项打上勾，即可在工具箱中的Data栏中看到 Chart控件。

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

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

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

如果在这个时候预览网页的话，是什么也看不见的，是一张图表，因为它没有数据，所以我们要给它赋值并设置相关属性。下同是整个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

效果：