WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的方便,生成的图表也相当的漂亮。
先贴出几张WebChartControl生成的图表:
Web页面代码WebChartControl.aspx:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebChartControl.aspx.cs" Inherits="DevDemo.WebChartControl" %> 2 3 <%@ Register Assembly="DevExpress.XtraCharts.v11.2.Web, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 4 Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %> 5 6 <%@ Register assembly="DevExpress.XtraCharts.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %> 7 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 9 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head runat="server"> 12 <title></title> 13 </head> 14 <body> 15 <form id="form1" runat="server"> 16 <div> 17 <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="500px" Height="350px"> 18 </dxchartsui:WebChartControl> 19 20 <dxchartsui:WebChartControl ID="WebChartControl3" runat="server" Width="500px" Height="350px"> 21 </dxchartsui:WebChartControl> 22 <dxchartsui:WebChartControl ID="WebChartControl2" runat="server" Width="500px" Height="350px"> 23 </dxchartsui:WebChartControl> 24 <dxchartsui:WebChartControl ID="WebChartControl4" runat="server" Width="500px" Height="350px"> 25 </dxchartsui:WebChartControl> 26 </div> 27 </form> 28 </body> 29 </html>
Web页面后台代码WebChartControl.aspx.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Data; 8 using DevExpress.XtraCharts; 9 using System.Drawing; 10 11 namespace DevDemo 12 { 13 public partial class WebChartControl : System.Web.UI.Page 14 { 15 protected void Page_Load(object sender, EventArgs e) 16 { 17 this.DrawBar(); 18 this.DrawLine(); 19 this.DrawPie(); 20 this.DrawBarAndLine(); 21 } 22 23 /// <summary> 24 /// 绘制柱状图 25 /// </summary> 26 private void DrawBar() 27 { 28 29 ChartServices.SetChartTitle(this.WebChartControl1, true, "2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); //如不需显示图表标题可不用调用本段代码,下同 30 ChartServices.DrawChart(this.WebChartControl1, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money"); 31 ChartServices.DrawChart(this.WebChartControl1, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); 32 ChartServices.SetAxisX(this.WebChartControl1, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); //如不需显示X轴标题,可不调用该行代码,下同 33 ChartServices.SetAxisY(this.WebChartControl1, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); //如不需显示Y轴标题,可不调用该行代码,下同 34 } 35 36 /// <summary> 37 /// 绘制折线图 38 /// </summary> 39 private void DrawLine() 40 { 41 ChartServices.SetChartTitle(this.WebChartControl3,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); 42 ChartServices.DrawChart(this.WebChartControl3, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money"); 43 ChartServices.DrawChart(this.WebChartControl3, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); 44 ChartServices.SetAxisX(this.WebChartControl3, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); 45 ChartServices.SetAxisY(this.WebChartControl3, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); 46 } 47 48 /// <summary> 49 /// 柱状图和折线图在同一图表中 50 /// </summary> 51 private void DrawBarAndLine() 52 { 53 ChartServices.SetChartTitle(this.WebChartControl2,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); 54 ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money"); 55 ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); 56 ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); 57 ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); 58 59 ChartServices.SetChartTitle(this.WebChartControl2,false,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); 60 ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money"); 61 ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); 62 ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); 63 ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); 64 } 65 66 /// <summary> 67 /// 绘制饼图 68 /// </summary> 69 private void DrawPie() 70 { 71 ChartServices.SetChartTitle(this.WebChartControl4,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top,true,new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); 72 ChartServices.DrawChart(this.WebChartControl4, ServiceData.GetWeekMoneyAndCost().Rows[0][0].ToString(), ViewType.Pie, ServiceData.GetWeekMoneyAndCost(), "week", "money"); 73 } 74 } 75 }数据提供类ServiceData.cs,主要作用为图表控件提供数据源
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 7 namespace DevDemo 8 { 9 public static class ServiceData 10 { 11 /// <summary> 12 /// 获取一周收入和支出数据 13 /// </summary> 14 /// <returns>Datatable数据集合(可从数据库读取以datatable形式返回,此处为演示方便直接构造)</returns> 15 public static DataTable GetWeekMoneyAndCost() 16 { 17 DataTable dt = new DataTable(); 18 dt.Columns.Add("week", typeof(string)); 19 dt.Columns.Add("money", typeof(decimal)); 20 dt.Columns.Add("cost", typeof(decimal)); 21 22 dt.Rows.Add("星期一", 1200,400); 23 dt.Rows.Add("星期二", 1800,750); 24 dt.Rows.Add("星期三", 890,320); 25 dt.Rows.Add("星期四", 1080,290); 26 dt.Rows.Add("星期五", 2800,1020); 27 dt.Rows.Add("星期六", 3200,1260); 28 dt.Rows.Add("星期日", 4500,2320); 29 return dt; 30 } 31 } 32 }