轉(zhuǎn)帖|使用教程|編輯:龔雪|2017-02-08 13:53:18.000|閱讀 409 次
概述:在使用DevExpress時(shí)如果需要集成多個(gè)數(shù)值指標(biāo)進(jìn)行分析,就需要把多種數(shù)據(jù)放到一個(gè)圖形里面展現(xiàn),即多重坐標(biāo)軸,多重坐標(biāo)軸可以是多個(gè)X軸,也可以是Y軸,它們的處理方式類似。本文通過一個(gè)例子對(duì)這個(gè)方面進(jìn)行介紹,希望給大家有一個(gè)很好的參考。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
1、準(zhǔn)備數(shù)據(jù)并綁定
首先,拖動(dòng)ChartControl控件到Form界面上,然后設(shè)計(jì)好布局。
下面為了測(cè)試準(zhǔn)備了幾項(xiàng)數(shù)據(jù),綁定在下面列表GridControl對(duì)象里面,然后把數(shù)據(jù)綁定到圖表對(duì)象里面,如下代碼。具體處理的時(shí)候,我們從數(shù)據(jù)庫獲取對(duì)應(yīng)指標(biāo)的數(shù)據(jù)即可實(shí)現(xiàn)動(dòng)態(tài)綁定。
/// <summary>
/// 準(zhǔn)備數(shù)據(jù)內(nèi)容
/// </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[] { "員工人數(shù)", 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[] { "人均生產(chǎn)率", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });
dt.Rows.Add(new object[] { "占2005年3月人數(shù)比例", 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、創(chuàng)建圖表圖形
private void CreateChart(DataTable dt)
{
#region Series
//創(chuàng)建幾個(gè)圖形的對(duì)象
Series series1 = CreateSeries("員工人數(shù)", ViewType.Line, dt, 0);
Series series2 = CreateSeries("人均月薪", ViewType.Line, dt, 1);
Series series3 = CreateSeries("成本TEU", ViewType.Line, dt, 2);
Series series4 = CreateSeries("人均生產(chǎn)率", ViewType.Line, dt, 3);
Series series5 = CreateSeries("占2005年3月人數(shù)比例", 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]);
}
}
為了簡(jiǎn)化代碼,并方便處理,上面代碼中提取了兩個(gè)函數(shù)進(jìn)行了獨(dú)立處理。
CreateSeries用于創(chuàng)建一個(gè)典型的圖形,如一條曲線。CreateAxisY用來創(chuàng)建一個(gè)多重坐標(biāo)軸。
CreateSeries用于創(chuàng)建一個(gè)典型的圖形的源碼如下所示。值得注意的是series.ArgumentScaleType = ScaleType.Qualitative;這句代碼必須設(shè)置,否則默認(rèn)會(huì)把“2005年1月”內(nèi)容轉(zhuǎn)換為日期類型,顯示不恰當(dāng)?shù)膬?nèi)容。
/// <summary>
/// 根據(jù)數(shù)據(jù)創(chuàng)建一個(gè)圖形展現(xiàn)
/// </summary>
/// <param name="caption">圖形標(biāo)題</param>
/// <param name="viewType">圖形類型</param>
/// <param name="dt">數(shù)據(jù)DataTable</param>
/// <param name="rowIndex">圖形數(shù)據(jù)的行序號(hào)</param>
/// <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;//參數(shù)名稱
decimal value = (decimal)dt.Rows[rowIndex][i];//參數(shù)值
series.Points.Add(new SeriesPoint(argument, value));
}
//必須設(shè)置ArgumentScaleType的類型,否則顯示會(huì)轉(zhuǎn)換為日期格式,導(dǎo)致不是希望的格式顯示
//也就是說,顯示字符串的參數(shù),必須設(shè)置類型為ScaleType.Qualitative
series.ArgumentScaleType = ScaleType.Qualitative;
series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//顯示標(biāo)注標(biāo)簽
return series;
}
CreateAxisY用來創(chuàng)建一個(gè)多重坐標(biāo)軸的代碼如下所示,注意這里多重坐標(biāo),使用了和Series一直的View.Color顏色,這樣方便區(qū)分。

/// <summary>
/// 創(chuàng)建圖表的第二坐標(biāo)系
/// </summary>
/// <param name="series">Series對(duì)象</param>
/// <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; //頂部對(duì)齊
myAxis.Title.Visible = true; //顯示標(biāo)題
myAxis.Title.Font = new Font("宋體", 9.0f);
Color color = series.View.Color;//設(shè)置坐標(biāo)的顏色和圖表線條顏色一致
myAxis.Title.TextColor = color;
myAxis.Label.TextColor = color;
myAxis.Color = color;
return myAxis;
}
3、Web界面的展現(xiàn)和代碼處理
本來以為在Web上,使用DevExpress控件實(shí)現(xiàn)上圖的圖表很麻煩,沒想到它們的對(duì)象關(guān)系及屬性完全一樣,復(fù)制代碼就基本解決問題了,界面代碼變化一點(diǎn)點(diǎn)而已。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebLineStatisticChart.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p><h3 align="center" style="text-align: left">D線產(chǎn)量、薪酬、人員、生成率趨勢(shì)圖</h3></p>
<dx:WebChartControl ID="chartControl1" runat="server" Height="452px"
Width="1013px">
</dx:WebChartControl>
<div>
</div>
<br />
<dx:ASPxGridView ID="ASPxGridView1" runat="server" Theme="Aqua">
<SettingsPager Visible="False">
</SettingsPager>
</dx:ASPxGridView>
</form>
</body>
</html>
后臺(tái)代碼,除了綁定數(shù)據(jù)的代碼略有不同外,其他完全一致。
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
//D線產(chǎn)量、薪酬、人員、生成率趨勢(shì)圖
DataTable dt = CreateData();
//綁定數(shù)據(jù)源到表格里面
this.ASPxGridView1.DataSource = dt;
this.ASPxGridView1.DataBind();
CreateChart(dt);
}
}
.............
Web上圖表的效果如下所示,鼠標(biāo)放到圖形節(jié)點(diǎn)上,還有動(dòng)態(tài)提示,很友好。

4、 圖表的打印
ChartControl提供了很好的打印功能,使用代碼很簡(jiǎn)單。
private void btnPrint_Click(object sender, EventArgs e)
{
this.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
}
得到的效果如下所示,基本上能夠滿足要求了,當(dāng)然復(fù)雜的定制打印需要另外的處理代碼了。

(撰寫人:伍華聰 //www.iqidi.com)
想要了解更多DevExpress使用技巧?海量視頻課程以及最專業(yè)的DevExpress培訓(xùn)盡在。

本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn