WebChartControl使用方法

简介

WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。我们在本章就如何利用WebChartControl控件来绘制柱状图，线状图与饼状图做个示例。

步骤/方法

1. 首先，我们需要在aspx页面放置一个WebChartControl控件，代码如下，为简单起见，我们不为它设置任何属性：

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

2. 注意需要在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;
   }
   }

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

   运行结果如下：

   

4. 从上面的图表中可以看到，上面只有"金额"一项数据，如果我们要再加一项"成本"数据来作对比，要如何实现呢?
   首先改写数据源，让其包括"成本"这一项的数据：

   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对象，就代表项数据中的一个数据点，有了这两项理解，我们要再增加数据项，就非常简单了。

   

5. 创建线状图
   知道了怎么创建柱形图，再来创建线状图就很简单了，只需改写图形的类型就可以了。

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

   运行结果如下：
   

   

6. 创建饼状图
   和创建线状图一样，只需更改代码

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

   运行结果如下：

   
   

   

7. 创建混合图
   现在我们将金额的数据以线状显示，将成本的数据以柱状显示，改写Series对象的类型如下：

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

   运行结果如下：