您的位置：360文档中心› 使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
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"
4Namespace="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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9
10<html xmlns="/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
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.UI;
6using System.Web.UI.WebControls;
7using System.Data;
8using DevExpress.XtraCharts;
9using System.Drawing;
10
11namespace DevDemo
12 {
13public partial class WebChartControl : System.Web.UI.Page
14{
15protected void Page_Load(object sender, EventArgs e)
17this.DrawBar();
18this.DrawLine();
19this.DrawPie();
20this.DrawBarAndLine();
21}
22
23///<summary>
24///绘制柱状图
25///</summary>
26private void DrawBar()
27{
28
29ChartServices.SetChartTitle(this.WebChartControl1, true, "2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); //如不需显示图表标题可不用调用本段代码，下同
30ChartServices.DrawChart(this.WebChartControl1, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money");
31ChartServices.DrawChart(this.WebChartControl1, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
32ChartServices.SetAxisX(this.WebChartControl1, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); //如不需显示X轴标题，可不调用该行代码，下同
33ChartServices.SetAxisY(this.WebChartControl1, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold)); //如不需显示Y轴标题，可不调用该行代码，下同
34}
35
36///<summary>
37///绘制折线图
38///</summary>
39private void DrawLine()
40{
41ChartServices.SetChartTitle(this.WebChartControl3,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
42ChartServices.DrawChart(this.WebChartControl3, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money");
43ChartServices.DrawChart(this.WebChartControl3, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
44ChartServices.SetAxisX(this.WebChartControl3, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
45ChartServices.SetAxisY(this.WebChartControl3, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
47
48///<summary>
49///柱状图和折线图在同一图表中
50///</summary>
51private void DrawBarAndLine()
52{
53ChartServices.SetChartTitle(this.WebChartControl2,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
54ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money");
55ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
56ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
57ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
58
59ChartServices.SetChartTitle(this.WebChartControl2,false,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
60ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money");
61ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
62ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
63ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
64}
65
66///<summary>
67///绘制饼图
68///</summary>
69private void DrawPie()
70{
71ChartServices.SetChartTitle(this.WebChartControl4,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top,true,new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
72ChartServices.DrawChart(this.WebChartControl4, ServiceData.GetWeekMoneyAndCost().Rows[0][0].ToString(), ViewType.Pie, ServiceData.GetWeekMoneyAndCost(), "week", "money");
73}
74}
75 }
数据提供类ServiceData.cs，主要作用为图表控件提供数据源
View Code
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Data;
6
7namespace DevDemo
8 {
9public static class ServiceData
10{
11///<summary>
12///获取一周收入和支出数据
13///</summary>
14///<returns>Datatable数据集合(可从数据库读取以datatable形式返回，此处为演示方便直接构造)</returns>
15public static DataTable GetWeekMoneyAndCost()
16{
17DataTable dt = new DataTable();
18dt.Columns.Add("week", typeof(string));
19dt.Columns.Add("money", typeof(decimal));
20dt.Columns.Add("cost", typeof(decimal));
21
22dt.Rows.Add("星期一", 1200,400);
23dt.Rows.Add("星期二", 1800,750);
24dt.Rows.Add("星期三", 890,320);
25dt.Rows.Add("星期四", 1080,290);
26dt.Rows.Add("星期五", 2800,1020);
27dt.Rows.Add("星期六", 3200,1260);
28dt.Rows.Add("星期日", 4500,2320);
29return dt;
30}
31}
32 }
图表控件辅助类ChartServices.cs，控制生成图表
View Code
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Drawing;
6using DevExpress.XtraCharts;
7using System.Data;
8
9namespace DevDemo
10 {
11public 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>
22public static void DrawChart(DevExpress.XtraCharts.Web.WebChartControl control, string seriesName, ViewType type, DataTable dt, string column1, string column2)
23{
24Series series = new Series(seriesName, type);
25DataTable table = dt;
26SeriesPoint point=null;
27for (int i = 0; i < table.Rows.Count; i++)
28{
29point= new SeriesPoint(table.Rows[i][column1].ToString(), Convert.ToDouble(table.Rows[i][column2].ToString()));
30series.Points.Add(point);
31}
32control.Series.Add(series);
33//针对饼图的特殊处理
34if(type==ViewType.Pie)
35{
36//设置显示方式(Argument:显示图例说明，ArgumentAndValues:显示图例内容和数据)
bel.PointOptions.PointView = PointView.ArgumentAndValues; 38//设置数据显示形式(Percent:百分比,Currency:货币类型，数据前添加￥,Scientific:科学计数法)
bel.PointOptions.V alueNumericOptions.Format = NumericFormat.Percent;
40//数据是否保留小数(0：不保留小数位，1保留一位小数，2保留两位小数)
bel.PointOptions.ValueNumericOptions.Precision = 0;
42
43//数据以百分比显示时只能是Default和None
44((PieSeriesLabel)bel).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>
62public 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//设置标题
65ChartTitle title = new ChartTitle();
66title.Visible = isVisible;
67//显示文本
68title.Text = text;
69//是否允许换行
70title.WordWrap = isWordWrop;
71//最大允许行数
72title.MaxLineCount = maxLineCount;
73//对齐方式
74title.Alignment = alignment;
75//位置
76title.Dock = dock;
77//是否允许设置外观
78title.Antialiasing = isAntialiasing;
79//字体
80title.Font = font;
81//字体颜色
82title.TextColor = textColor;
83//缩进值
84title.Indent = indent;
85control.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>
99public static void SetAxisX(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font) 100{
101XYDiagram xydiagram = (XYDiagram)control.Diagram;
102xydiagram.AxisX.Title.Visible = isVisible;
103xydiagram.AxisX.Title.Alignment = aligment;
104xydiagram.AxisX.Title.Text = text;
105xydiagram.AxisX.Title.TextColor = color;
106xydiagram.AxisX.Title.Antialiasing = isAntialiasing;
107xydiagram.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>
120public static void SetAxisY(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font) 121{
122XYDiagram xydiagram = (XYDiagram)control.Diagram;
123xydiagram.AxisY.Title.Visible = isVisible;
124xydiagram.AxisY.Title.Alignment = aligment;
125xydiagram.AxisY.Title.Text = text;
126xydiagram.AxisY.Title.TextColor = color;
127xydiagram.AxisY.Title.Antialiasing = isAntialiasing;
128xydiagram.AxisY.Title.Font = font;
129}
130}
131 }
以上为本人的一点小小研究，如有不足之处，望不吝赐教！可详见/huabao-wei/archive/2012/12/17/DevWebChartControl.html。

相关文档
最新文档