有時候,基于對一些年份、月份的統計,需要內建多個數值名額進行分析,是以就需要把多種資料放到一個圖形裡面展現,也成為多重坐标軸,多重坐标軸可以是多個X軸,也可以是Y軸,它們的處理方式類似。本文通過一個例子對這個方面進行介紹,希望給大家有一個很好的參考。
首先我們先來看一個圖形例子,我們可以從裡面圖形的右邊看到有多個Y軸,一個Y軸代表一個名額分析,X軸為月份。
上圖是采用了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顔色,這樣友善區分。
///
///建立圖表的第二坐标系///
/// 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線産量、薪酬、人員、生成率趨勢圖