但上一篇實在太長了,所以先來篇短文休閒一下
I. 情境
校長打開電腦系統查閱一年級各班平均成績由於2班有他喜歡的
於是校長進一步點開2班的詳細資料
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxj2kqrNl1IqOeD8JPOhcMIuXZNcRYMgVQNZu2BbjfXwOKqa1jgXDlusF2lQnHYZ5faVxHaKUvx14riGe3_4GbdUfnKbfbKig2Vbm49RsJYWExyAwDolhHPJOHA8oPIDQBAl40BlVGB80/s400/cpva4.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAbhFmeSAvRCmTtk-PfyZjQZHb_qtb3enfTWM5Uc9k_S86NE4xk33JGas7K99xpcnq_xKwf67Kb3mtcYT-dr6U-vcXHqQGRxwllSzeUrplCigMot-_Zmk8Qf8Q0FHKFjjh-hJm7nCcxdh/s400/cpva5.png)
II. 實作
首先要設定圖表物件及基本樣式,下圖為已設定好之圖表區![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYrrnXVHrpHauzsCGj9lSebHizE7cWK1T6Nw_0ISq98IeHcnT2r9NcgPW6fR2RMSO8SFvhy3ouOzMdYAe80181vob9-bO15njlPIdrr4ELM5DZsM78SmZO8n410rGp8haopLJdT0_ERSy/s400/cpva1.png)
要讓圖表呈現3D屬性,需要到 ChartArea 裡設定 Area3DStyle
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj3Ey4uXlZGsjG_7lXjWGkngaVyEz56vEtLBc6bjFBpbyWQgyhccL07nSfa6WBpGKGaUgorZgdjX2UxeN60ZY9G2Nst8SVVmK7BocX95LOsts5sDF5_pqENyD91p1UxzLqEPEBzmwXcGj4/s400/cpva6.png)
要讓長條圖變得更好看,則是要打開 Series 的 CustomProperties 做設定
範例裡把 DrawingStyle 設成 Cylinder
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzX5Eff-L2g6vaWH66CiIru0C0pagz6RsLMsyXciAi8X5hAF0k4AabpY6Vdut3mQdfyydWbMbJNpxbGyI-3I5BLTwaTfJPl-UInI4Eo6qGZmaqfVXiCl3Wz_6bi1LY7C9ae4B94GGRKZdM/s400/cpva7.png)
要注意的是,CustomProperties 會依圖表類型不同而改變
長條圖、圓餅圖、折線圖的 CustomProperties 屬性大多不相同
下圖為完成後的 Html Code
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBOv-WmQuwqzrOoe5oKj_2_gKJDDm6tIQXSgvA5-r11v6oFsIH0_0wX1RkapusGAQ9MKz2sfjHWRba_zqFDrSYOU9veSZ5gvGzSya0ucpe6zVuTnN7KIPIZzG-UDVh97JPlcXkaVtOj7v/s400/cpva2.png)
接著要撰寫 Chart_Click 事件 (其他繫結事件之前談過很多次了,這邊省略)
這邊作了點小處理,讓圓餅圖在點下之後,會呈現分離狀態
圓餅圖的 PostBackValue 為 X 軸值,也就是班級名稱
(不曉得 PostBackValue 的人請先看這篇)
利用迴圈把已繫結的資料點 (Points) 抓出來和 PostBackValue比對
找出使用者按下的資料點後,將其 CustomProperties 的 Exploded 屬性設為 true
設定 CustomProperties 語法為 Chart.Series[a].Points[b]["屬性名稱"] = "屬性值";
Exploded 為圓餅圖(Pie)和甜甜圈圖(Doughnut)專用
目的為讓圖表呈現 pizza 型的切片狀態
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8550rClv-tIEdA7r6uP4Q4EHz2qXQUt99Z6_zpoxXhIk8DlgVT8iOfEhEqVI-HxMrFNgnkjk-2K4c4jHrMhoU_d2i-hP1twWUro7tfL7Sh1DJTSUW36SF648gm0dRxHvDAJ8FMG8Syo0u/s400/cpva3.png)
接著就是利用 PostBackValue 找出班上的學生
其實用 Gridview 將清單列出也行,本篇是在講 Chart 所以就用長條圖來代替
執行後,大功告成,校長可以手指動一動就輕鬆的看到全校資料了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAbhFmeSAvRCmTtk-PfyZjQZHb_qtb3enfTWM5Uc9k_S86NE4xk33JGas7K99xpcnq_xKwf67Kb3mtcYT-dr6U-vcXHqQGRxwllSzeUrplCigMot-_Zmk8Qf8Q0FHKFjjh-hJm7nCcxdh/s400/cpva5.png)
Chart Control 的屬性很多,有意要學好的人一定要多加練習,熟悉各項設定
MSDN Chart Control 論譠 是個很好的資源取得地,可多加利用
本次的範例檔下載
沒有留言:
張貼留言