用了一段時間的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的圖例就不少了.有興趣的人,可以玩看看.


原始碼 : C#下載   VB下載


使用DataSource範例的原始碼 : C#下載

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 jeffyeh 的頭像
    jeffyeh

    jeffyeh

    jeffyeh 發表在 痞客邦 留言(14) 人氣()