圖表資料來源之動態設定方法 (DataBind 相關方法系列) - DataBindXY 方法

今天是要提及的是如何動態設定圖表的資料來源 之 「使用 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 屬性之設定)