張國梁

（西藏民族學(xué)院網(wǎng)絡(luò)信息技術(shù)中心,陜西 咸陽 712082）

1.概述

DevExpress是一流的控件套包產(chǎn)品。它功能強(qiáng)大，是.NET基礎(chǔ)控件擴(kuò)展包，可以快速開發(fā)出專業(yè)、強(qiáng)大的應(yīng)用程序。其中的XtraCharts組件可以方便、快捷的開發(fā)出有關(guān)二維和三維圖表軟件。該組件可使用在窗口應(yīng)用、ASP.NET和打印頁面上。XtraCharts可以可視化各種數(shù)據(jù)，包括數(shù)據(jù)庫表和集合數(shù)據(jù)。XtraCharts的二維圖表包括柱狀圖、點(diǎn)圖、線圖、餅圖等，同時(shí)還支持三維圖。

一般的監(jiān)控軟件，都需要采集監(jiān)控對(duì)象的各項(xiàng)數(shù)據(jù)，并動(dòng)態(tài)顯示各項(xiàng)數(shù)據(jù)變化。如果直接從底層做會(huì)比較復(fù)雜，而且要達(dá)到專業(yè)性的顯示效果更難。但是，如果使用XtraCharts來實(shí)現(xiàn)，可以極大提高開發(fā)效率和效果。開發(fā)人員不必耗費(fèi)太多時(shí)間在圖表顯示上，而將重點(diǎn)放在數(shù)據(jù)的處理上。

2.XtraCharts應(yīng)用方法和實(shí)例分析

ChartControl控件是將XtraCharts用在WinForm上。本文主要論述ChartControl控件應(yīng)用。XtraCharts在ASP.NET和打印頁面上應(yīng)用方法和此類似。DevExrpress為用戶提供兩種方式使用該控件：一是可以將ChartControl直接拖放在窗口上，通過Chart Wizard來定制具體的應(yīng)用；二是在程序運(yùn)行時(shí)，直接通過代碼來生成定制具體的應(yīng)用。第一種方式簡單方便，適合簡單應(yīng)用。第二種方法比較復(fù)雜，但靈活，適合復(fù)雜應(yīng)用。本文主要介紹第二種方式。

ChartControl將要顯示的數(shù)據(jù)和對(duì)應(yīng)圖形分離。該控件將每一組相關(guān)的數(shù)據(jù)封裝在一個(gè)series對(duì)象中。其中一個(gè)series對(duì)象代表了一系列相關(guān)的數(shù)據(jù)點(diǎn)，作為在圖表上顯示的一個(gè)分組。同一個(gè)series對(duì)象可以不同的視覺方式表示。比如同一組數(shù)據(jù)可以分別使用柱狀圖、點(diǎn)圖、線圖、餅圖等表示。Chart-Control中的Diagram對(duì)象用來表示圖表的顯示布景，包括Axis坐標(biāo)軸，Gridline網(wǎng)格線，圖例Legend等。

下面根據(jù)實(shí)例來分析ChartControl應(yīng)用方法。例如，如果需要開發(fā)有關(guān)監(jiān)控病人體征的軟件，在微機(jī)上實(shí)現(xiàn)病人體征動(dòng)態(tài)顯示和監(jiān)控，則需要在圖表上同時(shí)顯示多項(xiàng)數(shù)據(jù)動(dòng)態(tài)變化圖。假設(shè)要監(jiān)控病人的體征：包括體溫、呼吸和脈搏值三項(xiàng)數(shù)據(jù)。這三項(xiàng)數(shù)據(jù)都可以看作為是以某一時(shí)間點(diǎn)為自變量的函數(shù)的值。時(shí)間點(diǎn)之間有固定時(shí)間間隔。因此，可以設(shè)計(jì)讓三項(xiàng)數(shù)據(jù)共用一個(gè)時(shí)間軸，用X軸表示，同時(shí)這三項(xiàng)數(shù)據(jù)又分別對(duì)應(yīng)一個(gè)Y軸。三項(xiàng)數(shù)據(jù)分別對(duì)應(yīng)三個(gè)series對(duì)象。

3.實(shí)現(xiàn)方法和步驟

