使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。
先贴出几张WebChartControl生成的图表：
Web页面代码WebChartControl.aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebChartControl.aspx.cs" Inherits="DevDemo.WebChartControl" %> <%@ Register Assembly="DevExpress.XtraCharts.v11.2.Web, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %> <%@ Register assembly="DevExpress.XtraCharts.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="500px" Height="350px"> </dxchartsui:WebChartControl> <dxchartsui:WebChartControl ID="WebChartControl3" runat="server" Width="500px" Height="350px"> </dxchartsui:WebChartControl> <dxchartsui:WebChartControl ID="WebChartControl2" runat="server" Width="500px" Height="350px"> </dxchartsui:WebChartControl> <dxchartsui:WebChartControl ID="WebChartControl4" runat="server" Width="500px" Height="350px"> </dxchartsui:WebChartControl> </div> </form> </body> </html>
Web页面后台代码WebChartControl.aspx.cs
namespace DevDemo { public partial class WebChartControl : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { this.DrawBar(); this.DrawLine(); this.DrawPie(); this.DrawBarAndLine(); } /// <summary> /// 绘制柱状图 /// </summary> private void DrawBar() { ChartServices.SetChartTitle(this.WebChartControl1, true, "2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); //如不需显示图表标题可不用调用本段代码，下同 ChartServices.DrawChart(this.WebChartControl1, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money"); ChartServices.DrawChart(this.WebChartControl1, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); ChartServices.SetAxisX(this.WebChartControl1, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); //如不需显示X轴标题，可不调用该行代码，下同 ChartServices.SetAxisY(this.WebChartControl1, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); //如不需显示Y轴标题，可不调用该行代码，下同 } /// <summary> /// 绘制折线图 /// </summary> private void DrawLine() { ChartServices.SetChartTitle(this.WebChartControl3,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); ChartServices.DrawChart(this.WebChartControl3, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money"); ChartServices.DrawChart(this.WebChartControl3, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); ChartServices.SetAxisX(this.WebChartControl3, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); ChartServices.SetAxisY(this.WebChartControl3, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); } /// <summary> /// 柱状图和折线图在同一图表中 /// </summary> private void DrawBarAndLine() { ChartServices.SetChartTitle(this.WebChartControl2,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money"); ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); ChartServices.SetChartTitle(this.WebChartControl2,false,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money"); ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost"); ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); } /// <summary> /// 绘制饼图 /// </summary> private void DrawPie() { ChartServices.SetChartTitle(this.WebChartControl4,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top,true,new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); ChartServices.DrawChart(this.WebChartControl4, ServiceData.GetWeekMoneyAndCost().Rows[0][0].ToString(), ViewType.Pie, ServiceData.GetWeekMoneyAndCost(), "week", "money"); } } }
数据提供类ServiceData.cs，主要作用为图表控件提供数据源
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; namespace DevDemo { public static class ServiceData { /// <summary> /// 获取一周收入和支出数据 /// </summary> /// <returns>Datatable数据集合(可从数据库读取以datatable形式返回，此处为演示方便直接构造)</returns> public static DataTable GetWeekMoneyAndCost() { 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,400); dt.Rows.Add("星期二", 1800,750); dt.Rows.Add("星期三", 890,320); dt.Rows.Add("星期四", 1080,290); dt.Rows.Add("星期五", 2800,1020); dt.Rows.Add("星期六", 3200,1260); dt.Rows.Add("星期日", 4500,2320); return dt; } } }
图表控件辅助类ChartServices.cs，控制生成图表
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Drawing; using DevExpress.XtraCharts; using System.Data; namespace DevDemo { public static class ChartServices { /// <summary> /// 绘制图形 /// </summary> /// <param name="control">图表控件</param> /// <param name="seriesName">系列名</param> /// <param name="type">类型</param> /// <param name="dt">数据源</param> /// <param name="column1"></param> /// <param name="column2"></param> public static void DrawChart(DevExpress.XtraCharts.Web.WebChartControl control, string seriesName, ViewType type, DataTable dt, string column1, string column2) { Series series = new Series(seriesName, type); DataTable table = dt; SeriesPoint point=null; for (int i = 0; i < table.Rows.Count; i++) { point= new SeriesPoint(table.Rows[i][column1].ToString(), Convert.ToDouble(table.Rows[i][column2].ToString())); series.Points.Add(point); } control.Series.Add(series); //针对饼图的特殊处理 if(type==ViewType.Pie) { //设置显示方式(Argument:显示图例说明，ArgumentAndValues:显示图例内容和数据) series.Label.PointOptions.PointView = PointView.ArgumentAndValues; //设置数据显示形式(Percent:百分比,Currency:货币类型，数据前添加￥,Scientific:科学计数法) series.Label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent; //数据是否保留小数(0：不保留小数位，1保留一位小数，2保留两位小数) series.Label.PointOptions.ValueNumericOptions.Precision = 0; //数据以百分比显示时只能是Default和None ((PieSeriesLabel)series.Label).ResolveOverlappingMode =ResolveOverlappingMode.Default; } } /// <summary> /// 设置图表标题 /// </summary> /// <param name="control">图表控件</param> /// /// <param name="isVisible">标题是否可见</param> /// <param name="text">标题文本</param> /// <param name="isWordWrop">是否换行</param> /// <param name="maxLineCount">最大允许行数</param> /// <param name="alignment">对齐方式</param> /// <param name="dock">位置</param> /// <param name="isAntialiasing">是否允许设置外观</param> /// <param name="font">字体</param> /// <param name="textColor">文本颜色</param> /// <param name="indent">字体缩进值</param> 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) { //设置标题 ChartTitle title = new ChartTitle(); title.Visible = isVisible; //显示文本 title.Text = text; //是否允许换行 title.WordWrap = isWordWrop; //最大允许行数 title.MaxLineCount = maxLineCount; //对齐方式 title.Alignment = alignment; //位置 title.Dock = dock; //是否允许设置外观 title.Antialiasing = isAntialiasing; //字体 title.Font = font; //字体颜色 title.TextColor = textColor; //缩进值 title.Indent = indent; control.Titles.Add(title); } /// <summary> /// 为X轴添加标题 /// </summary> /// <param name="control">图形控件</param> /// <param name="isVisible">标题是否可见</param> /// <param name="aligment">对齐方式</param> /// <param name="text">标题显示文本</param> /// <param name="color">标题字体颜色</param> /// <param name="isAntialiasing">是否允许设置外观</param> /// <param name="font">字体</param> public static void SetAxisX(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font) { XYDiagram xydiagram = (XYDiagram)control.Diagram; xydiagram.AxisX.Title.Visible = isVisible; xydiagram.AxisX.Title.Alignment = aligment; xydiagram.AxisX.Title.Text = text; xydiagram.AxisX.Title.TextColor = color; xydiagram.AxisX.Title.Antialiasing = isAntialiasing; xydiagram.AxisX.Title.Font = font; } /// <summary> /// 为X轴添加标题 /// </summary> /// <param name="control">图形控件</param> /// <param name="isVisible">标题是否可见</param> /// <param name="aligment">对齐方式</param> /// <param name="text">标题显示文本</param> /// <param name="color">标题字体颜色</param> /// <param name="isAntialiasing">是否允许设置外观</param> /// <param name="font">字体</param> public static void SetAxisY(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font) { XYDiagram xydiagram = (XYDiagram)control.Diagram; xydiagram.AxisY.Title.Visible = isVisible; xydiagram.AxisY.Title.Alignment = aligment; xydiagram.AxisY.Title.Text = text; xydiagram.AxisY.Title.TextColor = color; xydiagram.AxisY.Title.Antialiasing = isAntialiasing; xydiagram.AxisY.Title.Font = font; } } }
