今天是要提及的是如何動態設定圖表的資料來源 之 「使用 DataBindXY」 及 如何在每個數列上顯示其值。
廢話不多說，就直接進入本主題囉…
( 老樣子，把參考圖引入，請見下圖1. )
(※圖1. 設計外觀全貌)
※ 起緣：
通常要設定圖表的資料來源，不外乎是把我們的資料的物件指派到 Chart 控制項中的 DataSource 屬性，然後再接著使用 Chart 控制項中的 DataBind 方法來達成我們所要的目的。
例如：
protected void Page_Load(object sender, EventArgs e)
{
sttring strSQL = "Select 廠商 AS 廠商名稱, PC數 AS PC銷售數量, NB數 AS NB銷售數量 from 銷售資料表 ";
// 先行取得 web.config 中的 SQL 連線物件之資料庫連線字串。
using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["MyNorthwind"].ConnectionString))
{
SqlCommand cmd = new SqlCommand(strSQL, conn);
cmd.CommandType = CommandType.Text;
// 以 SqlCommand 物件作為圖表的資料來源
Chart1.DataSource = cmd;
// 設定數列 (Series1) 的 X 及 Y 軸
Chart1.Series["Series1"].XValueMember = "廠商名稱";
Chart1.Series["Series1"].YValueMembers = "PC銷售數量";
Chart1.Series["Series1"].LegendText = "PC銷售數量";
Chart1.Series["Series1"].Legend = "Default";
//// *** 下方為在每個數列上方是否需顯示該數數之數值 [如參考圖1. 之 (6)]
Chart1.Series["Series1"].IsValueShownAsLabel = true;
// 因有兩個 Y軸內容要顯示，所以再新增一數列
Chart1.Series.Add("Series2");
Chart1.Series["Series2"].XValueMember = "廠商名稱";
Chart1.Series["Series2"].YValueMembers = "NB銷售數量";
Chart1.Series["Series2"].LegendText = "NB銷售數量";
Chart1.Series["Series2"].Legend = "Default";
//// *** 下方為在每個數列上方是否需顯示該數數之數值 [如參考圖1. 之 (6)]
Chart1.Series["Series2"].IsValueShownAsLabel = true;
// *** 再將圖表繫結至資料來源
Chart1.DataBind();
cmd.Close();
cmd.Dispose();
}
}
(※程式碼範例1. 一般設定方式)
從上方的程式碼可看到第 12行，把 Chart 控制項的 DataSource 設定給 SqlCommand 物件，然後再到第33行，再使用 DataBind 方法達到繫結到 Chart控制項。
以上即是最一般常使用的設定圖表資料來源的方法之一。
※ DataPointCollection.DataBindXY () 之設定方式
而今日，則是要使用本範例中會使用的 DataBindXY 方法來進行動態設定圖表資料來源。
而 DataBindXY (即 DataPointCollection.DataBindXY) 方法最主要能夠將 X軸及 Y軸 分別繫結 至所指定的資料來源欄位，而其 Y軸上的值可以 繫結 一個 或 多個 欄位。
在本例中，其 Y軸上的值就繫結兩個值 ( 即 PC銷售量 及 NB銷售量 )。
此外， SqlDataReader物件、OleDBDataReader物件、DataView物件 及 其他具有 IEnumerable 介面的物件 (如： List, Array 之類) 亦可做為 DataBindXY 方法的資料繫結來源。
說了這麼多，就用下範例來實做一下吧!
--> 做法：
protected void Page_Load(object sender, EventArgs e)
{
//以下數據皆是虛擬數據
// xValues 為廠商名稱; yValues 為 NB 銷售數量; yValues2 為 PC 銷售數量
string[] xValues = { "Xcer", "AXUS", "XBM", "HX", "Dexl" };
int[] yValues = { 4123, 5511, 8805, 6243, 7521 };
int[] yValues2 = { 53500, 66210, 23010, 33950, 21590 };
// 利用 DataBindXY 分別把數列的 X 及 Y 值繫結至不同的來源
Chart1.Series["Series1"].Points.DataBindXY(xValues, yValues);
Chart1.Series["Series2"].Points.DataBindXY(xValues, yValues2);
// 因 yValue 與 yValue2 差距很大，故使用 中斷線 來表示
Chart1.ChartAreas["ChartArea1"].AxisY.ScaleBreakStyle.Enabled = true;
Chart1.ChartAreas["ChartArea1"].AxisY.ScaleBreakStyle.CollapsibleSpaceThreshold = 20;
Chart1.ChartAreas["ChartArea1"].AxisY.ScaleBreakStyle.BreakLineStyle = BreakLineStyle.Wave;
Chart1.ChartAreas["ChartArea1"].AxisY.ScaleBreakStyle.Spacing = 3;
Chart1.ChartAreas["ChartArea1"].AxisY.ScaleBreakStyle.LineColor = Color.Red;
}
(※程式碼範例2. DataBindXY方法之設定方式)
--> 解說：
1. 程式碼 6-8行，分別設定 X 軸、Y軸 (Y軸跟Y2軸) 之數值內容。
2. 程式碼 11-12行，分別是把 X值、Y值、Y2值 分別指定繫結給 數列1 (Series1) 及 數列2 (Series2)。
3. 程式碼 15-19行，即是上一篇提到的中斷線的使用設定內容。
--> 其他說明：
在 ※程式碼範例1. 中的 第20行 及 第30行 或於下方的程式碼的 第2行 或 第5行，可以知道，如果要在 Chart 中的 數列上顯示該數列之值，可透過 IsValueShownAsLabel 屬性設定為 true 即可達到此目的。
// 中間程式碼....略
Chart1.Series["Series1"].IsValueShownAsLabel = true;
// 中間程式碼....略
Chart1.Series["Serier2"].IsValueShownAsLabel = true;
(※程式碼範例3. IsValueShownAsLabel 屬性之設定)
