介紹

　　ZedGraph是一個功能強(qiáng)大圖形控件，可以根據(jù)任意數(shù)據(jù)集創(chuàng)建2D曲線，bar，和pie圖，同時我們既可以Windows Form中，也可以在ASP.NET Web Form中使用它。ZedGraph具有高度的靈活性，我們幾乎可以定制圖形的每個方面，同時又為所有的特性提供了默認(rèn)值，因此可以快速上手。ZedGraph與.NET 2.0和Visual Studio 2005兼容。

　　在本文中我們介紹如何在Visual Studio 2005中使用UpdatePanel，ZedGraph控件以及Web服務(wù)技術(shù)開發(fā)一個簡單的實(shí)時監(jiān)控Web應(yīng)用程序，我們會將模擬的數(shù)據(jù)實(shí)時的呈現(xiàn)給用戶。同時我們將使用Web服務(wù)而不是整頁回傳對某些參數(shù)進(jìn)行控制，以提高用戶體驗(yàn)。

　　使用Visual Studio 2005創(chuàng)建一個新的網(wǎng)站

　　選擇Visual Studio 2005中的File->New Web Site，彈出圖1所示的對話框，選中ASP.NET AJAX-Enabled Web Site模板(注意，在Visual Studio 2005中你需要下載ASPAJAXExtSetup包才會出現(xiàn)此模板)，在這里我們使用File System，并將網(wǎng)站命名為ZedGraphDemo，單擊Ok。

　　圖1 新建一個ASP.NET AJAX-Enabled網(wǎng)站

　　在Toolbox中添加ZedGraph控件

　　在Toolbox面板的空白處單擊鼠標(biāo)右鍵，選擇Choose Items…，在彈出的Choose Toolbox Items對話框中單擊Browse按鈕，定位到ZedGraph.Web.dll程序集文件(本文中使用的是zedgraph_dll_v5.1.2.880)。

　　切換到Default.aspx的Design視圖，從工具箱中拖拽添加UpdatPanel，Timer(注意Timer控件也必須放在UpdatePanel控件內(nèi)部，否則它會引起整頁回傳，而不是我們希望的部分回傳)和ZedGraphWeb控件，此時的Design視圖看起來應(yīng)該是圖2這個樣子。同時將Timer1的Interval屬性設(shè)置為1000，即每秒鐘刷新一次。

　　圖2 設(shè)計(jì)視圖

　　ZedGraph控件屬性設(shè)置

　　ZedGraph允許你使用多種方法修改圖形的屬性。或者使用Visual Studio的屬性面板進(jìn)行可視化的修改，或者通過編程的方式在源代碼中修改。表格1中列出的屬性都是通過Visual Studio屬性面板進(jìn)行設(shè)置的。

　　表1 利用Visual Studio屬性面板對ZedGraph控件進(jìn)行設(shè)置

　　在解決方案瀏覽器中右擊項(xiàng)目，選擇New Folder，命名為ZedGraphImages，ZedGraph使用此文件夾存放呈現(xiàn)到客戶端的圖片，必須添加這個文件夾。

　　數(shù)據(jù)模型

　　添加一個DataSource.cs文件，我們使用它來模擬顯示的數(shù)據(jù)，添加源文件的時候Visual Studio會提示我們是否創(chuàng)建App_Code文件夾，選擇“是”即可。此文件夾專門用來存放源文件，在構(gòu)建網(wǎng)站應(yīng)用程序時，Visual Studio會自動編譯其中的源文件。注意由于我們使用了PointPairList 類型，因此需要使用using ZedGraph;引入ZedGraph名字空間。源代碼如下所示：

　　在這里我們只是使用一些隨機(jī)數(shù)進(jìn)行模擬。

namespace DataModal

{

public class DataSource

{

private DataSource() { dataPoints = 101; }

public static readonly DataSource Instance = new DataSource();

private Random ran = new Random();

//存儲采樣數(shù)據(jù)

public PointPairList DataBuffer = new PointPairList();

/// <summary>

/// 觸發(fā)一次采樣，并獲取采樣數(shù)據(jù)

/// </summary>

/// <param name="datas"></param>

public void GetData()

{

double[] yData = new double[DataPoints];

//獲取采樣數(shù)據(jù)

for (int i = 0; i < DataPoints; i++)

{

yData[i] = 100 * ran.NextDouble();

}

//填充緩沖區(qū)

double[] xData = new double[DataPoints];

for (int i = 0; i < DataPoints; i++)

{

xData[i] = i;

}

DataBuffer = new PointPairList(xData, yData);

}

/// <summary>

/// 采樣點(diǎn)數(shù)

/// </summary>

private UInt32 dataPoints;

public UInt32 DataPoints

{

get { return dataPoints; }

set { dataPoints = value; }

}

}

}

