WebChartControl是DevExpress控件群下的一個Web圖表控件，它使用非常的方便，生成的圖表也相當的漂亮。我們在本章就如何利用WebChartControl控件來繪制柱狀圖，線狀圖與餅狀圖做個示例。

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

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

注意需要在aspx的頭部注冊該控件：  

<%@ 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" % >

而且需要添加對應的dll的引用，這些都是引用一個第三方控件的必需工作，就不細說了。

在開始示例前，我們先為圖形創建數據源，我們以DataTable數據源作為示例，該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為數據源，開始創建圖形。

1、創建柱形圖

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);
}

從上面的圖表中可以看到，上面只有"金額"一項數據，如果我們要再加一項"成本"數據來作對比，要如何實現呢?

首先改寫數據源，讓其包括"成本"這一項的數據：

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;
    }
}
	

再改寫創建圖形的代碼：

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);
}

從上面的代碼和結果可以看出來，一個Series對象，就代表圖形中的一項數據，一個SeriesPoint對象，就代表項數據中的一個數據點，有了這兩項理解，我們要再增加數據項，就非常簡單了。

2、創建線狀圖

知道了怎么創建柱形圖，再來創建線狀圖就很簡單了，只需改寫圖形的類型就可以了。

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、創建餅狀圖

和創建線狀圖一樣，只需更改代碼

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、創建混合圖

現在我們將金額的數據以線狀顯示，將成本的數據以柱狀顯示，改寫Series對象的類型如下：

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

利用WebChartControl創建圖形很簡單吧，只需要簡單的幾行代碼，就可以生成一個漂亮的圖形了。