第7章 數(shù)據(jù)圖表系統(tǒng)開(kāi)發(fā)

1、第7章 數(shù)據(jù)圖表系統(tǒng)開(kāi)發(fā)大綱 VB.NET數(shù)據(jù)圖表系統(tǒng)的相關(guān)技術(shù) 使用GDI+繪制簡(jiǎn)單的圖 使用dotnetCHARTING數(shù)據(jù)圖表系統(tǒng)繪制柱狀圖、餅圖和折線圖 使用ZedGraph數(shù)據(jù)圖表系統(tǒng)繪制各種圖 生成Word數(shù)據(jù)圖表系統(tǒng)7.1 VB.NET7.1 VB.NET數(shù)據(jù)圖表簡(jiǎn)介數(shù)據(jù)控件與水晶報(bào)表是數(shù)據(jù)庫(kù)表顯示的一個(gè)格式。除此之外，VB.NET還支持多種數(shù)據(jù)圖表顯示格式，常見(jiàn)的包括：GDI（Graphic Device Interface，圖形設(shè)備接口）數(shù)據(jù)圖表系統(tǒng)、GDI+數(shù)據(jù)圖表系統(tǒng)、dotnetCHARTING數(shù)據(jù)圖表系統(tǒng)、ZedGraph數(shù)據(jù)圖表系統(tǒng)和Word數(shù)據(jù)圖表系統(tǒng)。為了在Wi

2、ndows操作系統(tǒng)上作畫(huà)，微軟創(chuàng)造了圖形設(shè)備接口，簡(jiǎn)稱為GDI，它是類、函數(shù)、變量和常量的集合，或者說(shuō)是在應(yīng)用程序中繪畫(huà)所需要的絕大部分對(duì)象。GDI由已安裝在計(jì)算機(jī)中的GDI.DLL動(dòng)態(tài)庫(kù)來(lái)提供。GDI+是Windows系列操作系統(tǒng)用來(lái)執(zhí)行繪畫(huà)及其他相關(guān)圖形操作的子系統(tǒng)。操作系統(tǒng)Windows XP和Windows Server 2003以及以上的版本中，GDI+已經(jīng)替換掉GDI。GDI+中的+表示相對(duì)于GDI來(lái)說(shuō)，有很大的改進(jìn)，增加了新的特點(diǎn)。GDI+允許創(chuàng)建獨(dú)立于設(shè)備的應(yīng)用程序，不用考慮應(yīng)用程序?qū)⒃谑裁礃拥挠布线\(yùn)行。7.1 VB.NET7.1 VB.NET數(shù)據(jù)圖表簡(jiǎn)介dotnetCHAR

3、TING是.NET圖表控件，對(duì)中文支持非常好，而且操作方便開(kāi)發(fā)快速，既支持WebForm也支持WinForm，官方地址是http:/ GDI+7.2 GDI+數(shù)據(jù)圖表系統(tǒng)GDI+提供了對(duì)各種圖形繪制的支持，是對(duì)GDI的改進(jìn)，也是.NET框架結(jié)構(gòu)的重要組成部分。GDI+提供了一個(gè)抽象層，隱藏了不同視頻卡之間的區(qū)別，直接調(diào)用Windows API函數(shù)完成指定的任務(wù)。GDI+使應(yīng)用程序所使用的打印機(jī)與屏幕一樣，如果要打印某些東西，而不是顯示它們，只需指定輸出的設(shè)備是打印機(jī)，再用相同的方式調(diào)用相同的Windows API函數(shù)即可。GDI+為.NET系統(tǒng)提供了良好的支持，提供了多個(gè)命名空間，可以在程序中