　　繪制圖形

　　1. 引入名字空間

　　在Default.aspx.cs文件中，為了使用ZedGraph和數(shù)據(jù)源提供的服務(wù)，需要引入它們的名字控件，包括using System.Drawing;using ZedGraph;using ZedGraph.Web;。

　　2. 添加靜態(tài)域

　　為_Default類添加兩個靜態(tài)成員，分別代表曲線和數(shù)據(jù)源對象，之所以使用靜態(tài)變量，是因?yàn)槲覀兿Ｍ械目蛻艨吹降?都是同樣的數(shù)據(jù)。

static LineItem myCurve;

static DataModal.DataSource osc = DataSource.Instance;

　　3. 訂閱ZedGraph控件RenderGraph事件

　　至此我們已經(jīng)準(zhǔn)備好了數(shù)據(jù)源，如何利用ZedGraph顯示它們呢？其實(shí)很簡單，只需要訂閱它的RenderGraph事件就可以了。在ZedGraph控件的屬性面板中，選擇“事件”選項(xiàng)，雙擊RenderGraph條目，Visual Studio會自動為我們創(chuàng)建事件處理器。打開Default.aspx.cs文件，可以看到一個空的

　　protected void ZedGraphWeb1_RenderGraph(ZedGraph.Web.ZedGraphWeb webObject, System.Drawing.Graphics g, ZedGraph.MasterPane pane){}

　　已經(jīng)在那里等著我們了。ZedGraph為你提供了一個MasterPane實(shí)例，默認(rèn)情況下，它包含一個MasterPane實(shí)例，我們可以通過pane[0]訪問它。

　　在設(shè)置曲線的各種屬性之前，首先來看一下ZedGraph為我們提供了哪些屬性以更好控制曲線的顯示(注：本段解釋來自Visifire圖形控件(一個開源的Silverlight控件)幫助文檔，起初為了弄明白這些參數(shù)的意義，費(fèi)了好大勁查看ZedGraph的幫助文檔，如果ZedGraph也能附上這么一幅說明圖該多好呀。對于Web應(yīng)用程序來說，Visifire的性能應(yīng)該要比ZedGraph優(yōu)異的多。在ZedGraph中，我們是在服務(wù)器端獲取數(shù)據(jù)并顯示在圖形中，然后將圖片發(fā)送到客戶端呈現(xiàn)在瀏覽器中，服務(wù)器的負(fù)載比較大。如果我們能通過調(diào)用Web服務(wù)的方法獲取數(shù)據(jù)，然后在客戶端對數(shù)據(jù)進(jìn)行分析處理并呈現(xiàn)給用戶，那么無疑會大大減輕服務(wù)器的負(fù)載。具體選擇哪種方法要具體問題具體分析，在服務(wù)器和客戶之間作出權(quán)衡。)

　　圖3展示了Visifire中的各種圖形控制屬性，雖然它們是Visifire中表示方法，但是ZedGraph基本上也提供了這些屬性。表2對屬性的意思進(jìn)行了簡單的說明，注意X和Y軸的屬性值可以分別設(shè)置。

　　圖3 各種坐標(biāo)軸控制屬性

　　表2 各個坐標(biāo)軸屬性的意思

　　在ZedGraphWeb1_RenderGraph方法中，首先對各種屬性進(jìn)行設(shè)置，然后將曲線添加到myPane中，ZedGraph會幫我們完成剩下的繪制工作。

protected void ZedGraphWeb1_RenderGraph(ZedGraph.Web.ZedGraphWeb webObject, System.Drawing.Graphics g, ZedGraph.MasterPane pane)

{

GraphPane myPane = pane[0];

//開始X軸刻度設(shè)置

//X軸坐標(biāo)的范圍

myPane.XAxis.Scale.Max = DataSource.Instance.DataPoints - 1;

myPane.XAxis.Scale.Min = 0;

//第一個主刻度從哪里開始

myPane.XAxis.Scale.BaseTic = 0;

//X軸主步進(jìn)值

myPane.XAxis.Scale.MajorStep = (DataSource.Instance.DataPoints - 1) / 10;

//X軸讀數(shù)是否可見

myPane.XAxis.Scale.IsVisible = true;

//設(shè)置橫坐標(biāo)的乘法因子，例如^1，

//myPane.XAxis.Scale.Mag = 1;

//開始Y軸坐標(biāo)設(shè)置

//設(shè)置Y軸坐標(biāo)的范圍

myPane.YAxis.Scale.Max = 110;

myPane.YAxis.Scale.Min = 0;

//第一個主刻度從哪里開始

myPane.YAxis.Scale.BaseTic = 0;

//X軸主步進(jìn)值

myPane.YAxis.Scale.MajorStep = 10;

//X軸讀數(shù)是否可見

myPane.YAxis.Scale.IsVisible = true;

//添加?xùn)鸥窬€

myPane.XAxis.MajorGrid.IsVisible = true;

myPane.YAxis.MajorGrid.IsVisible = true;

myPane.XAxis.MajorGrid.Color = Color.LightGray;

myPane.YAxis.MajorGrid.Color = Color.LightGray;

myPane.YAxis.MajorGrid.DashOff = 0;

myPane.XAxis.MajorGrid.DashOff = 0;

//添加曲線

myCurve = myPane.AddCurve("曲線圖", osc.DataBuffer, Color.Yellow, SymbolType.None);

}

