WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。
先贴出几张WebChartControl生成的图表：
Web页面代码WebChartControl.aspx：
View Code
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
View Code
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，主要作用为图表控件提供数据源
View Code
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，控制生成图表
View Code
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 }
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
