用了一段時間的OWC來製圖,它是還不錯用,但現在發現了另一個選擇,而且也是免費的元件(目前是),可用在Web Form及Windows Form上.
使用難度並不難,以下是用Win Form的方式來說明.
第一步
當然要先去下載這個物件. 由於資料來源是CodeProject,所以就不自己再放另一個下載點,請至CodeProject下載. 視各別需要,否則只要下載dll only的即可.
第二步
把下載回來的壓縮檔,解壓縮至你想要存放的目錄.
第三步
使用VS2005開啟一個新的Windows Application(也可用VS2003,只是此範例用VS2005).
第四步
在工具箱的地方,按右鍵,選擇項目,在.NET Framework元件的頁籤,按下瀏覽,到剛剛解壓縮的那個目錄下.
於解壓縮的目錄下,找一下ZedGraph.dll,這個有兩個版本.
4.5+是適用於.Net Framework 1.1
5.0+是適用於.Net Framework 2.0
註:ZedGraph.Web.dll就是適用於WebForm
第五步
加入後,在工具箱就會看到ZedGraphControl,就可以開始進行介面的設計,於介面上,放兩個RadioButton,各自命名為rdb_Bar及rdb_Line,rdb_Bar為長條圖,rdb_Line為折線圖. 再加入一個ZedGraphControl.如下圖:
第六步
到此,已完成一半的工作了,接下來,加一個Form1_Load的事件,及一個RadioButton_CheckedChanged的事件,此事件由兩個RadioButton共用.
在這兩個事件內,程式碼如下:
private void Form1_Load(object sender, EventArgs e)
{
zedGraphControl1.GraphPane.Title.Text = "銷售統計"; //圖表的表頭
zedGraphControl1.GraphPane.XAxis.Title.Text = "時間"; //X軸的名稱
zedGraphControl1.GraphPane.YAxis.Title.Text = "金額"; //Y軸的名稱
ShowChart();
}
private void rdb_CheckedChanged(object sender, EventArgs e)
{
ShowChart();
}
而ShowChar()就是顯示統計圖的主要地方.
private void ShowChart()
{
GraphPane myPane = zedGraphControl1.GraphPane;
zedGraphControl1.GraphPane.CurveList.Clear();//把舊的圖資清掉
string[] xTitle ={ "2007/8", "2007/9", "2007/10", "2007/11" }; //X軸的刻度資料
double[] PC ={ 5000000, 5800000, 6300000, 7000000 };//PC商品的金額
double[] NB ={ 5100000, 5400000, 6900000, 7500000 };//NB商品的金額
BarItem myBar;
LineItem myCurve;
#region 長條圖
if (rdb_Bar.Checked)
{
myBar = myPane.AddBar("PC銷售額", null, PC, Color.Red);
myBar.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red);
myBar = myPane.AddBar("NB銷售額", null, NB, Color.Purple);
myBar.Bar.Fill = new Fill(Color.Purple, Color.White, Color.Purple);
}
#endregion
#region 折線圖
if (rdb_Line.Checked)
{
myCurve = myPane.AddCurve("PC銷售額", null, PC, Color.Red);
myCurve.Line.Fill = new Fill(Color.Red, Color.White, Color.Red);
myCurve = myPane.AddCurve("NB銷售額", null, NB, Color.Purple);
myCurve.Line.Fill = new Fill(Color.Purple, Color.White, Color.Purple);
}
#endregion
myPane.XAxis.Scale.TextLabels = xTitle;
myPane.XAxis.Type = AxisType.Text;
myPane.Chart.Fill = new Fill(Color.White, Color.FromArgb(255, 255, 166), 90F);
myPane.Fill = new Fill(Color.FromArgb(250, 250, 255));
zedGraphControl1.AxisChange();
zedGraphControl1.Refresh();
}
到此,程式就完成了,執行後的畫面就像下面的圖示
長條圖:
折線圖
在圖上按下右鍵,也有一些不錯的內建功能
這只是一個簡單的範例,這元件的功能還很多,在CodeProject的圖例就不少了.有興趣的人,可以玩看看.
使用DataSource範例的原始碼 : C#下載

