使用ZedGraph畫曲線柱狀圖

使用ZedGraph畫曲線柱狀圖

   剛接觸到ZedGraph，到網上搜素到的方法基本上都是使用臨時文件來存儲圖片，而後再顯示，可是臨時圖片太多的話會佔用大量的空間。很不划算。最後看到有人說把RenderMode="RawImage"就能夠了 ，可是會出現亂碼。如何解決呢？下面是個人方法。

    新建一個目錄，命名爲bin，把文件ZedGraph.Web.dll，ZedGraph.dll拷到bin目錄下面。

創建文件tuppian.aspx。其內容爲：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tuppian.aspx.cs" Inherits="tuppian" %>

<%@ Register assembly="ZedGraph.Web" namespace="ZedGraph.Web" tagprefix="cc1" %>

<%--

特別注意了：本頁面不要有HTML代碼，和asp.net代碼。否則會出現亂碼,RenderMode="RawImage"必定要設置RawImage，否則會報錯。

--%>

<cc1:ZedGraphWeb ID="ZedGraphWeb1" runat="server" RenderMode="RawImage">

</cc1:ZedGraphWeb>

tuppian.aspx.cs爲：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using ZedGraph;
using ZedGraph.Web;

public partial class tuppian : System.Web.UI.Page
{
    DarwGrapClass dg = new DarwGrapClass();
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected override void OnInit(EventArgs e)
    {
        InitializeComponent();
        base.OnInit(e);
    }

    private void InitializeComponent()
    {
        string id = Request.QueryString["id"];
        switch (id)
        {
            case "1":
                DrawLine();
                break;
            case "2":
                DrawPie();
                break;
            default:
                DrawBar();
                break;
        }
    }

    private void DrawBar()
    {
        dg.Type = AnalyticsType.Bar;
        dg.Title = "用戶訪問柱狀圖";
        dg.XAxisTitle = "月份";
        dg.YAxisTitle = "用戶訪問數量";
        Random rand = new Random();
        string[] aa = { "企業1", "企業2", "企業3" };
        for (int i = 0; i < 2; i++)
        {
            ZedGraph.PointPairList ppl = new ZedGraph.PointPairList();
            for (int j = 0; j < 12; j++)
            {
                double x = rand.Next(10);
                double y = rand.NextDouble() * 100;
                ppl.Add(x, y);
                //dg.NameList.Add((j + 1).ToString() + "月");
                //ppl.Add(j+1,j+1);以此遞增
                //dg.NameList.Add("第" + j.ToString() + "月份");
            }
            dg.DataSource.Add(ppl);
            dg.LabelList.Add("企業" + i.ToString());
            //dg.NameList.Add((i + 1).ToString() + "月");
        }
        for (int k = 0; k < 12; k++)
        {
            dg.NameList.Add((k + 1).ToString() + "月");
        }
        dg.y_step = 5;
        dg.DarwGrap(ZedGraphWeb1);
    }

    private void DrawPie()
    {
        dg.Type = AnalyticsType.Pie;
        dg.Title = "用戶訪問餅圖";
        Random rand = new Random();
        for (int i = 0; i < 3; i++)
        {
            dg.ScaleData.Add((i + 2) * rand.Next(100));
            dg.NameList.Add("企業：" + i.ToString());//各個部分所表明的含義
        }
        dg.DarwGrap(ZedGraphWeb1);
    }
    private void DrawLine()
    {
        dg.Type = AnalyticsType.Line;
        dg.Title = "用戶訪問曲線圖";
        dg.XAxisTitle = "月份";
        dg.YAxisTitle = "用戶訪問數量";
        Random rand = new Random();
        for (int i = 0; i < 2; i++)
        {
            ZedGraph.PointPairList ppl = new ZedGraph.PointPairList();
            //數據源添加
            for (double x = 0; x < 12; x += 1.0)
            {
                double y = rand.NextDouble() * 100;
                ppl.Add(x, y);
            }
            //從數據庫中取得
            //for (int i = 0; i < this.dt.Rows.Count; i++)  //這個循環主要是取到裏面的說明文字，用了一個數組的方法
            //{
            //    ppl.Add(i,this.dt.Rows[i].Cells[1].Text.Trim());
            //}
            //dg.NameList.Add("第" + i.ToString() + "月份");
            dg.DataSource.Add(ppl);
            dg.NameList.Add("企業：" + i.ToString());
        }
        //改變x組的顯示字符，固然也能夠綁定數據庫，從數據庫中取得。
        for (int k = 0; k < 12; k++)
        {
            dg.LabelList.Add((k + 1).ToString() + "月");
        }
        //for (int i = 0; i < this.dt.Rows.Count; i++)  //這個循環主要是取到裏面的說明文字，用了一個數組的方法
        //{
        //    dg.LabelList.Add(this.dt.Rows[i].Cells[0].Text.Trim());
        //}
        dg.DarwGrap(ZedGraphWeb1);
}
}
新建一個類DarwGrapClass.cs，放在App_Code目錄下面。其內容爲：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;
using ZedGraph;
using ZedGraph.Web;
using System.Collections.Generic;

