使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博，没什么经验，主要是把最近自己对Dev的一些研究贴出来大家共同探讨，有不足之处望大家帮忙斧正。
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 }
图表控件辅助类ChartServices.cs，控制生成图表
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Drawing; 6 using DevExpress.XtraCharts; 7 using System.Data; 8 9 namespace DevDemo 10 { 11 public static class ChartServices 12 { 13 /// <summary> 14 /// 绘制图形 15 /// </summary> 16 /// <param name="control">图表控件</param> 17 /// <param name="seriesName">系列名</param> 18 /// <param name="type">类型</param> 19 /// <param name="dt">数据源</param> 20 /// <param name="column1"></param> 21 /// <param name="column2"></param> 22 public static void DrawChart(DevExpress.XtraCharts.Web.WebChartControl control, string seriesName, ViewType type, DataTable dt, string column1, string column2) 23 { 24 Series series = new Series(seriesName, type); 25 DataTable table = dt; 26 SeriesPoint point=null; 27 for (int i = 0; i < table.Rows.Count; i++) 28 { 29 point= new SeriesPoint(table.Rows[i][column1].ToString(), Convert.ToDouble(table.Rows[i][column2].ToString())); 30 series.Points.Add(point); 31 } 32 control.Series.Add(series); 33 //针对饼图的特殊处理 34 if(type==ViewType.Pie) 35 { 36 //设置显示方式(Argument:显示图例说明，ArgumentAndValues:显示图例内容和数据) 37 series.Label.PointOptions.PointView = PointView.ArgumentAndValues; 38 //设置数据显示形式(Percent:百分比,Currency:货币类型，数据前添加￥,Scientific:科学计数法) 39 series.Label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent; 40 //数据是否保留小数(0：不保留小数位，1保留一位小数，2保留两位小数) 41 series.Label.PointOptions.ValueNumericOptions.Precision = 0; 42 43 //数据以百分比显示时只能是Default和None 44 ((PieSeriesLabel)series.Label).ResolveOverlappingMode =ResolveOverlappingMode.Default; 45 } 46 } 47 48 /// <summary> 49 /// 设置图表标题 50 /// </summary> 51 /// <param name="control">图表控件</param> 52 /// /// <param name="isVisible">标题是否可见</param> 53 /// <param name="text">标题文本</param> 54 /// <param name="isWordWrop">是否换行</param> 55 /// <param name="maxLineCount">最大允许行数</param> 56 /// <param name="alignment">对齐方式</param> 57 /// <param name="dock">位置</param> 58 /// <param name="isAntialiasing">是否允许设置外观</param> 59 /// <param name="font">字体</param> 60 /// <param name="textColor">文本颜色</param> 61 /// <param name="indent">字体缩进值</param> 62 public static void SetChartTitle(DevExpress.XtraCharts.Web.WebChartControl control,bool isVisible,String text, bool isWordWrop, int maxLineCount, StringAlignment alignment, ChartTitleDockStyle dock, bool isAntialiasing, Font font, Color textColor, int indent) 63 { 64 //设置标题 65 ChartTitle title = new ChartTitle(); 66 title.Visible = isVisible; 67 //显示文本 68 title.Text = text; 69 //是否允许换行 70 title.WordWrap = isWordWrop; 71 //最大允许行数 72 title.MaxLineCount = maxLineCount; 73 //对齐方式 74 title.Alignment = alignment; 75 //位置 76 title.Dock = dock; 77 //是否允许设置外观 78 title.Antialiasing = isAntialiasing; 79 //字体 80 title.Font = font; 81 //字体颜色 82 title.TextColor = textColor; 83 //缩进值 84 title.Indent = indent; 85 control.Titles.Add(title); 86 } 87 88 89 /// <summary> 90 /// 为X轴添加标题 91 /// </summary> 92 /// <param name="control">图形控件</param> 93 /// <param name="isVisible">标题是否可见</param> 94 /// <param name="aligment">对齐方式</param> 95 /// <param name="text">标题显示文本</param> 96 /// <param name="color">标题字体颜色</param> 97 /// <param name="isAntialiasing">是否允许设置外观</param> 98 /// <param name="font">字体</param> 99 public static void SetAxisX(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font) 100 { 101 XYDiagram xydiagram = (XYDiagram)control.Diagram; 102 xydiagram.AxisX.Title.Visible = isVisible; 103 xydiagram.AxisX.Title.Alignment = aligment; 104 xydiagram.AxisX.Title.Text = text; 105 xydiagram.AxisX.Title.TextColor = color; 106 xydiagram.AxisX.Title.Antialiasing = isAntialiasing; 107 xydiagram.AxisX.Title.Font = font; 108 } 109 110 /// <summary> 111 /// 为X轴添加标题 112 /// </summary> 113 /// <param name="control">图形控件</param> 114 /// <param name="isVisible">标题是否可见</param> 115 /// <param name="aligment">对齐方式</param> 116 /// <param name="text">标题显示文本</param> 117 /// <param name="color">标题字体颜色</param> 118 /// <param name="isAntialiasing">是否允许设置外观</param> 119 /// <param name="font">字体</param> 120 public static void SetAxisY(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font) 121 { 122 XYDiagram xydiagram = (XYDiagram)control.Diagram; 123 xydiagram.AxisY.Title.Visible = isVisible; 124 xydiagram.AxisY.Title.Alignment = aligment; 125 xydiagram.AxisY.Title.Text = text; 126 xydiagram.AxisY.Title.TextColor = color; 127 xydiagram.AxisY.Title.Antialiasing = isAntialiasing; 128 xydiagram.AxisY.Title.Font = font; 129 } 130 } 131 }
以上为本人的一点小小研究，如有不足之处，望不吝赐教！
转自：http://www.cnblogs.com/huabao-wei/archive/2012/12/17/DevWebChartControl.html