4、調(diào)用并使用提供的各種類。 GDI + GDI +命名空間 GDI + GDI +命名空間 常用的類幾乎都包含在System.Drawing命名空間中。在GDI+中，大多數(shù)繪圖工作都是調(diào)用Graphics實(shí)例的方法完成的，它負(fù)責(zé)處理大多數(shù)繪圖操作。畫(huà)餅圖的思路：先畫(huà)一個(gè)橢圓，然后在橢圓內(nèi)部進(jìn)行分塊，并填充不同的顏色，這樣一個(gè)簡(jiǎn)單餅圖就完成了。建立工程Proj7-1并引入GDI+的命名空間“System.Drawing”。GDI+畫(huà)餅圖案例名稱：案例名稱：GDI+畫(huà)餅圖畫(huà)餅圖工程名稱：工程名稱：Proj7-1Imports System.DrawingPublic Class Form1 Priv

5、ate Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 定義一塊區(qū)域 Dim image As New Bitmap(350, 200) Dim g As Graphics = Graphics.FromImage(image) g.Clear(Color.White) Dim outline As New Rectangle(10, 5, 300, 100) 繪制圖片 g.DrawEllipse(New Pen(Color.Black, 8.0F),

6、outline) g.FillPie(New SolidBrush(Color.Red), outline, -20.0F, 120.0F) g.FillPie(New SolidBrush(Color.Yellow), outline, 100.0F, 120.0F) g.FillPie(New SolidBrush(Color.Blue), outline, 220.0F, 100.0F) g.FillPie(New SolidBrush(Color.Green), outline, 320.0F, 40.0F) 顯示并輸出 Me.BackgroundImage = image Me.Ba

7、ckgroundImageLayout = ImageLayout.Center image.Save(mypie.jpg) End SubEnd ClassGDI+畫(huà)餅圖 7.3 7.3 dotnetCHARTINGdotnetCHARTING數(shù)據(jù)圖表系統(tǒng)dotnetCHARTING特點(diǎn)是水晶式效果，外觀非常漂亮，而且附帶了各種效果的示例代碼。dotnetCHARTING在生成統(tǒng)計(jì)圖的時(shí)候需要設(shè)置一個(gè)臨時(shí)目錄，用來(lái)保存生成統(tǒng)計(jì)圖的圖片，dotnetCHARTING的圖表效果好，很大程度上是因?yàn)樗闪藞D片，然后將其顯示在界面上。因?yàn)槭庆o態(tài)圖片，因此圖表系統(tǒng)不支持縮放。如果對(duì)性能要求不高，do

8、tnetCHARTING是非常好的選擇。7.3.1 7.3.1 繪制柱狀圖dotnetCHARTING針對(duì)WinForm和WebForm有不同的類庫(kù)，編寫(xiě)窗口程序使用WinForm類庫(kù)。dotnetCHARTING以動(dòng)態(tài)鏈接庫(kù)形式提供，如圖7-2所示。為了在程序中使用相關(guān)類，需要引入dotnetCHARTING命名空間，在主菜單“項(xiàng)目”中選擇“添加引用”，在選項(xiàng)卡“瀏覽”中將文件“dotnetCharting.WinForms.dll”添加到工程中。在程序中首先添加一個(gè)比較通用的繪圖類ShowData。為了在程序中使用相關(guān)類，需要引入dotnetCHARTING命名空間，在主菜單“項(xiàng)目”中選擇

9、“添加引用”，在選項(xiàng)卡“瀏覽”中將文件“dotnetCharting.WinForms.dll”添加到工程中。在程序中首先添加一個(gè)比較通用的繪圖類ShowData。繪制柱狀圖 案例名稱：案例名稱：dotnetCHARTING繪制圖表繪制圖表工程名稱：工程名稱：Proj7-2Class ShowData 屬性 Private _phaysicalimagepath As String 圖片存放路徑 Private _title As String 圖片標(biāo)題 Private _xtitle As String 圖片x坐標(biāo)名稱 Private _ytitle As String 圖片y坐標(biāo)名稱 Pr

