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

1、第7章 數(shù)據(jù)圖表系統(tǒng)開發(fā)大綱 VB.NET數(shù)據(jù)圖表系統(tǒng)的相關(guān)技術(shù) 使用GDI+繪制簡單的圖 使用dotnetCHARTING數(shù)據(jù)圖表系統(tǒng)繪制柱狀圖、餅圖和折線圖 使用ZedGraph數(shù)據(jù)圖表系統(tǒng)繪制各種圖 生成Word數(shù)據(jù)圖表系統(tǒng)7.1 VB.NET7.1 VB.NET數(shù)據(jù)圖表簡介數(shù)據(jù)控件與水晶報(bào)表是數(shù)據(jù)庫表顯示的一個(gè)格式。除此之外，VB.NET還支持多種數(shù)據(jù)圖表顯示格式，常見的包括：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)上作畫，微軟創(chuàng)造了圖形設(shè)備接口，簡稱為GDI，它是類、函數(shù)、變量和常量的集合，或者說是在應(yīng)用程序中繪畫所需要的絕大部分對(duì)象。GDI由已安裝在計(jì)算機(jī)中的GDI.DLL動(dòng)態(tài)庫來提供。GDI+是Windows系列操作系統(tǒng)用來執(zhí)行繪畫及其他相關(guān)圖形操作的子系統(tǒng)。操作系統(tǒng)Windows XP和Windows Server 2003以及以上的版本中，GDI+已經(jīng)替換掉GDI。GDI+中的+表示相對(duì)于GDI來說，有很大的改進(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ù)圖表簡介dotnetCHAR

3、TING是.NET圖表控件，對(duì)中文支持非常好，而且操作方便開發(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 +命名空間 命 名 空 間說 明System.Drawing包含與基本繪圖功能有關(guān)的大多數(shù)類、結(jié)構(gòu)、枚舉和委托等。System.Drawing.Drawing2D為大多數(shù)高級(jí)2D和矢量繪圖操作提供了支持，包括消除鋸齒、幾何轉(zhuǎn)換和圖形路徑System.Drawing.Imaging幫助處理圖像(位圖、GIF文件等)的各種類System.Drawing.Printing把打印機(jī)或打印預(yù)覽窗口作為輸出設(shè)備時(shí)使用的類System.Drawing.Design一些預(yù)定義的對(duì)話框、屬性表和其他用戶界面元素，與在設(shè)計(jì)期間擴(kuò)展用戶界面相關(guān)System.Drawing

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

6、 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), outline

7、) 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.Backgroun

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

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

10、在選項(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)名稱 Private _

11、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 繪制折線圖案

12、例名稱：案例名稱：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.SeriesName = 值

13、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(開根, GetType(Integer) For i = 0 To 10 mydr = mydt.NewRow() mydr(0) = i mydr(1) = Math.Sqrt(i) mydt.Rows.Ad

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

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

16、時(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í)通過“添加引用”將ZedGraph.dll加入，在From窗體上添加ZedGraphControl控件，在工程中添加6個(gè)按鈕，分別繪制不同的圖形，第一個(gè)按鈕繪制橫柱狀圖。案例名稱：繪制橫柱狀圖案例名稱：繪制橫柱狀圖工程名稱：工程名稱：Proj7-3Import

17、s 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軸說明 myPane.XAxis.Title.Text = X軸說明 Dim

18、 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(Color.R

19、ed, 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.0F) my

20、Pane.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.AxisChang

21、e() 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 sender A

22、s 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 縱坐標(biāo)的值 Ra

23、ndomize() 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 myPane.XAxis

24、.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í)心雙線圖工程名稱：工程名稱：Pro

25、j7-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軸說明 myPane.XAxis.Title.Text = X軸說明 Dim list As New PointPairList() Dim list2 As New

26、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.Circle) myCu

27、rve2.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(Color.Wh

28、ite) 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(ByVal send

29、er 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, Color.Gol

30、denrod, 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, Color.Li

31、meGreen, _ 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.Blue, _ Co

32、lor.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 Double = 0,

33、 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.Bottom tex

34、t.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 += 0.0

35、08F 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 As Grap

36、hPane = ZedGraphControl1.GraphPane myPane.Title.Text = 標(biāo)題 myPane.YAxis.Title.Text = Y軸說明 myPane.XAxis.Title.Text = X軸說明 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 / 4.0 l

37、ist.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.Fill.Ran

38、geMax = 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 = BarType

39、.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 myPane.T

40、itle.Text = 標(biāo)題 myPane.YAxis.Title.Text = Y軸說明 myPane.XAxis.Title.Text = X軸說明 設(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) * 0.2)

41、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)圖表可以通過操作系統(tǒng)的Word組件，自