2009年7月10日

輕鬆使用MS Chart Control - 簡單設定圖表外觀

本來坎尼要寫比較進階版的圖表應用
上一篇實在太長了,所以先來篇短文休閒一下

I. 情境

校長打開電腦系統查閱一年級各班平均成績
由於2班有他喜歡的小蘿莉學生-心亞
於是校長進一步點開2班的詳細資料


校長發現心亞的國文不是很好,於是廣播要她放學後留下來...(故事請自己補完)

II. 實作

首先要設定圖表物件及基本樣式,下圖為已設定好之圖表區

要讓圖表呈現3D屬性,需要到 ChartArea 裡設定 Area3DStyle


要讓長條圖變得更好看,則是要打開 Series 的 CustomProperties 做設定
範例裡把 DrawingStyle 設成 Cylinder

要注意的是,CustomProperties 會依圖表類型不同而改變
長條圖、圓餅圖、折線圖的 CustomProperties 屬性大多不相同

下圖為完成後的 Html Code

接著要撰寫 Chart_Click 事件 (其他繫結事件之前談過很多次了,這邊省略)
這邊作了點小處理,讓圓餅圖在點下之後,會呈現分離狀態

圓餅圖的 PostBackValue 為 X 軸值,也就是班級名稱
(不曉得 PostBackValue 的人請先看
這篇)
利用迴圈把已繫結的資料點 (Points) 抓出來和 PostBackValue比對
找出使用者按下的資料點後,將其 CustomProperties 的 Exploded 屬性設為 true

設定 CustomProperties 語法為 Chart.Series[a].Points[b]["屬性名稱"] = "屬性值";
Exploded 為圓餅圖(Pie)甜甜圈圖(Doughnut)專用
目的為讓圖表呈現 pizza 型的切片狀態

接著就是利用 PostBackValue 找出班上的學生
其實用 Gridview 將清單列出也行,本篇是在講 Chart 所以就用長條圖來代替

執行後,大功告成,校長可以手指動一動就輕鬆的看到全校資料了

Chart Control 的屬性很多,有意要學好的人一定要多加練習,熟悉各項設定
MSDN Chart Control 論譠 是個很好的資源取得地,可多加利用

本次的範例檔下載

沒有留言:

Google Spreadsheet 裡用規則運算式

最近因為工作關係,遇到要用 Google Form 及 Google Sheet 所以研究了 Google Sheet 裡的一些 function 怎麼用 首先,分享一下如何在 Google Sheet 裡用規則運算 :D