10、ivate _seriesname As String 圖例名稱 Private _picwidth As Integer 圖片寬度 Private _pichight As Integer 圖片高度 Private _dt As DataTable 圖片數(shù)據(jù)源 Public Property PhaysicalImagePath() As String Get Return _phaysicalimagepath End Get繪制柱狀圖 7.3.2 7.3.2 繪制餅圖在繪制柱狀圖程序的基礎(chǔ)上，只要調(diào)用“show.CreatePie(Chart1)”函數(shù)就可以繪制餅圖7.3.3 7.3.3

11、 繪制折線圖案例名稱：案例名稱：dotnetCHARTING繪制圖表繪制圖表工程名稱：工程名稱：Proj7-2 Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click Dim show As New ShowData() show.Title = 平方根表 show.XTitle = 整數(shù) show.YTitle = 整數(shù)的平方根 show.PicHight = 300 show.PicWidth = 600 show.SeriesNa

12、me = 值 show.PhaysicalImagePath = ChartImages Dim mydt As New DataTable(Squares) Dim mydr As DataRow Dim i As Integer mydt.Columns.Add(New DataColumn(數(shù)字, GetType(Integer) mydt.Columns.Add(New DataColumn(開(kāi)根, GetType(Integer) For i = 0 To 10 mydr = mydt.NewRow() mydr(0) = i mydr(1) = Math.Sqrt(i) mydt.

13、Rows.Add(mydr) Next show.dt = mydt show.CreateLine(Chart1) End Sub7.4 ZedGraph7.4 ZedGraph數(shù)據(jù)圖表系統(tǒng)ZedGraph最大的特點(diǎn)是開(kāi)源，可以修改源代碼以適應(yīng)自己的需求，例如：ZedGraph在畫(huà)線型圖的時(shí)候，線條沒(méi)有使用抗鋸齒，只要修改Line類的Default結(jié)構(gòu)中的默認(rèn)設(shè)置就可以了。和dotnetCHARTING相比，ZedGraph的效果要稍微差一些。由于ZedGraph是使用GDI+直接進(jìn)行描畫(huà)，所以性能得到了保證，如果改變坐標(biāo)軸的刻度，和dotnetCHARTING相比，ZedGraph的反應(yīng)速

14、度要快很多。基于此，ZedGraph提供了很重要的縮放和拖動(dòng)功能，可以通過(guò)鼠標(biāo)滾輪進(jìn)行方法，縮小圖表，可以通過(guò)鼠標(biāo)中鍵來(lái)拖動(dòng)，非常方便。7.4 ZedGraph7.4 ZedGraph數(shù)據(jù)圖表系統(tǒng)對(duì)于類似股市的實(shí)時(shí)走勢(shì)，CPU使用率等實(shí)時(shí)變化的數(shù)據(jù)，使用ZedGraph也可以很方便地作到。ZedGraph在基于PointPairList作畫(huà)，所以你只要在PointPairList這個(gè)集合中添加新的數(shù)據(jù)，然后進(jìn)行重畫(huà)就可以實(shí)現(xiàn)。總的來(lái)說(shuō)，dotnetCHARTING生成的圖表效果好，但是性能方面較差，對(duì)實(shí)時(shí)要求強(qiáng)的需求不適應(yīng)。ZedGraph開(kāi)源，效果比起dotnetCHARTING差，但是性能

15、好，能適應(yīng)有實(shí)時(shí)要求的數(shù)據(jù)。ZedGraph和dotnetCHARTING也提供一個(gè)DLL文件，名稱是：“ZedGraph.dll”，使用步驟和dotnetCHARTING也一樣。 7.4 ZedGraph7.4 ZedGraph數(shù)據(jù)圖表系統(tǒng)7.4.1 7.4.1 繪制橫柱狀圖新建工程Proj7-3，在程序中添加WebGraphControl控件，同時(shí)通過(guò)“添加引用”將ZedGraph.dll加入，在From窗體上添加ZedGraphControl控件，在工程中添加6個(gè)按鈕，分別繪制不同的圖形，第一個(gè)按鈕繪制橫柱狀圖。案例名稱：繪制橫柱狀圖案例名稱：繪制橫柱狀圖工程名稱：工程名稱：Proj7-

16、3Imports ZedGraphImports System.DrawingPublic Class Form1 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim myPane As GraphPane = ZedGraphControl1.GraphPane myPane.Title.Text = 標(biāo)題 myPane.YAxis.Title.Text = Y軸說(shuō)明 myPane.XAxis.Title.Text = X

17、軸說(shuō)明 Dim labels() As String = 100, 230, 42, 40, 80, 10, 75 Dim x() As Double = 40, 300, 115, 75, 22, 98, 40 Dim x2() As Double = 120, 175, 95, 57, 113, 110 Dim x3() As Double = 204, 192, 119, 80, 134, 156 Dim myCurve As BarItem = myPane.AddBar(Here, x, Nothing, Color.Red) myCurve.Bar.Fill = New Fill(

18、Color.Red, Color.White, Color.Red, 90.0F) myCurve = myPane.AddBar(There, x2, Nothing, Color.Blue) myCurve.Bar.Fill = New Fill(Color.Blue, Color.White, Color.Blue, 90.0F) myCurve = myPane.AddBar(Elsewhere, x3, Nothing, Color.Green) myCurve.Bar.Fill = New Fill(Color.Green, Color.White, Color.Green, 90

19、.0F) myPane.YAxis.MajorTic.IsBetweenLabels = True myPane.YAxis.Scale.TextLabels = labels myPane.YAxis.Type = AxisType.Text myPane.BarSettings.Type = BarType.Stack myPane.BarSettings.Base = BarBase.Y myPane.Chart.Fill = New Fill(Color.White, _ Color.FromArgb(255, 255, 166), 45.0F) ZedGraphControl1.Ax

20、isChange() SetSize()End SubPrivate Sub SetSize() ZedGraphControl1.Location = New Point(10, 10) ZedGraphControl1.Size = New Size(ClientRectangle.Width - 40, ClientRectangle.Height - 40)End Sub7.4.1 7.4.1 繪制橫柱狀圖7.4.2 7.4.2 繪制豎柱狀圖案例名稱：繪制豎柱狀圖案例名稱：繪制豎柱狀圖工程名稱：工程名稱：Proj7-3 Private Sub Button2_Click(ByVal s

21、ender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click Dim myPane As GraphPane = ZedGraphControl1.GraphPane myPane.Title.Text = 消費(fèi)者學(xué)歷統(tǒng)計(jì) 設(shè)計(jì)圖表的標(biāo)題 myPane.XAxis.Title.Text = 學(xué)歷類型 X軸標(biāo)題 myPane.YAxis.Title.Text = 人數(shù) Y軸標(biāo)題 Dim list As New PointPairList() Dim x As Integer For x = 0 To 10 縱

22、坐標(biāo)的值 Randomize() Dim y As Single = CInt(Int(100 * Rnd() + 1) list.Add(x, y) Next Dim myCurve = myPane.AddBar(數(shù)據(jù)統(tǒng)計(jì), list, Color.Green) myCurve.Bar.Fill = New Fill(Color.Green, Color.Green, Color.Green) Dim labels(10) As String Dim i As Integer For i = 0 To 10 橫坐標(biāo)文字 labels(i) = i.ToString() Next myPan

23、e.XAxis.Scale.TextLabels = labels myPane.XAxis.Type = AxisType.Text myPane.Fill = New Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0F) myPane.Chart.Fill = New Fill(Color.White, Color.White, 45.0F) ZedGraphControl1.AxisChange() SetSize() End Sub7.4.3 7.4.3 繪制實(shí)心雙線圖案例名稱：繪制實(shí)心雙線圖案例名稱：繪制實(shí)心雙線圖工程名稱：工

24、程名稱：Proj7-3 Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click Dim myPane As GraphPane = ZedGraphControl1.GraphPane myPane.Title.Text = 標(biāo)題 myPane.YAxis.Title.Text = Y軸說(shuō)明 myPane.XAxis.Title.Text = X軸說(shuō)明 Dim list As New PointPairList() Dim list2

25、As New PointPairList() Dim i As Integer, x As Double, y As Double, y2 As Double For i = 0 To 35 x = New XDate(2010, i + 1, 1) y = Math.Sin(i * Math.PI / 15.0) y2 = 2 * y list.Add(x, y) list2.Add(x, y2) Next i Dim myCurve2 As LineItem = myPane.AddCurve(My Curve 2, list, Color.Blue, _ SymbolType.Circl

26、e) myCurve2.Line.Fill = New Fill(Color.White, Color.Red, 45.0F) myCurve2.Symbol.Fill = New Fill(Color.White) Dim myCurve As LineItem = myPane.AddCurve(My Curve, _ list2, Color.MediumVioletRed, SymbolType.Diamond) myCurve.Line.Fill = New Fill(Color.White, Color.Green) myCurve.Symbol.Fill = New Fill(C

27、olor.White) myPane.XAxis.Type = AxisType.Date myPane.XAxis.CrossAuto = True myPane.Chart.Fill = New Fill(Color.White, Color.LightGoldenrodYellow, 45.0F) ZedGraphControl1.AxisChange() SetSize() End Sub7.4.3 7.4.3 繪制實(shí)心雙線圖7.4.4 7.4.4 繪制餅圖案例名稱：繪制餅圖案例名稱：繪制餅圖工程名稱：工程名稱：Proj7-3 Private Sub Button4_Click(ByV

28、al sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click Dim myPane As GraphPane = ZedGraphControl1.GraphPane myPane.Title.Text = 餅圖 myPane.Title.FontSpec.IsItalic = True myPane.Title.FontSpec.Size = 24.0F myPane.Title.FontSpec.Family = 餅圖 myPane.Fill = New Fill(Color.White, Co

29、lor.Goldenrod, 45.0F) myPane.Chart.Fill.Type = FillType.None Dim segment1 As PieItem = myPane.AddPieSlice(20, Color.Navy, _ Color.White, 45.0F, 0, North) Dim segment3 As PieItem = myPane.AddPieSlice(30, Color.Purple, _ Color.White, 45.0F, 0.0, East) Dim segment4 As PieItem = myPane.AddPieSlice(20, C

30、olor.LimeGreen, _ Color.White, 45.0F, 0, West) Dim segment2 As PieItem = myPane.AddPieSlice(40, Color.SandyBrown, _ Color.White, 45.0F, 0.2, South) Dim segment6 As PieItem = myPane.AddPieSlice(250, Color.Red, _ Color.White, 45.0F, 0, Europe) Dim segment7 As PieItem = myPane.AddPieSlice(50, Color.Blu

31、e, _ Color.White, 45.0F, 0.2, Pac Rim) Dim segment8 As PieItem = myPane.AddPieSlice(400, Color.Green, _ Color.White, 45.0F, 0, South America) Dim segment9 As PieItem = myPane.AddPieSlice(50, Color.Yellow, _ Color.White, 45.0F, 0.2, Africa) Dim curves As CurveList = myPane.CurveList Dim total As Doub

32、le = 0, i As Integer Dim pie As PieItem For i = 0 To curves.Count - 1 pie = curves(i) total += pie.Value Next i Dim text As New TextObj(Total 2004 Sales + Chr(10) + $ + _ total.ToString() + M, 0.18F, 0.4F, CoordType.PaneFraction) text.Location.AlignH = AlignH.Center text.Location.AlignV = AlignV.Bot

33、tom text.FontSpec.Border.IsVisible = False text.FontSpec.Fill = New Fill(Color.White, Color.FromArgb(255, 100, 100), 45.0F) text.FontSpec.StringAlignment = StringAlignment.Center myPane.GraphObjList.Add(text) Dim text2 As New TextObj(text) text2.FontSpec.Fill = New Fill(Color.Black) text2.Location.X

34、 += 0.008F text2.Location.Y += 0.01F myPane.GraphObjList.Add(text2) ZedGraphControl1.AxisChange() SetSize() End Sub繪制餅圖 7.4.5 7.4.5 繪制分段柱狀圖案例名稱：繪制分段柱狀圖案例名稱：繪制分段柱狀圖工程名稱：工程名稱：Proj7-3 Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click Dim myPane

35、As GraphPane = ZedGraphControl1.GraphPane myPane.Title.Text = 標(biāo)題 myPane.YAxis.Title.Text = Y軸說(shuō)明 myPane.XAxis.Title.Text = X軸說(shuō)明 Dim list As New PointPairList Dim rand As New Random For i As Integer = 0 To 10 Dim x As Double = CDbl(i) + 1 Dim y As Double = rand.NextDouble() * 1000 Dim z As Double = i

36、/ 4.0 list.Add(x, y, z) Next Dim mycurve As BarItem = myPane.AddBar(0, list, Color.Black) Dim colors As Color() = Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Black mycurve.Bar.Fill = New Fill(colors) mycurve.Bar.Fill.Type = FillType.GradientByZ mycurve.Bar.Fill.RangeMin = 0 mycurve.Bar.F

37、ill.RangeMax = 3 Dim list1 As New PointPairList Dim rand1 As New Random For i As Integer = 0 To 10 Dim x As Double = CDbl(i) + 1 Dim y As Double = rand1.NextDouble() * 1000 Dim z As Double = i / 4.0 list1.Add(x, y, z) Next mycurve = myPane.AddBar(1, list1, Color.DarkGreen) myPane.BarSettings.Type =

38、BarType.Stack ZedGraphControl1.AxisChange() SetSize() End Sub7.4.5 7.4.5 繪制分段柱狀圖7.4.6 7.4.6 繪制雙線曲線案例名稱：繪制雙線曲線案例名稱：繪制雙線曲線工程名稱：工程名稱：Proj7-3 Private Sub Button6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button6.Click Dim myPane As GraphPane = ZedGraphControl1.GraphPane m

39、yPane.Title.Text = 標(biāo)題 myPane.YAxis.Title.Text = Y軸說(shuō)明 myPane.XAxis.Title.Text = X軸說(shuō)明 設(shè)置初始數(shù)據(jù) Dim x, y1, y2 As Double Dim list1 As New PointPairList() Dim list2 As New PointPairList() Dim i As Integer For i = 0 To 36 x = CDbl(i) + 5 y1 = 1.5 + Math.Sin(CDbl(i) * 0.2) y2 = 3.0 * (1.5 + Math.Sin(CDbl(i)

40、* 0.2) list1.Add(x, y1) list2.Add(x, y2) Next 創(chuàng)建紅色的菱形曲線, 圖中的 Porsche Dim myCurve = myPane.AddCurve(Porsche, list1, Color.Red, SymbolType.Diamond) 創(chuàng)建藍(lán)色的圓形曲線, 圖中的 Piper Dim myCurve2 = myPane.AddCurve(Piper, list2, Color.Blue, SymbolType.Circle) 在數(shù)據(jù)變化時(shí)繪制圖形 ZedGraphControl1.AxisChange() SetSize() End Sub繪制雙線曲線 7.5 Word7.5 Word數(shù)據(jù)圖表生成系統(tǒng)圖表可以通過(guò)操作系統(tǒng)的Word組件，自動(dòng)生成到Word文檔中。Word系統(tǒng)自帶的組件是“Micr