天天看點

dexpress 流程圖_DevExpress控件使用之多重坐标圖形的繪制

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

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

dexpress 流程圖_DevExpress控件使用之多重坐标圖形的繪制

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

1、準備資料并綁定

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

下面為了測試準備了幾項資料,綁定在下面清單GridControl對象裡面,然後把資料綁定到圖表對象裡面,如下代碼。具體處理的時候,我們從資料庫擷取對應名額的資料即可實作動态綁定。

///

///準備資料内容///

///

privateDataTable CreateData()

{

DataTable dt= newDataTable();

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

}private void Form1_Load(objectsender, EventArgs e)

{

DataTable dt=CreateData();this.gridControl1.DataSource =dt;

CreateChart(dt);

}

2、建立圖表圖形

private voidCreateChart(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);#endregionList list = new List() { 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月”内容轉換為日期類型,顯示不恰當的内容。

///

///根據資料建立一個圖形展現///

/// 圖形标題

/// 圖形類型

/// 資料DataTable

/// 圖形資料的行序号

///

private Series CreateSeries(string caption, ViewType viewType, DataTable dt, introwIndex)

{

Series series= newSeries(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(newSeriesPoint(argument, value));

}//必須設定ArgumentScaleType的類型,否則顯示會轉換為日期格式,導緻不是希望的格式顯示//也就是說,顯示字元串的參數,必須設定類型為ScaleType.Qualitative

series.ArgumentScaleType =ScaleType.Qualitative;

series.LabelsVisibility= DevExpress.Utils.DefaultBoolean.True;//顯示标注标簽

returnseries;

}

CreateAxisY用來建立一個多重坐标軸的代碼如下所示,注意這裡多重坐标,使用了和Series一直的View.Color顔色,這樣友善區分。

dexpress 流程圖_DevExpress控件使用之多重坐标圖形的繪制

///

///建立圖表的第二坐标系///

/// Series對象

///

privateSecondaryAxisY CreateAxisY(Series series)

{

SecondaryAxisY myAxis= newSecondaryAxisY(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;returnmyAxis;

}

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

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

D線産量、薪酬、人員、生成率趨勢圖