　　4. 訂閱Timer控件的Tick事件

　　在Tick事件處理器中，我們只需要獲取數(shù)據(jù)，然后觸發(fā)圖形繪制事件就可以了，至于怎么繪制交給ZedGraph去處理吧，是不是很簡單。

protected void Timer1_Tick(object sender, EventArgs e)

{

//獲取并填充數(shù)據(jù)

DataSource.Instance.GetData();

//觸發(fā)圖形繪制事件

this.ZedGraphWeb1.AxisChanged = true;

}

　　5. 驗(yàn)證

　　現(xiàn)在試著運(yùn)行一下你的ZedGraphDemo網(wǎng)站應(yīng)用程序，它看起來應(yīng)該與圖4類似：

　　圖4 第一次嘗試后的運(yùn)行效果

　　使用Web服務(wù)控制數(shù)據(jù)源

　　首先添加一個Web Service條目，打開圖5所示的對話框，選中Web Service模板，命名為WebControlService。

　　圖5 添加一個Web Service條目

　　在WebControlService.cs文件中添加兩個方法，分別獲取和設(shè)置采樣點(diǎn)數(shù)。為了能夠操作DataSource，需要引入名字控件DataModal。為了能夠在客戶端使用JavaScript腳本調(diào)用我們的Web服務(wù)，需要為WebControlService類應(yīng)用[ScriptService]特性，還需要添加using System.Web.Script.Services;。另外我們還需要在ScriptManager中注冊我們的Web服務(wù)，最終的ScriptManager如下所示：

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Services>

<asp:ServiceReference Path="WebControlService.asmx" />

</Services>

</asp:ScriptManager>

[WebMethod]

[ScriptMethod]

public void SetPoints(string points)

{

DataSource.Instance.DataPoints = Convert.ToUInt32(points);

}

[WebMethod]

[ScriptMethod]

public UInt32 GetPoints()

{

return DataSource.Instance.DataPoints;

}

　　在Defualt.aspx文件中添加一個標(biāo)簽和文本框，供用戶輸入采樣點(diǎn)設(shè)置值。

<asp:Literal ID="Literal1" runat="server" Text="采樣點(diǎn)數(shù)"></asp:Literal><br />

<input id=";txtPoints" type="text" onchange="ontxtPointsValueChange()" />

　　為了響應(yīng)用戶的輸入，我們需要添加一個JavaScript腳本文件Script.js，并在Default.aspx中引入它(在<head />節(jié)中添加如下代碼即可

　　<script type="text/javascript" src="Script.js"></script>)。

　　再次運(yùn)行ZedGraphDemo應(yīng)用程序，這次它看起來應(yīng)該是圖6這個樣子了：

　　圖6 最終運(yùn)行效果

　　此時，你可以在文本框中輸入采樣點(diǎn)數(shù)，例如120(沒有添加輸入校驗(yàn)功能，因此不要自找麻煩喲)，然后在別處單擊一下鼠標(biāo)讓文本框失去輸入焦點(diǎn)，此時再觀察一下圖形，它的采樣點(diǎn)數(shù)是不是變成了120？

　　當(dāng)然，這只是一個很簡單的演示程序，在此基礎(chǔ)上，你可以為它添加其它的有趣的功能。我在這里只是解釋了ZedGraph中幾個比較重要的曲線配置參數(shù)，當(dāng)然你也可以利用ZedGraph其它數(shù)以百計(jì)的屬性讓圖形顯示的更加漂亮美觀。

　　后記

　　在這里我們使用UpdatePanel控件來獲得部分刷新的效果，但是如果想在實(shí)際項(xiàng)目中使用它必須首先對其進(jìn)行評估后再決定是否使用。利用JavaScript腳本調(diào)用Web服務(wù)在大多數(shù)情況下應(yīng)該能夠作為UpdatePanel的另一個選擇。