public enum AnalyticsType
{
    Line, //折線圖
    Line2,//帶陰影區域的折線圖
    Curve,//帶星的折線圖
    Curve2,//帶陰影區域的星行折線圖
    Bar, //柱狀圖
    Graph,
    Pie //餅圖
};
public class DarwGrapClass
{
    public DarwGrapClass()
    {
        //
        //TODO: 在此處添加構造函數邏輯
        //
    }
    #region Private Attribute
    /**/
    ///  
    /// 默認顏色種類
    ///  
    private List<Color> defaultColors = new List<Color>();
    /**/
    ///  
    /// 統計的個數
    ///  
    private int Count;
    #endregion

    //Public Property;
    #region Public Property
    /**/
    ///  
    /// 統計圖的名稱
    ///  
    public string Title;
    /**/
    ///  
    /// 橫軸的名稱（餅圖不須要）
    ///  
    public string XAxisTitle;
    /**/
    ///  
    /// 縱軸的名稱（餅圖不須要）
    ///  
    public string YAxisTitle;
    /**/
    ///  
    /// 顯示的曲線類型：Line,Bar,Pie
    ///  
    public AnalyticsType Type;
    /**/
    ///  
    /// 折線圖和柱狀圖的數據源
    ///  
    public List<PointPairList> DataSource = new List<PointPairList>();
    /**/
    ///  
    /// 餅圖的數據源
    ///  
    public List<double> ScaleData = new List<double>();
    /**/
    ///  
    /// 各段數據的顏色
    ///  
    public List<Color> Colors = new List<Color>();
    /**/
    ///  
    /// 各段數據的名稱
    ///  
    public List<string> NameList = new List<string>();
    /**/
    ///  
    /// 用於柱狀圖，每一個圓柱體表示的含義
    ///  
    public List<string> LabelList = new List<string>();
    public double y_step;
    public double x_step;
    #endregion
    public void DarwGrap(ZedGraphWeb ZedGraph)
    {
        ZedGraph.RenderGraph += new ZedGraph.Web.ZedGraphWebControlEventHandler(zedGraphControl_RenderGraph);

    }

