但上一篇實在太長了,所以先來篇短文休閒一下
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 論譠 是個很好的資源取得地,可多加利用
本次的範例檔下載
沒有留言:
張貼留言