概述:本文通过一个例子对使用DevExpress ChartControl控件绘制多重坐标图形进行介绍,希望给大家有一个很好的参考。
有时基于对一些年份、月份的统计,需要集成多个数值指标进行分析,因此就需要把多种数据放到一个图形里面展现,也成为多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似。
首先我们先来看一个图形例子,我们可以从里面图形的右边看到有多个Y轴,一个Y轴代表一个指标分析,X轴为月份。
![DevExpress使用教程:多重坐标图形的绘制](https://i-blog.csdnimg.cn/blog_migrate/6dc622f8aa285030f244c046398c5c9d.jpeg)
上图是采用了DevExpress的ChartControl图表控件来实现的,这个控件提供了SecondaryAxisY对象来处理多重坐标的问题。
1、准备数据并绑定
首先,拖动ChartControl控件到Form界面上,然后设计好布局。
下面为了测试准备了几项数据,绑定在下面列表GridControl对象里面,然后把数据绑定到图表对象里面,如下代码。具体处理的时候,我们从数据库获取对应指标的数据即可实现动态绑定。
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
|
/// <summary>
/// 准备数据内容
/// </summary>
/// <returns></returns>
private
DataTable CreateData()
{
DataTable dt =
new
DataTable();
dt.Columns.Add(
new
DataColumn(
"类型"
));
dt.Columns.Add(
new
DataColumn(
"2005-1月"
,
typeof
(
decimal
)));
dt.Columns.Add(
new
DataColumn(
"2005-2月"
,
typeof
(
decimal
)));
dt.Columns.Add(
new
DataColumn(
"2005-3月"
,
typeof
(
decimal
)));
dt.Columns.Add(
new
DataColumn(
"2005-4月"
,
typeof
(
decimal
)));
dt.Columns.Add(
new
DataColumn(
"2005-5月"
,
typeof
(
decimal
)));
dt.Columns.Add(
new
DataColumn(
"2005-6月"
,
typeof
(
decimal
)));
dt.Rows.Add(
new
object
[] {
"员工人数"
, 437, 437, 414, 397, 387, 378 });
dt.Rows.Add(
new
object
[] {
"人均月薪"
, 3964, 3961, 3979, 3974, 3967, 3972 });
dt.Rows.Add(
new
object
[] {
"成本TEU"
, 3104, 1339, 3595.8, 3154.5, 2499.8, 3026 });
dt.Rows.Add(
new
object
[] {
"人均生产率"
, 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });
dt.Rows.Add(
new
object
[] {
"占2005年3月人数比例"
, 1.06, 1.06, 1, 0.96, 0.93, 0.91 });
return
dt;
}
private
void
Form1_Load(
object
sender, EventArgs e)
{
DataTable dt = CreateData();
this
.gridControl1.DataSource = dt;
CreateChart(dt);
}
|
2、创建图表图形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
private
void
CreateChart(DataTable dt)
{
#region Series
//创建几个图形的对象
Series series1 = CreateSeries(
"员工人数"
, ViewType.Line, dt, 0);
Series series2 = CreateSeries(
"人均月薪"
, ViewType.Line, dt, 1);
Series series3 = CreateSeries(
"成本TEU"
, ViewType.Line, dt, 2);
Series series4 = CreateSeries(
"人均生产率"
, ViewType.Line, dt, 3);
Series series5 = CreateSeries(
"占2005年3月人数比例"
, ViewType.Line, dt, 4);
#endregion
List<series> list =
new
List<series>() { series1, series2, series3, series4, series5 };
chartControl1.Series.AddRange(list.ToArray());
chartControl1.Legend.Visible =
false
;
chartControl1.SeriesTemplate.LabelsVisibility = DefaultBoolean.True;
for
(
int
i = 0; i < list.Count; i++)
{
list[i].View.Color = colorList[i];
CreateAxisY(list[i]);
}
}</series></series>
|
为了简化代码,并方便处理,上面代码中提取了两个函数进行了独立处理。
CreateSeries用于创建一个典型的图形,如一条曲线。CreateAxisY用来创建一个多重坐标轴。
CreateSeries用于创建一个典型的图形的源码如下所示。值得注意的是series.ArgumentScaleType = ScaleType.Qualitative;
这句代码必须设置,否则默认会把“2005年1月”内容转换为日期类型,显示不恰当的内容。
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
|
/// <summary>
/// 根据数据创建一个图形展现
/// </summary>
/// <param name="caption">图形标题
/// <param name="viewType">图形类型
/// <param name="dt">数据DataTable
/// <param name="rowIndex">图形数据的行序号
/// <returns></returns>
private
Series CreateSeries(
string
caption, ViewType viewType, DataTable dt,
int
rowIndex)
{
Series series =
new
Series(caption, viewType);
for
(
int
i = 1; i < dt.Columns.Count; i++)
{
string
argument = dt.Columns[i].ColumnName;
//参数名称
decimal
value = (
decimal
)dt.Rows[rowIndex][i];
//参数值
series.Points.Add(
new
SeriesPoint(argument, value));
}
//必须设置ArgumentScaleType的类型,否则显示会转换为日期格式,导致不是希望的格式显示
//也就是说,显示字符串的参数,必须设置类型为ScaleType.Qualitative
series.ArgumentScaleType = ScaleType.Qualitative;
series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;
//显示标注标签
return
series;
}
|
CreateAxisY用来创建一个多重坐标轴的代码如下所示,注意这里多重坐标,使用了和Series一直的View.Color颜色,这样方便区分。
![DevExpress使用教程:多重坐标图形的绘制](https://i-blog.csdnimg.cn/blog_migrate/17d4c27604dc2055f44fa9f726c6750d.jpeg)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/// <summary>
/// 创建图表的第二坐标系
/// </summary>
/// <param name="series">Series对象
/// <returns></returns>
private
SecondaryAxisY CreateAxisY(Series series)
{
SecondaryAxisY myAxis =
new
SecondaryAxisY(series.Name);
((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(myAxis);
((LineSeriesView)series.View).AxisY = myAxis;
myAxis.Title.Text = series.Name;
myAxis.Title.Alignment = StringAlignment.Far;
//顶部对齐
myAxis.Title.Visible =
true
;
//显示标题
myAxis.Title.Font =
new
Font(
"宋体"
, 9.0f);
Color color = series.View.Color;
//设置坐标的颜色和图表线条颜色一致
myAxis.Title.TextColor = color;
myAxis.Label.TextColor = color;
myAxis.Color = color;
return
myAxis;
}
|
3、Web界面的展现和代码处理
本来以为在Web上,使用DevExpress控件实现上图的图表很麻烦,没想到它们的对象关系及属性完全一样,复制代码就基本解决问题了,界面代码变化一点点而已(下载HTML界面代码)。
后台代码,除了绑定数据的代码略有不同外,其他完全一致。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public
partial
class
Default : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!
this
.IsPostBack)
{
//D线产量、薪酬、人员、生成率趋势图
DataTable dt = CreateData();
//绑定数据源到表格里面
this
.ASPxGridView1.DataSource = dt;
this
.ASPxGridView1.DataBind();
CreateChart(dt);
}
}
.............
|
Web上图表的效果如下所示,鼠标放到图形节点上,还有动态提示,很友好。
![DevExpress使用教程:多重坐标图形的绘制](https://i-blog.csdnimg.cn/blog_migrate/1436a3c406ed3c44422e8415e192beba.jpeg)
4、图表的打印
ChartControl提供了很好的打印功能,使用代码很简单。
1
2
3
4
|
private
void
btnPrint_Click(
object
sender, EventArgs e)
{
this
.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
}
|
得到的效果如下所示,基本上能够满足要求了,当然复杂的定制打印需要另外的处理代码了。
![DevExpress使用教程:多重坐标图形的绘制](https://i-blog.csdnimg.cn/blog_migrate/87c9ddecdbafff51484b98fbeee9441c.jpeg)
打印也可以使用下面的代码,效果差不多,但是定制性比较强一点。