MS Chart Control 既然為 Server Control,當然支援後端事件啦
下面的範例會帶讀者們一步一步的完成 Chart 屬性設定及撰寫事件
情境:
在圖表一有本班學生成績平均,但老師想看單一學生的各科成績此時只要將滑鼠移到該學生的長條圖上,當游標呈手狀
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoO3wsHvVtzgIlLZtwPeancld8s50DKDGfgsfPiqfPW5voEYqIEx_Zw9ZtygBLcAeFD0cu5iKa7ixKre-zj3kPiKmtH5uC8MDlXBrzJBbQ9ogN0BAxKycPiyktlSj9BOvrXMT5yIA6QAiQ/s400/cpv0.png)
點下後即會出現該學生各科成績
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRI5o2kdSKJfI1ZlIKAqTKM1TtuhHRklifITr4iAlW89NbTTdXbzQM9Q_XmUyAkJ7NOaQdFUwx-KAev6k5rmaLxK-kzV5xPSrrkyFGW_NVMVwulE8lPbK6-49ON1tG7Ch5_zLr1_PxqVc4/s400/cpv0_1.png)
要完成上面的功能需要很多程式碼嗎? 一點也不
但由於要設定的屬性眾多,所以這邊坎尼抓了不少張圖作說明
下圖是所有屬性設定完成後的狀態
很神奇地,這邊只需要單單一個 Chart Control 即可
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07iq94Sdw867jGd7f2My-q6XUcB3M-jWJ61WKV16KToEMLo58-u6DAqL5T6cPpZ29KfCWapYhWaAPMjY8AD5lsBtYRdOCUy_dnxfhXyoYJx22WGfmK2D3Dw9xOBj-B7R-ngsT2IT8qH4k/s400/cpv1.png)
1.建立 ChartAreas 及 Series
這次範例所需設定屬性,會到用到 Chart 三員大將 - ChartAreas、Legends、Series![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBC8N9HVvMe9SiUZQW4mmkmS23-o0eSNeJ01zXLf9wcBjdnfGdjye-Y5yXJ4CN5HHe57pE8mnKo2bfTT4KYmyzt_bOs_QbyftgGQYXKCq8t9mq4r7TSUPNwZ14SqbeEcXzI2T3QZaLKxGv/s400/cpv7.png)
首先點開 ChartAreas 新增一個圖表區,此時會發現原本的 Chart 被往上推擠
但由於尚未設定完,所以下方會是一片空白,這片空白就是新的 ChartArea
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTL386RdPszkxRVjfzXf6vO8sEl56IYEG4UqDkgzrpIkiDGzdSyh3CWYGfMpOC944dCE2KAv2FYSaQZNqQ_xm2_Rc5TmIIsZDn_Dd8PK3oaoP9PJlzSoVNZEV5WXuIPICRHE-x0C5DLxoC/s400/cpv2.png)
接著點開 Series 集合,加入新的 Series 並重新命名
分別用來顯示「平均」「數學」「英語」「國文」等分數
剛剛有提到一開始是看到所有學生的平均分數
所以這邊把 Average 的 ChartArea 設定為 ChartArea1 (第一圖表區)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_fU6PNKZh994oN-ZNH2MJTKOkJqq54TZm3w0LpmWYQ9xq6NItobRnKuif7HrC0X4Gh8-CCAfBKMbVhY_ZBNTdhRTzQ11UjaBmITzCgDFRtDLXl-K7u7JPQ2qFzXef4dHs4MV6KiLZHSpi/s400/cpv3.png)
另外三科成績則設定為 ChartArea2 (第二圖表區)
按下確定後,應該可以看到兩個圖表區都出現資料了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68Sw-Rk_tF_VTbHwWqxdOEP9pGv1bMyougVJCfCeNICnsGmT5KsAPZ7mBJZaSkSsrTyCcfI6VIZafEoLq6trMlfnCcYvEOMOjlN8Q_HzNQmNp4MtZnZTQPuefDCw28oZu0NE_2DArG8iL/s400/cpv4.png)
2.設定 Legend
接著打開 Legends 集合,加入新的 Legend 來顯示第二圖表區的圖例這邊需要將 DockedToChartArea 屬性設定為 ChartArea2
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZHYqm3PlCpQAwclmDbHWwRQoo3HazR-YySvjqP45EGCqGhnI0CX4BiuF5iBmOOCu8Q7zLu1W8UwQkM90Tyg0pfo2Zj_pvY9OBKM8W7yyA1uNXtmLY9w_qEgLii2fcqhvgSOKCq19ql8OS/s400/cpv8.png)
由於一開始圖表區2應為不存在,但Legend2仍然會出現 (請將它們視為不同個體)
所以這邊還要將 Enabled 屬性設為 False
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07xx2uc5zuG7cVuUkQmFlauhrBwW3D_5kpHPqMWdJ5YzJ37rX4dPo-C8CidbDAhDQPh2UMaCE04dYm7mHcxE9vfpI_p7lP4uFWQxcWn7D_zqaawgwq01nTQHMHjR84Qf7ONiWQqiz34yZ/s400/cpv6.png)
此時此刻雖然畫面上出現了圖例,但圖例的名稱卻不是坎尼所想要的
於是坎尼打開了 Series 集合,設定呈現的 Legend 以及 LegendText
(是的,你沒看錯,要在 Series 裡設定 Legend 的相關顯示設定)
把 Math、English、Chinese 的 Legend 目標設定為 Legend2
並將 LegendText 分別設定成「數學」、「英文」、「國文」
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6CsXJC9743WHMOCKf0Y_T7_TY07NqmbIi-WhMLYpAoQlVyYr1Jc2cre37aIY68gkqN_O-10ALUxZ3zG_OhdCaxIaaBaDeZjdubkXkr4-CYW9i7MrF1pMtg5EsatweGE2MIh5cKOaBP0Q/s400/cpv9.png)
Average 為 Legend1顯示,LegendText 為平均分數
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi32-1oXgcLhWpJgtbw4OHA4Ovb-A9TACd8Kq3Fem40H54s1sIK_yPmRFOCgPmFecxjC4rzrjwpAqisB1hJsJSx2pbmN8ixrlgG55VZCj9nQEJNOmebSUx7D9SdTBNuJucOxlmdWasHnKv_/s400/cpv10.png)
上圖出現了個 Important 的字樣,但這屬性稍後再提
3.加入 Label 及 PostBackValue
接著加入圖表上要顯示的 Label 屬性先到 Series 的 Label,會發現旁邊有個 button,點開後可以填入 Label 上要呈現的文字
當然也有預先設定好的 keyword,點 Insert New Keyword 即可插入
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYtM95qCsiX1bZBU17RcfPbBWk7YFV7pUEHTmnj53c4SdL-O4F4cjhMSFG0JyDPCj_OWsYKUrdl9xM8miKKOwaPyXXebCPaaZL_BJ5eOncsri1HfdkYbsTj967pR08eVrNEbEiJMVuXyS/s400/cpv5.png)
圖中 keyword 為 #VALY ,代表 Y 軸的值,範例中即為各科及平均分數
當然這邊要一個一個 Series 去設定,坎尼就不放圖囉
再回到更之前的圖,這裡 PostBackValue 放了 #VALX
#VALX 指的是 X 軸值的 keyword,也就是每個學生的人名
但 PostBackValue 是什麼呢? 大家應該都猜到了,就是送回後端時所傳送的數值
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi32-1oXgcLhWpJgtbw4OHA4Ovb-A9TACd8Kq3Fem40H54s1sIK_yPmRFOCgPmFecxjC4rzrjwpAqisB1hJsJSx2pbmN8ixrlgG55VZCj9nQEJNOmebSUx7D9SdTBNuJucOxlmdWasHnKv_/s400/cpv10.png)
當然,要配合 Chart 的 Click 事件才有效果
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmkcE0FqEKwqeD3hcBfUisSAZPMmUk6dW5jVkURZwEHOGCde85Vhu6x656SB3Flhrj89OH-gKjsIt5ysyv28yAdaYxssXVGJu1amLz3e-JZAAnv8NqQH6Eq1G8BPh4gfkH4SXbW03IVI-/s400/cpv11.png)
到此經過了漫長的時間,總算是設定好 Chart 的各項屬性了
看一下 Html Code 可以發現,其實沒有想像中的落落長
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZccFFTmr0saEUPCbElLFKr89-dLfmMaZL9TvXgOjZiBtVYu970gFc1mZ1ocby13zWrjGLPS3p9QtPLJA3FPMSY0WFZWQ7ck4qGTnpkuWIp0XpZKOCIT4pIBGlVX9qoHdSxvigxRFuJ5xk/s400/cpv12.png)
4.撰寫圖表資料後端程式碼
在 Page_Load 放入取得第一圖表區資料的方法X軸為學生名字,Y軸為平均成績
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-JqrnK-aaApc5fFICCBJ7U1qBwN4uTzSeJ-lReWQiZVVd1jlW5Pmegwjqsu4KgsQS3BNx3YAgr84cQa3qOvlme0vi-1VpBIWchiKZ6qypC7Mygdq12tsiXXQCfgXHy5OkoS9kbBWmhRy/s400/cpv13.png)
資料來源,這邊用假造的資料取代資料庫
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgc6kI_5f8Oxktu5rI5x7UeriP1UG6KVNOmauDT9GJyYzF8hDK85-PIJGa7s64miNSjO2Fdu31Gzfs95iHprnZxMykPAI35RRk7dqd00kjhoKOLu-4-iQW4IgZxTCnXK5c1m4YNT6zSyln/s400/cpv14.png)
接著是最重要的 Click 事件
利用 e.PostBackValue 到資料來源抓取學生資料 (e.PostBackValue為學生名字)
將學生成績利用 Series.Points.AddXY 的方式放到圖表區2
(詳細內容可點圖放大,註解皆有說明)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhp3uQUKA-0alxH0f3L6eAGa3ZgKN9LCbkg64uLGM7ubocrpSEnx7uSMftnliYXP5cDRznfF4lI4mkUwSJ60DV2w9tqOQKkv2i9M7edT-3cxy2hBaX6SzeOIVEbeZuAlwfn4hcLUuwXPK/s400/cpv15.png)
完成上列步驟後,即可讓你的圖表和使用者互動囉
2 則留言:
抱歉~請問Demo Code
還有檔嗎?
如果有的話可否更新一下
我剛好需要類似的功能
謝謝。
hi,
抱歉,這篇的範例檔因年代久遠目前已找不到了:(
不過恰好本篇的抓圖夠多,若是照圖中的程式碼依樣畫葫蘆倒也可以完成整個功能
若是有問題歡迎再來留言發問
張貼留言