輕鬆使用MS Chart Control - 讓使用者與圖表互動

一般圖表多半只是以靜態的方式呈現
MS Chart Control 既然為 Server Control，當然支援後端事件啦
下面的範例會帶讀者們一步一步的完成 Chart 屬性設定及撰寫事件

---

情境：

在圖表一有本班學生成績平均，但老師想看單一學生的各科成績
此時只要將滑鼠移到該學生的長條圖上，當游標呈手狀

點下後即會出現該學生各科成績

要完成上面的功能需要很多程式碼嗎? 一點也不
但由於要設定的屬性眾多，所以這邊坎尼抓了不少張圖作說明

下圖是所有屬性設定完成後的狀態
很神奇地，這邊只需要單單一個 Chart Control 即可

1.建立 ChartAreas 及 Series

這次範例所需設定屬性，會到用到 Chart 三員大將 - ChartAreas、Legends、Series


首先點開 ChartAreas 新增一個圖表區，此時會發現原本的 Chart 被往上推擠
但由於尚未設定完，所以下方會是一片空白，這片空白就是新的 ChartArea


接著點開 Series 集合，加入新的 Series 並重新命名
分別用來顯示「平均」「數學」「英語」「國文」等分數

剛剛有提到一開始是看到所有學生的平均分數
所以這邊把 Average 的 ChartArea 設定為 ChartArea1 (第一圖表區)

另外三科成績則設定為 ChartArea2 (第二圖表區)
按下確定後，應該可以看到兩個圖表區都出現資料了

2.設定 Legend

接著打開 Legends 集合，加入新的 Legend 來顯示第二圖表區的圖例
這邊需要將 DockedToChartArea 屬性設定為 ChartArea2

由於一開始圖表區2應為不存在，但Legend2仍然會出現 (請將它們視為不同個體)
所以這邊還要將 Enabled 屬性設為 False

此時此刻雖然畫面上出現了圖例，但圖例的名稱卻不是坎尼所想要的
於是坎尼打開了 Series 集合，設定呈現的 Legend 以及 LegendText
(是的，你沒看錯，要在 Series 裡設定 Legend 的相關顯示設定)

把 Math、English、Chinese 的 Legend 目標設定為 Legend2
並將 LegendText 分別設定成「數學」、「英文」、「國文」

Average 為 Legend1顯示，LegendText 為平均分數

上圖出現了個 Important 的字樣，但這屬性稍後再提

3.加入 Label 及 PostBackValue

接著加入圖表上要顯示的 Label 屬性
先到 Series 的 Label，會發現旁邊有個 button，點開後可以填入 Label 上要呈現的文字
當然也有預先設定好的 keyword，點 Insert New Keyword 即可插入

圖中 keyword 為 #VALY ，代表 Y 軸的值，範例中即為各科及平均分數
當然這邊要一個一個 Series 去設定，坎尼就不放圖囉

再回到更之前的圖，這裡 PostBackValue 放了 #VALX

#VALX 指的是 X 軸值的 keyword，也就是每個學生的人名
但 PostBackValue 是什麼呢? 大家應該都猜到了，就是送回後端時所傳送的數值

當然，要配合 Chart 的 Click 事件才有效果

到此經過了漫長的時間，總算是設定好 Chart 的各項屬性了
看一下 Html Code 可以發現，其實沒有想像中的落落長

4.撰寫圖表資料後端程式碼

在 Page_Load 放入取得第一圖表區資料的方法
X軸為學生名字，Y軸為平均成績

資料來源，這邊用假造的資料取代資料庫

接著是最重要的 Click 事件
利用 e.PostBackValue 到資料來源抓取學生資料 (e.PostBackValue為學生名字)
將學生成績利用 Series.Points.AddXY 的方式放到圖表區2
(詳細內容可點圖放大，註解皆有說明)


完成上列步驟後，即可讓你的圖表和使用者互動囉