3.1 設(shè)置Diagram對(duì)象

自定義一個(gè)類來實(shí)現(xiàn)。用來設(shè)定圖表顯示元素，包括坐標(biāo)軸和圖例等。坐標(biāo)軸分為主坐標(biāo)軸和副坐標(biāo)軸。需要將不同類型數(shù)據(jù)顯示在同一張圖表上，而每一項(xiàng)數(shù)據(jù)的數(shù)值有不同范圍。因此就需要多個(gè)坐標(biāo)軸表示這每一項(xiàng)數(shù)據(jù)，每一種數(shù)據(jù)封裝在一個(gè)series對(duì)象中。因此每一個(gè)坐標(biāo)軸和一個(gè)series對(duì)象綁定。在本文應(yīng)用中，將采集數(shù)據(jù)的時(shí)間作為X軸，在Y軸方向分別為每一個(gè)時(shí)間點(diǎn)上對(duì)應(yīng)的體溫、呼吸和脈搏值。因此需要設(shè)定一個(gè)X軸和三個(gè)Y軸。其中一個(gè)為主Y軸呼吸數(shù)據(jù)綁定，兩個(gè)副Y軸分別同體溫?cái)?shù)據(jù)和脈搏數(shù)據(jù)綁定。使用下面的代碼來實(shí)現(xiàn)一個(gè)表示體溫的副Y軸。

上面提到過Diagram對(duì)象用來設(shè)置圖表上的顯示元素。因此，首先定義Diagram對(duì)象。再將副軸加入到Diagram對(duì)象上。

private XYDiagram xyDiagram1;

xyDiagram1.SecondaryAxesY.AddRange(new SecondaryA-xisY[]

{secondaryAxisY1,secondaryAxisY2});

SecondaryAxisY secondaryAxisY1=new SecondaryAxisY();//定義一個(gè)副Y軸。

secondaryAxisY1.Alignment=AxisAlignment.Near;//設(shè)定顯示位置。

secondaryAxisY1.GridSpacingAuto=false;//網(wǎng)格線間隔手動(dòng)設(shè)置。

secondaryAxisY1.GridSpacing=2;//設(shè)置網(wǎng)格線的間隔。

secondaryAxisY1.Range.MaxValueSerializable="42";//顯示體溫的最大值。

secondaryAxisY1.Range.MinValueSerializable="20";//顯示體溫的最小值。

secondaryAxisY1.Range.Auto=false;

secondaryAxisY1.Range.SideMarginsEnabled=true;

secondaryAxisY1.NumericOptions.Format= DevExpress.XtraCharts.NumericFormat.Number;

secondaryAxisY1.NumericOptions.Precision=1;

secondaryAxisY1.Name="secondaryAxisY1";

最后再用XYDiagram對(duì)象xyDiagram1設(shè)定ChartControl對(duì)象中，Diagram屬性。

lineChart.Diagram=xyDiagram1;

3.2 定義Series對(duì)象

每一個(gè)Series對(duì)象綁定一項(xiàng)數(shù)據(jù)和一個(gè)Y軸。下面代碼，定義Series對(duì)象ser1，顯示類型為Spline，表示樣條曲線。并且和上面定義的secondaryAxisY1綁定。

Series ser1=new Series(“體溫”,ViewType.Spline);

ser1.ArgumentScaleType=ScaleType.DateTime;//自變量類型為日期時(shí)間型。

((LineSeriesView)ser1.View).LineMarkerOptions.Kind =MarkerKind.Triangle;//設(shè)置ser1對(duì)應(yīng)的圖例。

((LineSeriesView)ser1.View).LineStyle.DashStyle=Dash-Style.Solid;

((LineSeriesView)ser1.View).Color=Color.Red;

((LineSeriesView)ser1.View).LineMarkerOptions.Size=10;

((LineSeriesView)ser1.View).LineStyle.Thickness=1;

ser1.PointOptions.ArgumentDateTimeOptions.Format=Date-TimeFormat.ShortTime;

ser1.SeriesPointsSorting=SortingMode.Ascending;

下面定義樣條曲線視圖SplineSeriesView對(duì)象spline-SeriesView1。設(shè)定其對(duì)應(yīng)的坐標(biāo)軸為secondaryAxisY1。再用splineSeriesView1設(shè)置ser1的View屬性。

