原文來源:Using Data Binding with the UltraChart,有刪節補充。
一般的UltarChart控件支持良種數據綁定的方法。第一種方法是傳統的.NET數據綁定,其通過DataSource屬性設置控件的數據源,然後調用DataBind()以綁定數據,這也是本文介紹的重點;第二種方法是藉助Series對象給控件提供數據。
一、不同圖表構成上的數據差異
UltraChart控件包含各種圖形展示,比如列狀圖(Column Chart) 、扇形圖(Scatter chart)、線狀圖(Line Chart) 等,各常見圖對圖形展示的數據要求不盡相同,具體參見表1。
圖表類型 |
數據要求 |
Column Chart |
at least one numeric column |
Bar Chart |
at least one numeric column |
Candlestick Chart |
four numeric columns for data points |
Pie Chart |
one numeric column |
Point Chart |
at least one numeric column |
Bubble Chart |
three numeric columns for 2D rendering and four numeric columns for 3D rendering |
Spline Chart |
at least one numeric column |
Cylinder Bar Chart |
at least one numeric column |
Scatter Chart |
two numeric columns for 2D rendering and three numeric columns for 3D rendering |
表一 常見圖數據展示時的最低數據要求
表一表明,如果您要生成列圖,其綁定的DataTable中至少要有一列存儲的是數值信息(int數據、double數據等),而且儘管沒做要求,DataTable中要包含一個儲存String信息的列。下列代碼符合列圖展示的數據要求(實際含義:某星期出售ActiveX控件的量)
DataTable dt = new DataTable();
dt.Columns.Add("Week", typeof(System.String));
dt.Columns.Add("ActiveX", typeof(System.Int32));
dt.Rows.Add(new object[] {"Week 1", 50});
上述單純的展示某一列的數據沒什麼意義,要使得圖表展示得有意義,需要多列數據的參與,比如我們想看下某星期出售某些產品的情況,我們只需要相應添加幾個數值列,參見下列代碼
DataTable dt = new DataTable();
dt.Columns.Add("Week", typeof(System.String));
dt.Columns.Add("ActiveX", typeof(System.Int32));
dt.Columns.Add("Java", typeof(System.Int32));
dt.Columns.Add("NET", typeof(System.Int32));
dt.Rows.Add(new object[] {"Week 1", 50, 15, 79});
上述代碼的實現效果參見圖1
圖1 某星期出售控件的情況
二、系列數據的添加
目前所代碼展現的列圖,侷限於二維層面:每種產品的銷售情況。如果我們想看三個星期來此類產品的銷售情況,又該怎麼處理呢?這意味着我們要增加個視角:星期。此種情況下我們得到數據的三維層面,這通常稱爲Series,添加多行這樣的Series數據即爲系列數據。沿用上述代碼場景,我們添加了系列數據以給我們增加新的視角。
DataTable dt = new DataTable();
dt.Columns.Add("Week", typeof(System.String));
dt.Columns.Add("ActiveX", typeof(System.Int32));
dt.Columns.Add("Java", typeof(System.Int32));
dt.Columns.Add("NET", typeof(System.Int32));
dt.Rows.Add(new object[] {"Week 1", 50, 15, 79});
dt.Rows.Add(new object[] {"Week 2", 45, 17, 72});
dt.Rows.Add(new object[] {"Week 3", 57, 12, 83});
dt.Rows.Add(new object[] {"Week 4", 55, 14, 85});
dt.Rows.Add(new object[] {"Week 5", 31, 19, 70});
綁定上述DataTable後的列圖效果參見圖2。
圖2 5星期以來出售控件的情況
圖2中X軸線下的標籤“Week {n}“用以區別彼此,其由表DataTable中第一個字符列名”Week”的值生成。
三、關鍵屬性設置
上述數據展示滿足一般的需求,但要得到些特殊的數據展示要求,沿用上述的代碼場景,如果要查看某些產品五星期的銷售情況,比如我們不需要查看控件ActiveX的銷售情況等等,我們的這些要求,大體上我們可以重新定義DataTable,得到恰當的表結構或者得到我們所需要的數據予以綁定。實際上,我們大可不必這麼大費周章,UltraChart提供了些屬性或方法,通過設置,可以很方便的達成目的,具體包括SwapRowsAndColumns屬性,UseRowLabelsColumn屬性和IncludeColumns方法。
1、SwapRowsAndColumns屬性
SwapRowsAndColumns屬性是個Boolean屬性,如字面所包含意義那樣,其通告圖表將列字段作爲行字段用。圖三中左圖顯示的每星期產品的銷售情況,右圖顯示的是每產品的周銷售情況。
圖3 SwapRowAndColumns屬性設置
爲了得到新圖效果,你僅僅只需設置SwapRowsandColumns屬性爲true: this.ultraChart1.Data.SwapRowsAndColumns=true;做上述設置後,DataTable表數據效果參見圖4
圖4 SwapRowAndColumns爲true後的DataTable效果圖
2、IncludeColumns方法
對具體DataTable表來說,UltraChart控件的IncludeColumns方法允許你設置哪些列不需要顯示,你只需要知道這些列的index號。沿用上述的代碼場景,只是我們增加一個列“Totals”,其統計每月售出產品的總數,當然其是數值列,變更後的代碼片段如下:
DataTable dt = new DataTable();
dt.Columns.Add("Week", typeof(System.String));
dt.Columns.Add("ActiveX", typeof(System.Int32));
dt.Columns.Add("Java", typeof(System.Int32));
dt.Columns.Add("NET", typeof(System.Int32));
dt.Columns.Add("Totals", typeof(System.Int32));
dt.Rows.Add(new object[] {"Week1", 50, 15, 79, 144});
dt.Rows.Add(new object[] {"Week2", 45, 17, 72, 134});
dt.Rows.Add(new object[] {"Week3", 57, 12, 83, 152});
dt.Rows.Add(new object[] {"Week4", 55, 14, 85, 154});
dt.Rows.Add(new object[] {"Week5", 31, 19, 70, 120});
然後我們添加如下代碼:this.ultraChart1.Data.IncludeColumn(4,false);其添加前後的列圖展示效果參見圖5。圖5左是Totals列存在的情況,圖5右是Totals列不包括其內的情況:
圖5 IncludeColumns方法使用前後效果圖
3、UseRowLabelsColumn 與 RowLabelsColumn屬性
UseRowLabelsColumn 與 RowLabelsColumn屬性適用於以下場景:要綁定到UltraChart的數據本身有兩個或更多的列,其都是String類型,都適合做系列數據的標籤,你會選擇哪一個來做系列數據的標籤呢?默認情況下,UltraChart會選擇DataTable表中序號在前的String類型列作爲系列數據標籤,這會滿足你的真實要求麼?碰到這樣的情況, UseRowLabelsColumn屬性會告訴圖表你想自己來定義哪列值作爲系列數據的標籤列, the RowLabelsColumn屬性則會來具體設置這個列值。仍然沿用上述場景,代碼做如下變更:
DataTable dt = new DataTable();
dt.Columns.Add("Notes",typeof(System.String));
dt.Columns.Add("ActiveX", typeof(System.Int32));
dt.Columns.Add("Java", typeof(System.Int32));
dt.Columns.Add("NET", typeof(System.Int32));
dt.Columns.Add("Week", typeof(System.String));
dt.Rows.Add(new object[] {"Convention in town. Strong sales", 50, 15, 79, "Week1"});
dt.Rows.Add(new object[] {"", 45, 17, 72, "Week2"});
dt.Rows.Add(new object[] {"", 57, 12, 83, "Week3"});
dt.Rows.Add(new object[] {"", 55, 14, 85, "Week4"});
dt.Rows.Add(new object[] {"Holiday Week, slow sales", 31, 19, 70, "Week5"});
然後我們添加如下代碼: this.ultraChart1.Data.UseRowLabelsColumn=true; this.ultraChart1.Data.RowLabelsColumn=4;
其添加前後的列圖展示效果參見圖6。圖6左是默認數據綁定效果,圖6右是設置屬性UseRowLabelsColumn 與 RowLabelsColumn後的效果
圖6 UseRowLabelsColumn 與 RowLabelsColumn設置前後效果圖
四、總結
用傳統的.NET數據綁定方法處理UltraChart數據綁定,顯得簡單,效果明顯!你只需要記住各UltraChart控件的特定數據源要求,此外瞭解並熟悉其關鍵屬性、方法:SwapRowsAndColumns屬性,UseRowLabelsColumn屬性和IncludeColumns方法。此外,碰到任何問題,歡迎訪問論壇http://forums.infragistics.com/ 。