用ZedGraph畫統計圖

Update: 沒想到這篇居然變成Google搜尋ZedGraph第一篇中文網頁，不過還是誠心建議用Windows上的C#先看一下免費的圖表元件：Microsoft Chart Controls，除非你非得用.Net 2.0(Windows 2000)或是用Mono。 BTW，我並不想成為微軟MVP，所以本Blog並不是有問必答的喲^_^

才剛貼完上一篇，馬上就有位朋友丟過來一個LGPL Open Source元件的網址：ZedGraph。

參考：A flexible charting library for .NET




基本上，照著Use RenderMode.RawImage in a web page，應該可以做出來，只要注意把ZedGraph.dll和ZedGraph.Web.dll都複製到bin下即可。我是偷懶直接下載zedgraph_web_sample_v5.1.2.zip，用檔案系統網站開啟，再把那2個dll丟到bin下測試。



範例裏有三個目錄，我們只關注ImageTagCS和RawModeCS。原來以為ImageTagCS做成WebControl，只要一個檔案即時render比較好，但我發現錯了：會不斷產生暫存影像檔。
所以比較好的做法與ProEssentials一樣，必須用另一支aspx產生影像，也就是RawModeCS裏的做法。

從頭來做一次好了，先開一個新的Asp.Net檔案系統網站，再開bin目錄，將ZedGraph.dll和ZedGraph.Web.dll都複製到bin下。

接著加入一個新WebForm，叫zedgraph.aspx


在Default.aspx裏拉進一個button和一個Image物件，在button上double click，在form標籤內應該是

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="查詢" />
<asp:Image ID="Image1" runat="server" ImageUrl="zedgraph.aspx" />

在Default.aspx.cs裏

protected void Button1_Click(object sender, EventArgs e)
{
PointPairList list1 = new PointPairList();
PointPairList list2 = new PointPairList();
PointPairList list3 = new PointPairList();
Random rand = new Random();

for ( double x=0; x<5; x+=1.0 )
{
double y = rand.NextDouble() * 1000;
double y2 = rand.NextDouble() * 1000;
double y3 = rand.NextDouble() * 1000;
list.Add( x, y );
list2.Add( x, y2 );
list3.Add( x, y3 );
}
Session["list1"] = list1;
Session["list2"] = list2;
Session["list3"] = list3;
//為避免cache，若使用AJAX一定要加
Image1.ImageUrl = "zedgraph.aspx?xxx="+DateTime.Now.Millisecond;
}

打開zedgraph.aspx，刪除原有內容，輸入

<%@ Page Language="c#" Inherits="ZG1.zedgraph" CodeFile="zedgraph.aspx.cs" %>
<%@ Register TagPrefix="zgw" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %>
<zgw:zedgraphweb id="ZedGraphWeb1" runat="server" width="800" height="450" rendermode="RawImage" onrendergraph="OnRenderGraph"></zgw:zedgraphweb>

在zedgraph.aspx.cs裏加入

protected void OnRenderGraph(ZedGraphWeb zgw, Graphics g, MasterPane masterPane)
{
// Get the GraphPane so we can work with it
GraphPane myPane = masterPane[0];
myPane.Title.Text = "電腦統計圖";
myPane.XAxis.Title.Text = "部門";
myPane.YAxis.Title.Text = "台數";
// 這裏可視情況改成由DataTable讀入資料，
// 將DataTable從前一頁利用Session傳入
PointPairList list1 = (PointPairList)Session["list1"];
PointPairList list2 = (PointPairList)Session["list2"];
PointPairList list3 = (PointPairList)Session["list3"];

BarItem myCurve = myPane.AddBar("桌機", list1, Color.Blue);
myCurve.Bar.Fill = new Fill(Color.Blue, Color.White, Color.Blue);
BarItem myCurve2 = myPane.AddBar("筆電", list2, Color.Red);
myCurve2.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red);
BarItem myCurve3 = myPane.AddBar("印表機", list3, Color.Green);
myCurve3.Bar.Fill = new Fill(Color.Green, Color.White, Color.Green);

myPane.XAxis.MajorTic.IsBetweenLabels = true;
string[] labels = { "行政部", "會計部", "資訊部", "業務部", "研發部" };
myPane.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.LightGoldenrodYellow, 45.0f);

masterPane.AxisChange(g);
//產生每個Bar上的數量(Label)，原範例沒有喲
BarItem.CreateBarLabels(myPane, false, "f0");
}

再執行 Default.aspx，執行結果：


重點在於把值利用Session傳入，以及zedgraph的事件


如果像鳥毅一樣運氣太好，遇到browser cache圖怎麼辦？尤其是放在UpdatePanel內更容易發生，最簡單的方法就是在每次查詢(button click)事件處理內加上一條：

Image1.ImageUrl = "zedgraph.aspx?xxx="+DateTime.Now.Millisecond;

這樣應該就沒問題了。