SplineSeriesView splineSeriesView1=new SplineSeriesView();

splineSeriesView1.AxisYName="secondaryAxisY1";

ser1.View=splineSeriesView1;

最后將ser1加到圖表上。代碼為：

lineChart.Series.Add(ser1);//lineChart為ChartControl對(duì)象。

3.3 向Series對(duì)象上添加數(shù)據(jù)

當(dāng)數(shù)據(jù)可以動(dòng)態(tài)更新時(shí)，相應(yīng)的曲線也會(huì)變化，從而實(shí)現(xiàn)動(dòng)態(tài)曲線。定義定時(shí)器，在定時(shí)器事件中加數(shù)據(jù)點(diǎn)。代碼如下，pointTime為時(shí)間點(diǎn)，dd為對(duì)應(yīng)的值。

private void timer1_Tick(object sender,EventArgs e)

{

ser1.Points.Add(new SeriesPoint(pointTime,new double[]{dd}));

pointTime=pointTime.AddMinutes(5);

}

3.4 實(shí)現(xiàn)圖表自動(dòng)滾屏

當(dāng)數(shù)據(jù)不斷增加，在圖表上顯示完一屏?xí)r，就需要自動(dòng)滾屏。具體的做法是，定時(shí)修改X軸的表示范圍。當(dāng)代碼如下：

xyDiagram1.AxisX.Range.Auto=false;

xyDiagram1.AxisX.Range.MaxValue=start;//設(shè)置X軸的起點(diǎn)

xyDiagram1.AxisX.Range.MinValue=end;//設(shè)置X軸的終點(diǎn)。

當(dāng)X軸的表示范圍變化時(shí)，顯示的曲線隨之移動(dòng)，從而實(shí)現(xiàn)圖表的滾屏。

4.應(yīng)用效果分析

通過以上的方法和步驟，就可以使用DevExpress來實(shí)現(xiàn)較為復(fù)雜的圖表功能，在一個(gè)圖表顯示多種不同的數(shù)據(jù)，將這些不同數(shù)據(jù)和指定坐標(biāo)軸綁定，并實(shí)現(xiàn)圖表的動(dòng)態(tài)更新和自動(dòng)滾屏。實(shí)現(xiàn)效果如圖1病人體征監(jiān)測圖所示。圖1中顯示了三項(xiàng)數(shù)據(jù)的變化趨勢，并包含一個(gè)X軸和三個(gè)Y軸，圖中上部為X軸表示時(shí)間，右側(cè)從左到右依次分別為副Y軸2、副Y軸1和主Y軸。體溫對(duì)應(yīng)紅色線和副Y軸1，圖例為三角形。呼吸對(duì)應(yīng)紫色線和副Y軸2，圖例為正方形。呼吸對(duì)應(yīng)褐色線和主Y軸，圖例為圓形。

圖1 病人體征監(jiān)測圖

本文中使用的開發(fā)環(huán)境：VS2008 C#，DevExpress控件包V8.2。示例軟件運(yùn)行環(huán)境：.netframework2.0，windows xp/windows2003/windows7。

5.結(jié)語

在本文中，通過監(jiān)控軟件的應(yīng)用實(shí)例，介紹了DevExpress圖表控件的使用方法和步驟。從中可以看出，使用DevExpress中XtraChart組件來開發(fā)圖表相關(guān)軟件，既可以實(shí)現(xiàn)比較復(fù)雜的功能，又可以達(dá)到比較好的顯示效果。同時(shí)開發(fā)人員不必耗費(fèi)太多精力在圖表顯示上，而將重點(diǎn)放在數(shù)據(jù)的處理上，從而可以提高開發(fā)效率和效果。

[1]DevExpress Documentation.

[2]http：//documentation.devexpress.com/#XPO/CustomDocument-1998.

[3]Christian Nagel.C#高級(jí)編程[M].清華大學(xué)書版社.2006.

[4]李福紅.DevExpres表格控件運(yùn)行時(shí)動(dòng)態(tài)設(shè)置表格列[J].中國高新技術(shù)企業(yè)，2010，33：117.