DevExpress控件使用之多重坐标图形的绘制(ASPxWebChartControl)

DevExpress控件使用之多重坐标图形的绘制

有时候，基于对一些年份、月份的统计，需要集成多个数值指标进行分析，因此就需要把多种数据放到一个图形里面展现，也成为多重坐标轴，多重坐标轴可以是多个X轴，也可以是Y轴，它们的处理方式类似。本文通过一个例子对这个方面进行介绍，希望给大家有一个很好的参考。

首先我们先来看一个图形例子，我们可以从里面图形的右边看到有多个Y轴，一个Y轴代表一个指标分析，X轴为月份。

上图是采用了DevExpress的ChartControl图表控件来实现的，这个控件提供了SecondaryAxisY对象来处理多重坐标的问题。

1.准备数据并绑定

首先，，拖动ChartControl控件到Form界面上，然后设计好布局。

下面为了测试准备了几项数据，绑定在下面列表GridControl对象里面，然

后把数据绑定到图表对象里面，如下代码。具体处理的时候，我们从数据库获取对应指标的数据即可实现动态绑定。

///

///

privateDataTableCreateData()

{

DataTabledt = new DataTable();

(new DataColumn("类型"));

(new DataColumn("2005-1月", typeof(decimal)));

(new DataColumn("2005-2月", typeof(decimal)));

(new DataColumn("2005-3月", typeof(decimal)));

(new DataColumn("2005-4月", typeof(decimal)));

(new DataColumn("2005-5月", typeof(decimal)));

(new DataColumn("2005-6月", typeof(decimal)));

(new object[] { "员工人数", 437, 437, 414,

397, 387, 378 });

(new object[] { "人均月薪", 3964, 3961, 3979,

3974, 3967, 3972 });

(new object[] { "成本TEU", 3104, 1339, 3595.8,

3154.5, 2499.8, 3026 });

(new object[] { "人均生产率", 7.1, 3.06, 8.69,

7.95, 6.46, 8.01 });

(new object[] { "占2005年3月人数比例", 1.06, 1.06, 1,

0.96, 0.93, 0.91 });

returndt;

}

private void Form1_Load(object sender, EventArgs e)

{

DataTabledt = CreateData();

urce = dt;

CreateChart(dt);

}

2、创建图表图形

private void CreateChart(DataTabledt)

{

#region Series

//创建几个图形的对象

Series series1 = CreateSeries("员工人数", , dt, 0);

Series series2 = CreateSeries("人均月薪", , dt, 1);

Series series3 = CreateSeries("成本TEU", , dt, 2);

Series series4 = CreateSeries("人均生产率", , dt, 3);

Series series5 = CreateSeries("占2005年3月人数比例",

, dt, 4);

#endregion

List list = new List() { series1, series2, series3,

series4, series5 };

ge(y());

e = false;

Visibility =

;

for (int i = 0; i <; i++)

{

list[i]. = colorList[i];

CreateAxisY(list[i]);

}

}

为了简化代码，并方便处理，上面代码中提取了两个函数进行了独立处理。

CreateSeries用于创建一个典型的图形，如一条曲线。CreateAxisY用来创建一个多重坐标轴。

CreateSeries用于创建一个典型的图形的源码如下所示。值得注意的是ntScaleType = ative;这句代码必须设置，否则默认会把“2005年1月”内容转换为日期类型，显示不恰当的内容。

///

/// 图形标题

/// 图形类型

/// 数据DataTable

/// 图形数据的行序号

///

private Series CreateSeries(string caption, ViewTypeviewType,

DataTabledt, introwIndex)

{

Series series = new Series(caption, viewType);

for (int i = 1; i <; i++)

{

string argument = s[i].ColumnName;//参数名称

decimal value = (decimal)[rowIndex][i];//参数值

(new SeriesPoint(argument, value));

}

//必须设置ArgumentScaleType的类型，否则

//显示会转换为日期格式，导致不是希望的格式显示

//也就是说，显示字符串的参数，必须设置类型为ative

ntScaleType = ative;

Visibility = ;

//显示标注标签

return series;

}

CreateAxisY用来创建一个多重坐标轴的代码如下所示，注意这里多重坐标，使用了和Series一直的颜色，这样方便区分。

///

/// Series对象

///

privateSecondaryAxisYCreateAxisY(Series series)

{

SecondaryAxisYmyAxis = new SecondaryAxisY();

((XYDiagram)m).(myAxis);

((LineSeriesView)).AxisY = myAxis;

= ;

ent = ; //顶部对齐

e = true; //显示标题

= new Font("宋体", 9.0f);

Color color = ;//设置坐标的颜色和图表线条颜色一致

lor = color;

lor = color;

= color;

returnmyAxis;

}

3、Web界面的展现和代码处理

本来以为在Web上，使用DevExpress控件实现上图的图表很麻烦，没想到它们的对象关系及属性完全一样，复制代码就基本解决问题了，界面代码变化一点点而已。

<%@ Page Language="C#" AutoEventWireup="true"

CodeBehind=""

Inherits="t" %>

"/TR/xhtml1/DTD/">

后台代码，除了绑定数据的代码略有不同外，其他完全一致。

public partial class Default :

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Back)

{

//D线产量、薪酬、人员、生成率趋势图

DataTabledt = CreateData();

//绑定数据源到表格里面

urce = dt;

nd();

CreateChart(dt);

}

}

.............

.............

.............

.............

}

Web上图表的效果如下所示，鼠标放到图形节点上，还有动态提示，很友好。

4、 图表的打印

ChartControl提供了很好的打印功能，使用代码很简单。

private void btnPrint_Click(object sender, EventArgs e)

{

intPreview(arts.

);

}

得到的效果如下所示，基本上能够满足要求了，当然复杂的定制打印需要另外的处理代码了。

打印也可以使用下面的代码，效果差不多，但是定制性比较强一点。

private void btnPrint_Click(object sender, EventArgs e)

{

//intPreview(arts.

);

iteLinkcompositeLink =

iteLink();

ngSystemps =

ngSystem();

ngSystem = ps;

ape = true;

ind = ind.A4;

bleComponentLink link =

bleComponentLink(ps);

ape = true;

ent = ontrol1;

(link);

Document(); //建立文档

();//进行预览

}