介紹

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

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

　　使用Visual Studio 2005創建一個新的網站

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

　　圖1 新建一個ASP.NET AJAX-Enabled網站

　　在Toolbox中添加ZedGraph控件

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

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

　　圖2 設計視圖

　　ZedGraph控件屬性設置

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

　　表1 利用Visual Studio屬性面板對ZedGraph控件進行設置

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

　　數據模型

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

　　在這里我們只是使用一些隨機數進行模擬。

namespace DataModal

{

public class DataSource

{

private DataSource() { dataPoints = 101; }

public static readonly DataSource Instance = new DataSource();

private Random ran = new Random();

//存儲采樣數據

public PointPairList DataBuffer = new PointPairList();

/// <summary>

/// 觸發一次采樣，并獲取采樣數據

/// </summary>

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

public void GetData()

{

double[] yData = new double[DataPoints];

//獲取采樣數據

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

{

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

}

//填充緩沖區

double[] xData = new double[DataPoints];

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

{

xData[i] = i;

}

DataBuffer = new PointPairList(xData, yData);

}

/// <summary>

/// 采樣點數

/// </summary>

private UInt32 dataPoints;

public UInt32 DataPoints

{

get { return dataPoints; }

set { dataPoints = value; }

}

}

}

　　繪制圖形

　　1. 引入名字空間

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

　　2. 添加靜態域

　　為_Default類添加兩個靜態成員，分別代表曲線和數據源對象，之所以使用靜態變量，是因為我們希望所有的客戶看到的都是同樣的數據。

static LineItem myCurve;

 static DataModal.DataSource osc = DataSource.Instance;

　　3. 訂閱ZedGraph控件RenderGraph事件

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

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

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

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

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

　　圖3 各種坐標軸控制屬性

　　表2 各個坐標軸屬性的意思

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

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

{

GraphPane myPane = pane[0];

//開始X軸刻度設置

//X軸坐標的范圍

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

myPane.XAxis.Scale.Min = 0;

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

myPane.XAxis.Scale.BaseTic = 0;

//X軸主步進值

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

//X軸讀數是否可見

myPane.XAxis.Scale.IsVisible = true;

//設置橫坐標的乘法因子，例如^1，

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

//開始Y軸坐標設置

//設置Y軸坐標的范圍

myPane.YAxis.Scale.Max = 110;

myPane.YAxis.Scale.Min = 0;

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

myPane.YAxis.Scale.BaseTic = 0;

//X軸主步進值

myPane.YAxis.Scale.MajorStep = 10;

//X軸讀數是否可見

myPane.YAxis.Scale.IsVisible = true;

//添加柵格線

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事件處理器中，我們只需要獲取數據，然后觸發圖形繪制事件就可以了，至于怎么繪制交給ZedGraph去處理吧，是不是很簡單。

protected void Timer1_Tick(object sender, EventArgs e)

{

//獲取并填充數據

DataSource.Instance.GetData();

//觸發圖形繪制事件

this.ZedGraphWeb1.AxisChanged = true;

}

　　5. 驗證

　　現在試著運行一下你的ZedGraphDemo網站應用程序，它看起來應該與圖4類似：

　　圖4 第一次嘗試后的運行效果

　　使用Web服務控制數據源

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

　　圖5 添加一個Web Service條目

　　在WebControlService.cs文件中添加兩個方法，分別獲取和設置采樣點數。為了能夠操作DataSource，需要引入名字控件DataModal。為了能夠在客戶端使用JavaScript腳本調用我們的Web服務，需要為WebControlService類應用[ScriptService]特性，還需要添加using System.Web.Script.Services;。另外我們還需要在ScriptManager中注冊我們的Web服務，最終的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文件中添加一個標簽和文本框，供用戶輸入采樣點設置值。

<asp:Literal ID="Literal1" runat="server" Text="采樣點數"></asp:Literal><br />

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

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

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

　　再次運行ZedGraphDemo應用程序，這次它看起來應該是圖6這個樣子了：

　　圖6 最終運行效果

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

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

　　后記

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