DevExpress Universal Subscription擁有.NET開發需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

有時候，基于對一些年份、月份的統計，需要集成多個數值指標進行分析，因此就需要把多種數據放到一個圖形里面展現，也成為多重坐標軸，多重坐標軸可以是多個X軸，也可以是Y軸，它們的處理方式類似。本文通過一個例子對這個方面進行介紹，希望給大家有一個很好的參考。

首先我們先來看一個圖形例子，我們可以從里面圖形的右邊看到有多個Y軸，一個Y軸代表一個指標分析，X軸為月份。

上圖是采用了DevExpress的ChartControl圖表控件來實現的，這個控件提供了SecondaryAxisY對象來處理多重坐標的問題。

一、準備數據并綁定

首先，，拖動ChartControl控件到Form界面上，然后設計好布局。

下面為了測試準備了幾項數據，綁定在下面列表GridControl對象里面，然后把數據綁定到圖表對象里面，如下代碼。具體處理的時候，我們從數據庫獲取對應指標的數據即可實現動態綁定。

/// <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);
}

二、創建圖表圖形

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]);
}
}

為了簡化代碼，并方便處理，上面代碼中提取了兩個函數進行了獨立處理。

CreateSeries用于創建一個典型的圖形，如一條曲線。CreateAxisY用來創建一個多重坐標軸。

CreateSeries用于創建一個典型的圖形的源碼如下所示。值得注意的是series.ArgumentScaleType = ScaleType.Qualitative;這句代碼必須設置，否則默認會把“2005年1月”內容轉換為日期類型，顯示不恰當的內容。

/// <summary>
/// 根據數據創建一個圖形展現
/// </summary>
/// <param name="caption">圖形標題</param>
/// <param name="viewType">圖形類型</param>
/// <param name="dt">數據DataTable</param>
/// <param name="rowIndex">圖形數據的行序號</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;//參數名稱
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顏色，這樣方便區分。

/// <summary>
/// 創建圖表的第二坐標系
/// </summary>
/// <param name="series">Series對象</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; //頂部對齊
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;
}

三、Web界面的展現和代碼處理

本來以為在Web上，使用DevExpress控件實現上圖的圖表很麻煩，沒想到它們的對象關系及屬性完全一樣，復制代碼就基本解決問題了，界面代碼變化一點點而已。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebLineStatisticChart.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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線產量、薪酬、人員、生成率趨勢圖</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>

后臺代碼，除了綁定數據的代碼略有不同外，其他完全一致。

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上圖表的效果如下所示，鼠標放到圖形節點上，還有動態提示，很友好。

四、圖表的打印

ChartControl提供了很好的打印功能，使用代碼很簡單。

private void btnPrint_Click(object sender, EventArgs e)
{
this.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
}

得到的效果如下所示，基本上能夠滿足要求了，當然復雜的定制打印需要另外的處理代碼了。

打印也可以使用下面的代碼，效果差不多，但是定制性比較強一點。

private void btnPrint_Click(object sender, EventArgs e)
{
//this.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
DevExpress.XtraPrintingLinks.CompositeLink compositeLink = new DevExpress.XtraPrintingLinks.CompositeLink();
DevExpress.XtraPrinting.PrintingSystem ps = new DevExpress.XtraPrinting.PrintingSystem();

compositeLink.PrintingSystem = ps;
compositeLink.Landscape = true;
compositeLink.PaperKind = System.Drawing.Printing.PaperKind.A4;

DevExpress.XtraPrinting.PrintableComponentLink link = new DevExpress.XtraPrinting.PrintableComponentLink(ps);
ps.PageSettings.Landscape = true;
link.Component = this.chartControl1;
compositeLink.Links.Add(link);

link.CreateDocument(); //建立文檔
ps.PreviewFormEx.Show();//進行預覽
}

本文轉載自

DevExpress技術交流群3：700924826      歡迎一起進群討論