WebChartControl是DevExpress控件群下的一個(gè)Web圖表控件，它使用非常的方便，生成的圖表也相當(dāng)?shù)钠痢Ｎ覀冊(cè)诒菊戮腿绾卫肳ebChartControl控件來繪制柱狀圖，線狀圖與餅狀圖做個(gè)示例。

 首先，我們需要在aspx頁面放置一個(gè)WebChartControl控件，代碼如下，為簡(jiǎn)單起見，我們不為它設(shè)置任何屬性：

<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="200px" Width="500px" >
</dxchartsui:WebChartControl >

注意需要在aspx的頭部注冊(cè)該控件：  

<%@ Register Assembly="DevExpress.XtraCharts.v9.1.Web, Version=9.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" % >
<%@ Register Assembly="DevExpress.XtraCharts.v9.1, Version=9.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts" TagPrefix="cc1" % >

而且需要添加對(duì)應(yīng)的dll的引用，這些都是引用一個(gè)第三方控件的必需工作，就不細(xì)說了。

在開始示例前，我們先為圖形創(chuàng)建數(shù)據(jù)源，我們以DataTable數(shù)據(jù)源作為示例，該DataTable只包含兩列，week列與money列，代碼如下：

public DataTable GetDataSource
{
    get
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("week", typeof(string));
        dt.Columns.Add("money", typeof(decimal));

        dt.Rows.Add("星期一", 1200);
        dt.Rows.Add("星期二", 1500);
        dt.Rows.Add("星期三", 1400);
        dt.Rows.Add("星期四", 1450);
        dt.Rows.Add("星期五", 1300);
        dt.Rows.Add("星期六", 1325);
        dt.Rows.Add("星期日", 1400);

        return dt;
    }
}

下面我們以GetDataSource為數(shù)據(jù)源，開始創(chuàng)建圖形。

1、創(chuàng)建柱形圖

protected void Page_Load(object sender, EventArgs e)
{
    Series series = new Series("金額", ViewType.Bar);
    DataTable dt = GetDataSource;
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        SeriesPoint point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["money"].ToString()));
        series.Points.Add(point);
    }
    this.WebChartControl1.Series.Add(series);
}

從上面的圖表中可以看到，上面只有"金額"一項(xiàng)數(shù)據(jù)，如果我們要再加一項(xiàng)"成本"數(shù)據(jù)來作對(duì)比，要如何實(shí)現(xiàn)呢?

首先改寫數(shù)據(jù)源，讓其包括"成本"這一項(xiàng)的數(shù)據(jù)：

public DataTable GetDataSource
{
    get
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("week", typeof(string));
        dt.Columns.Add("money", typeof(decimal));
        dt.Columns.Add("cost", typeof(decimal));

        dt.Rows.Add("星期一", 1200, 800);
        dt.Rows.Add("星期二", 1500, 1000);
        dt.Rows.Add("星期三", 1400, 850);
        dt.Rows.Add("星期四", 1450, 950);
        dt.Rows.Add("星期五", 1300, 900);
        dt.Rows.Add("星期六", 1325, 870);
        dt.Rows.Add("星期日", 1400, 890);

        return dt;
    }
}
	

再改寫創(chuàng)建圖形的代碼：

protected void Page_Load(object sender, EventArgs e)
{
    Series series = new Series("金額", ViewType.Bar);
    Series series_cost = new Series("成本", ViewType.Bar);
    SeriesPoint point;
    DataTable dt = GetDataSource;
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["money"].ToString()));
        series.Points.Add(point);

        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["cost"].ToString()));
        series_cost.Points.Add(point);
    }
    this.WebChartControl1.Series.Add(series);
    this.WebChartControl1.Series.Add(series_cost);
}

從上面的代碼和結(jié)果可以看出來，一個(gè)Series對(duì)象，就代表圖形中的一項(xiàng)數(shù)據(jù)，一個(gè)SeriesPoint對(duì)象，就代表項(xiàng)數(shù)據(jù)中的一個(gè)數(shù)據(jù)點(diǎn)，有了這兩項(xiàng)理解，我們要再增加數(shù)據(jù)項(xiàng)，就非常簡(jiǎn)單了。

2、創(chuàng)建線狀圖

知道了怎么創(chuàng)建柱形圖，再來創(chuàng)建線狀圖就很簡(jiǎn)單了，只需改寫圖形的類型就可以了。

protected void Page_Load(object sender, EventArgs e)
{
    Series series = new Series("金額", ViewType.Line);
    Series series_cost = new Series("成本", ViewType.Line);
    SeriesPoint point;
    DataTable dt = GetDataSource;
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["money"].ToString()));
        series.Points.Add(point);

        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["cost"].ToString()));
        series_cost.Points.Add(point);
    }
    this.WebChartControl1.Series.Add(series);
    this.WebChartControl1.Series.Add(series_cost);
}

3、創(chuàng)建餅狀圖

和創(chuàng)建線狀圖一樣，只需更改代碼

Series series = new Series("金額", ViewType.Line);
Series series_cost = new Series("成本", ViewType.Line);

中的類型即可，修改后的代碼如下：

Series series = new Series("金額", ViewType.Pie);
Series series_cost = new Series("成本", ViewType.Pie);

4、創(chuàng)建混合圖

現(xiàn)在我們將金額的數(shù)據(jù)以線狀顯示，將成本的數(shù)據(jù)以柱狀顯示，改寫Series對(duì)象的類型如下：

Series series = new Series("金額", ViewType.Line);
Series series_cost = new Series("成本", ViewType.Bar);

利用WebChartControl創(chuàng)建圖形很簡(jiǎn)單吧，只需要簡(jiǎn)單的幾行代碼，就可以生成一個(gè)漂亮的圖形了。