您好
請問要使用在VS2005 WEB可有類似您所舉的範例
我使用VB
原廠所提供實在是看不懂(英文差)
以上敬請協助謝謝
kkklynn@yahoo.com.tw
可否有消息通知我
謝謝您
[版主回覆01/29/2008 08:57:22]我在原文章的最底下加了VB的sample Code,這個是來自於CodeProject的,看了一下,應該很容易懂,所以我就沒有再加以修改,如果仍有問題,那麼再看是什麼問題~
您好
希望能夠透過datasource來創建圖形(我參考zedgraph的範例,翻寫如下)
我有寫(但curve及其它不懂如何處理,只有抬頭出現)
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Me.ZedGraphWeb1.Title = "銷售統計" ' //圖表的表頭
Me.ZedGraphWeb1.XAxis.Title = "時間" ' //X軸的名稱
Me.ZedGraphWeb1.YAxis.Title = "金額" ' //Y軸的名稱
Me.ZedGraphWeb1.YAxis.Scale.Max = 20
Dim z1 As Object = New ZedGraph.ZedGraphControl
Dim myPane As GraphPane = z1.GraphPane
Dim objconns As New OleDbConnection(WebConfigurationManager.ConnectionStrings("connectionstring3").ConnectionString)
Dim queryString As String = "SELECT * FROM ebook"
Dim adapter As OleDbDataAdapter = New OleDbDataAdapter(queryString, objconns)
Dim myds As DataSet = New DataSet()
myds.Tables.Add(New DataTable("udatatable"))
adapter.Fill(myds, "udatatable")
Me.ZedGraphWeb1.DataSource = myds.Tables("udatatable")
Dim dsp1 As New DataSourcePointList
dsp1.XDataMember = "xvalue"
dsp1.YDataMember = "yvalue"
Dim mycurve1 As BarItem
mycurve1 = myPane.AddBar("mycurve1", dsp1, Color.DarkViolet)
'mycurve1 = myPane.AddCurve("mycurve1", dspl, Color.Blue, SymbolType.Circle)
z1.AxisChange()
End Sub
可否請您指導
謝謝
[版主回覆01/29/2008 17:44:24]這部份可以改一下
Me.ZedGraphWeb1.DataSource = myds.Tables("udatatable") <==拿掉
Dim dsp1 As New DataSourcePointList
dsp1.DataSource = myds.Tables("udatatable") <===加上這行
dsp1.XDataMember = "xvalue"
dsp1.YDataMember = "yvalue"
您好
我把它加上去同時最後再加上 z1.AxisChange()
還是沒有圖形出來
式子裏的data一直沒針對 ZedGraphWeb1物件填入資料
好像只有將資料填入DataSourcePointList
而PointList並沒有再轉入ZedGraphWeb1
應該是欠了這段,我想
只是我沒有辦法理解!
敬請協助
謝謝
[版主回覆01/30/2008 14:32:34]我大概用了C#寫了一個Win Form的程式. 這是使用DataSource的方式.
private void Form1_Load(object sender, EventArgs e)
{
try
{
ZedGraph.GraphPane gp = zedGraphControl1.GraphPane;
gp.Title.Text = "銷售統計"; //圖表的表頭
gp.XAxis.Title.Text = "時間"; //X軸的名稱
gp.YAxis.Title.Text = "金額"; //Y軸的名稱
DataSet ds = GetDataSet();
ZedGraph.DataSourcePointList dsp = new ZedGraph.DataSourcePointList();
dsp.DataSource = ds.Tables["book"];
dsp.XDataMember = "Monthly";
dsp.YDataMember = "Money";
ZedGraph.BarItem bi = gp.AddBar("Test", dsp, System.Drawing.Color.Red);
gp.AxisChange();
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private DataSet GetDataSet()
{
DataTable dt = new DataTable("book");
dt.Columns.Add("Monthly");
dt.Columns.Add("Money");
for (int i = 1; i < 13; i++)
{
DataRow dr = dt.NewRow();
dr["Monthly"] = i;
dr["Money"] = i * 100;
dt.Rows.Add(dr);
}
DataSet ds = new DataSet();
ds.Tables.Add(dt);
return ds;
}
以上的Sample Code就可以依DataSet內的資料顯示.
WebForm使用DataSource部份,有幾個地方在WinForm可以用,但在WebForm卻找不到.
這點我有跟作者請教了,至於何時會有答案,那就不確定了~
[版主回覆01/30/2008 16:28:57]作者是還沒有回覆,不過有找到做法了,Web使用DataSource的C#範例已經放上去了~
dear all:
以下是我測試用DataSource的方法,但會出現「指定的轉換無效」的錯誤訊息
Dim i As Integer
ZedGraphControl1.GraphPane.Title.Text = "銷售統計"
ZedGraphControl1.GraphPane.XAxis.Title.Text = "時間"
ZedGraphControl1.GraphPane.YAxis.Title.Text = "金額"
Dim dt As DataTable = New DataTable("book")
dt.Columns.Add("Monthly")
dt.Columns.Add("Money")
Dim dr As DataRow
For i = 1 To 13
dr = dt.NewRow
dr("Monthly") = i
dr("Money") = i * 100
dt.Rows.Add(dr)
Next
Dim ds As DataSet = New DataSet()
ds.Tables.Add(dt)
Dim dsp As New ZedGraph.DataSourcePointList()
dsp.DataSource = ds.Tables("book")<<-------------出現錯誤訊息
dsp.XDataMember = "Monthly"
dsp.YDataMember = "Money"
Dim mycurve1 As ZedGraph.GraphPane
Dim BI As ZedGraph.BarItem
BI = mycurve1.AddBar("mycurve1", dsp, Color.DarkViolet)
ZedGraphControl1.GraphPane.AxisChange()
為什麼呢?是我沒有宣告到什麼嗎?有人也有出現過此問題嗎?請問如何解決的呢?
[版主回覆06/04/2008 08:50:43]是否有Source Code可供我直接開啟來看呢,因為在C#版是OK的,VB我是沒試過,不太確定你所用的ZedGraphControl版本是什麼時候的,這個要看過以後才知道~
請較一下 我想作的BARCHART 是這種樣子的 也就是Bar 的寬度(width)能夠佔滿整個繪圖元件(圖一是放大結果)
但是我的原始程式結果是降的(圖二)
(圖一) (圖二)
我的原始碼如下 大大請問要改哪裡 哪個方法或屬性可以達到這個效果 先謝啦~~
Private Sub CreateGraph(ByVal zgc As ZedGraphControl)
zgc.GraphPane.CurveList.Clear()
Dim myPane As GraphPane = zgc.GraphPane
zgc.Refresh()
' Set the title and axis labels
myPane.Title.Text = "Stacked Bars with Value Labels Inside Each Bar"
myPane.XAxis.Title.Text = "Position Number"
myPane.YAxis.Title.Text = "Some Random Thing"
Dim list1 As New PointPairList()
Dim list2 As New PointPairList()
Dim list3 As New PointPairList()
Dim list4 As New PointPairList()
Dim list5 As New PointPairList()
Dim i As Integer, rand As New Random()
Dim x As Double, y1 As Double, y2 As Double, y3 As Double, y4 As Double, y5 As Double
'For i = 1 To 2
y1 = Val(TextBox1.Text)
y2 = Val(TextBox3.Text)
y3 = Val(TextBox5.Text)
y4 = Val(TextBox7.Text)
y5 = Val(TextBox9.Text)
list1.Add(1, y1)
list2.Add(1, y2)
list3.Add(1, y3)
list4.Add(1, y4)
list5.Add(1, y5)
Dim bar1 As BarItem = myPane.AddBar("Bar 1", list1, Color.Red)
bar1.Bar.Fill = New Fill(Color.Red, Color.White, Color.Red, 0)
Dim bar2 As BarItem = myPane.AddBar("Bar 2", list2, Color.Blue)
bar2.Bar.Fill = New Fill(Color.Blue, Color.White, Color.Blue, 0)
Dim bar3 As BarItem = myPane.AddBar("Bar 3", list3, Color.Green)
bar3.Bar.Fill = New Fill(Color.Green, Color.White, Color.Green, 0)
Dim bar4 As BarItem = myPane.AddBar("Bar 4", list4, Color.Orange)
bar4.Bar.Fill = New Fill(Color.Orange, Color.White, Color.Orange, 0)
Dim bar5 As BarItem = myPane.AddBar("Bar 5", list5, Color.Gold)
bar5.Bar.Fill = New Fill(Color.Gold, Color.White, Color.Gold, 0)
myPane.BarSettings.Base = BarBase.X
myPane.BarSettings.Type = BarType.Stack
myPane.BarSettings.ClusterScaleWidthAuto = False
myPane.BarSettings.ClusterScaleWidth = 1
myPane.Chart.Fill = New Fill(Color.White, _
Color.FromArgb(255, 255, 166), 45.0F)
zgc.AxisChange()
BarItem.CreateBarLabels(myPane, True, "f0")
zgc.Invalidate()
[版主回覆09/05/2008 20:33:02]什麼圖都看不到咧.....我想請問一下:
就是我想把x的刻度改成資料庫讀出來的刻度
我利用迴圈去跑label跑不出來
我先把資料庫的資料在ListBox顯現
再去塞值到label裡面
只是要塞到label的值是日期
我有去作者那找 他只寫到日 我是要顯示到秒數
兩個ListBox都有資料顯示出來了
就是塞不進去label
While dr.Read = True
ListBox_water.Items.Add(dr("water").ToString)
ListBox2_water.Items.Add(dr("w_time").ToString)
End While
cn.Close()
Dim j As Integer = (ListBox_water.Items.Count / 90)
Dim j2 As Integer = (ListBox2_water.Items.Count / 90)
Dim labels(x1) As String
For x1 = 0 To 89
labels(x1) = ListBox2_water.Items.Item(x1)
y1 = ListBox_water.Items.Item(x1 * j)
list1.Add(x1, y1)
Next
myPane1.XAxis.Type = AxisType.Text
myPane1.XAxis.Scale.TextLabels = labels
Dim myCurve1 As ZedGraph.LineItem = myPane1.AddCurve("", list1, Color.Blue, SymbolType.Circle)
zgc.AxisChange() [版主回覆10/21/2008 22:15:48]請問這程式跑完後,統計圖是否有正常顯示?
在For Next的label迴圈跑完後,設定中斷點,是否label內有值?
我知道我錯哪了 沒有顯示x軸當然出不來...QQ
[版主回覆10/27/2008 01:10:14]抱歉 我搞笑了= ="
很好用的一個元件....
恭喜你自己找到答案囉^^
請問一下大大唷!!!
就是我想要用一個Button先讀取我要的檔案
之後再顯示在 ZedGraph;
不知道我在button那邊該怎樣寫
[版主回覆06/13/2009 02:11:37]如果上面餵資料顯示圖表的Sample看的懂,會使用,那只要把你抓到的資料餵進去就好.我也不知道你的button裡要寫什麼,不知道你的資料來源是什麼.
我只知道你在button click事件裡,先去抓出你要顯示圖表的資料,再把資料餵進去顯示即可.
請問大大,問個笨問題
寫了一個程式
放在Form1_Load 可以顯示
但如果放在button1_Cluck就不行
不知錯在哪,可否請您指導 謝謝
Dim myPane As GraphPane = z1.GraphPane
myPane.Title.Text = "測試中"
myPane.XAxis.Title.Text = "時間"
myPane.YAxis.Title.Text = "溫度"
Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=97.mdb"
Dim dbConn As OleDbConnection = New OleDbConnection(sConnection)
dbConn.Open()
Dim sql As String = "select * from cold"
Dim dbcmd As OleDbCommand = New OleDbCommand(sql, dbConn)
Dim dbadapter As OleDbDataAdapter = New OleDbDataAdapter(dbcmd)
Dim ds As System.Data.DataSet = New System.Data.DataSet()
dbadapter.Fill(ds)
ds.Tables("table").TableName = "97"
dbConn.Close()
Dim dsp1 As New DataSourcePointList
dsp1.DataSource = ds.Tables("97")
dsp1.XDataMember = "時間"
dsp1.YDataMember = "星期一"
Dim mycurve1 As LineItem
[版主回覆07/27/2009 20:42:16]所謂的不行,是有跳出錯誤訊息,還沒反應?mycurve1 = myPane.AddCurve("溫度", dsp1, Color.Blue, SymbolType.Circle)
myPane.Fill = New Fill(Color.White, Color.FromArgb(220, 220, 255), 45.0F)
myPane.Chart.Fill = New Fill(Color.White, Color.LightGoldenrodYellow, 45.0F)
z1.AxisChange()
有試著用Debug Mode去看程式有沒有進到Button Click Event?
button1_Cluck
確定事件名稱沒錯? 你按下Button會觸發這個Click事件進到這段程式?
謝謝大大指導
不好意思,是click我打錯了
我要的是當按下button才把圖show
後來我發現,執行時沒顯示,但如果把它最小化,再按它就出現
不知原因再哪 [版主回覆07/28/2009 20:08:16]zedGraphControl1.AxisChange();
zedGraphControl1.Refresh(); <===你程式少這行吧
感謝大大的指導!!
問題解決了,感恩您 !!
請問一下,您的網誌上按右鍵是顯示中文,是有安裝什麼套件嗎? [版主回覆08/19/2009 20:31:50]沒有咧,我什麼都沒裝~
大大您好, 不知您是否有跟我相同的問題, 無論在X軸或Y軸, 如果我自訂MajorSetp 小於1 時, 軸的顯示就怪怪的~~ X軸 ----------------------------------------------------------------------------------- 0 0 0 1 1 1 1 1 2 2 2 2 2 3 3 3 3 3 4 4 4 Y軸也有一樣的狀況>< 這蟲該怎麼抓???