    private void InitDefaultColors()
    {
        defaultColors.Add(Color.Red);
        defaultColors.Add(Color.Green);
        defaultColors.Add(Color.Blue);
        defaultColors.Add(Color.Yellow);
        defaultColors.Add(Color.YellowGreen);
        defaultColors.Add(Color.Brown);
        defaultColors.Add(Color.Aqua);
        defaultColors.Add(Color.Cyan);
        defaultColors.Add(Color.DarkSeaGreen);
        defaultColors.Add(Color.Indigo);
    }
    /**/
    ///  
    /// 若是屬性爲空則初始化屬性數據
    ///  
    private void InitProperty()
    {
        InitDefaultColors();
        if (string.IsNullOrEmpty(Title))
        {
            Title = "未命名統計圖";
        }
        if (string.IsNullOrEmpty(XAxisTitle))
        {
            XAxisTitle = "橫軸";
        }
        if (string.IsNullOrEmpty(YAxisTitle))
        {
            YAxisTitle = "縱軸";
        }
        if (Type == AnalyticsType.Pie)
        {
            Count = ScaleData.Count;
        }
        else
        {
            Count = DataSource.Count;
        }
        if (Colors.Count == 0 || Colors.Count != Count)
        {
            Random r = new Random();
            int tempIndex = 0;
            List<int> tempIndexList = new List<int>();
            for (int i = 0; i < Count; i++)
            {
                tempIndex = r.Next(defaultColors.Count);
                if (tempIndexList.Contains(tempIndex))
                {
                    i--;
                }
                else
                {
                    tempIndexList.Add(tempIndex);
                    Colors.Add(defaultColors[tempIndex]);
                }
            }
        }
        if (NameList.Count == 0)
        {
            if (Type == AnalyticsType.Bar)
            {
                for (int i = 1; i < DataSource[0].Count + 1; i++)
                {
                    NameList.Add("第" + i.ToString() + "組");
                }
            }
            else
            {
                for (int i = 1; i < Count + 1; i++)
                {
                    NameList.Add("第" + i.ToString() + "組");
                }
            }
        }
        if (LabelList.Count == 0)
        {
            for (int i = 0; i < Count; i++)
            {
                LabelList.Add("含義" + i.ToString());
            }
        }
        if (x_step == 0.0)
            x_step = 5;
        if (y_step == 0.0)
            y_step = 5;

    }
    /**/
    ///  
    /// 畫圖
    ///  
    ///  
    ///  
    ///  
    private void zedGraphControl_RenderGraph(ZedGraphWeb zgw, System.Drawing.Graphics g, ZedGraph.MasterPane masterPane)
    {
        InitProperty();

        GraphPane myPane = masterPane[0];

        myPane.Title.Text = Title;
        myPane.XAxis.Title.Text = XAxisTitle;
        myPane.YAxis.Title.Text = YAxisTitle;

        //if (true)
        //{
        // DrawMessage(myPane, "yiafdhaskjhfasfksahfasdlhfaslf lasgfasglgsadi");
        // pane.AxisChange(g);
        // return;
        //}

        switch (Type)
        {
            case AnalyticsType.Line:
                DrawLine(myPane);
                break;
            case AnalyticsType.Bar:
                DrawBar(myPane);
                break;
            case AnalyticsType.Pie:
                DrawPie(myPane);
                break;
            case AnalyticsType.Line2:
                DrawLine2(myPane);
                break;
            case AnalyticsType.Curve:
                DrawCurve(myPane);
                break;
            case AnalyticsType.Curve2:
                DrawCurve2(myPane);
                break;
            default:
                break;
        }
        masterPane.AxisChange(g);
    }

