WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。
先贴出几张WebChartControl生成的图表：
Web页面代码WebChartControl.aspx：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebChartControl.aspx.cs" Inherits="DevDemo.WebChartControl" %>
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v11.2.Export, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxGridView.Export" TagPrefix="dx" %>
<%@ 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">
<
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
>
<
br
/>
<
asp:Button
ID
=
"btnExport"
runat
=
"server"
Text
=
"导出"
onclick
=
"btnExport_Click"
/>
</
div
>
</
form
>
</
body
>
</
html
>
|
Web页面后台代码WebChartControl.aspx.cs
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
using
DevExpress.XtraCharts;
using
System.Drawing;
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，主要作用为图表控件提供数据源
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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，控制生成图表
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Text;
using
DevExpress.XtraCharts;
using
System.Drawing;
using
System.Data;
namespace
DevWinForm
{
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(ChartControl 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(ChartControl 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(ChartControl 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(ChartControl 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;
}
}
}
|
以上为本人的一点小小研究，如有不足之处，望不吝赐教！详见http://www.cnblogs.com/huabao-wei/archive/2012/12/17/DevWebChartControl.html
7946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