    #region Draw
    /**/
    ///  
    /// 畫折線圖
    ///  
    ///  
    private void DrawLine(GraphPane graphPane)
    {
        for (int i = 0; i < Count; i++)
        {
            graphPane.AddCurve(NameList[i], DataSource[i], Colors[i], SymbolType.None);
            string[] labels = LabelList.ToArray();
            graphPane.XAxis.Scale.TextLabels = labels;
            graphPane.XAxis.Type = AxisType.Text;
            graphPane.Chart.Fill = new Fill(Color.White, Color.FromArgb(255, 255, 166), 90F );
            graphPane.Fill = new Fill(Color.FromArgb(250, 250, 255));
            graphPane.YAxis.Scale.MajorStep = y_step;
        }
    }
    /**/
    ///  
    /// 畫折線圖,帶陰影區域
    ///  
    ///  
    private void DrawLine2(GraphPane graphPane)
    {
        for (int i = 0; i < Count; i++)
        {
            graphPane.AddCurve(NameList[i], DataSource[i], Colors[i], SymbolType.None).Line.Fill = new Fill(Color.White, Colors[i], 90F );
            string[] labels = LabelList.ToArray();
            graphPane.XAxis.Scale.TextLabels = labels;
            graphPane.XAxis.Type = AxisType.Text;
            graphPane.Chart.Fill = new Fill(Color.White, Color.FromArgb(255, 255, 166), 90F );
            graphPane.Fill = new Fill(Color.FromArgb(250, 250, 255));
            graphPane.YAxis.Scale.MajorStep = y_step;
        }
    }
    /**/
    ///  
    /// 畫星行折線圖
    ///  
    ///  
    private void DrawCurve(GraphPane graphPane)
    {
        for (int i = 0; i < Count; i++)
        {
            graphPane.AddCurve(NameList[i], DataSource[i], Colors[i], SymbolType.Star);
            string[] labels = LabelList.ToArray();
            graphPane.XAxis.Scale.TextLabels = labels;
            graphPane.XAxis.Type = AxisType.Text;
            graphPane.Chart.Fill = new Fill(Color.White, Color.FromArgb(255, 255, 166), 90F );
            graphPane.Fill = new Fill(Color.FromArgb(250, 250, 255));
            graphPane.YAxis.Scale.MajorStep = y_step;
        }
    }
    /**/
    ///  
    /// 畫星行折線圖,帶陰影區域
    ///  
    ///  
    private void DrawCurve2(GraphPane graphPane)
    {
        for (int i = 0; i < Count; i++)
        {
            graphPane.AddCurve(NameList[i], DataSource[i], Colors[i], SymbolType.Star).Line.Fill = new Fill(Color.White, Colors[i], 90F );
            string[] labels = LabelList.ToArray();
            graphPane.XAxis.Scale.TextLabels = labels;
            graphPane.XAxis.Type = AxisType.Text;
            graphPane.Chart.Fill = new Fill(Color.White, Color.FromArgb(255, 255, 166), 90F );
            graphPane.Fill = new Fill(Color.FromArgb(250, 250, 255));
            graphPane.YAxis.Scale.MajorStep = y_step;
        }
    }

    /**/
    ///  
    /// 畫柱狀圖
    ///  
    ///  
    private void DrawBar(GraphPane graphPane)
    {
        for (int i = 0; i < Count; i++)
        {
            graphPane.AddBar(LabelList[i], DataSource[i], Colors[i]).Bar.Fill = new Fill(Colors[i], Color.White, Colors[i]);
            //.Line.Fill = new Fill(Color.White, Color.Red, 45F );
            //.Line.Fill = new Fill(Color.White, Color.Blue, 45F );
        }
        graphPane.XAxis.MajorTic.IsBetweenLabels = true;
        string[] labels = NameList.ToArray();
        graphPane.XAxis.Scale.TextLabels = labels;
        graphPane.XAxis.Type = AxisType.Text;
        graphPane.Chart.Fill = new Fill(Color.White, Color.FromArgb(255, 255, 166), 90F );
        //graphPane.Fill = new Fill(Color.FromArgb(250, 250, 255));
        graphPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f );
        //graphPane.Chart.Fill = new Fill(Color.White, Color.LightGoldenrodYellow, 45.0f );
        graphPane.YAxis.Scale.MajorStep = y_step;
        //graphPane.BaseDimension =8;


    }
    /**/
    ///  
    /// 畫餅圖
    ///  
    ///  
    private void DrawPie(GraphPane graphPane)
    {
        graphPane.Fill = new Fill(Color.White, Color.Silver, 45.0f );

        graphPane.Legend.Position = LegendPos.Float;
        graphPane.Legend.Location = new Location( 0.95f , 0.15f , CoordType.PaneFraction, AlignH.Right, AlignV.Top);
        graphPane.Legend.FontSpec.Size = 20f ;
        graphPane.Legend.IsHStack = false;
        for (int i = 0; i < Count; i++)
        {
            graphPane.AddPieSlice(ScaleData[i], Colors[i], Color.White, 45f , 0, NameList[i]);
        }
    }
    /**/
    ///  
    /// 若是系統出錯，顯示錯誤信息
    ///  
    ///  
    ///  
    private void DrawMessage(GraphPane graphPane, string message)
    {
        TextObj text = new TextObj(message, 200, 200);
        text.Text = message;
        graphPane.GraphObjList.Add(text);

    }
    #endregion
}



最後，注意當畫餅圖時，有時註釋會把圖片遮住，這時只要設置圖片長和高的比例就能夠了。曲線圖和直方圖的x組的說明文字若是太多的話，就會屏蔽掉一些，這是也只要設置長和高的比例就能夠解決問題了。