將圓餅圖裡的 Exploded 屬性設成 true
即會使圓餅分開,令使用者有互動的感覺
本篇還會提到善用特定關鍵字來讓互動事件更多元化
I. 設計圖表
首先,當然是先放個 Chart 到頁面上坎尼還放了個 Label,等下要顯示點擊訊息
(Chart 的樣式設計就不多談了,請自行發揮)

接著設定 Label 顯示文字
這裡用的是 #PERCENT 關鍵字,顯示 Y 值所佔全部的百分比
後面的 P1 則是精確度的 Format

LegendText 則設成 類別 : 所佔百分比

重要的 PostbackValue 則是放入了三個關鍵字
#INDEX:表示此項資料所在的索引位置
#VALX 和 #VALY 分別是 X 軸及 Y軸的值
並用「 , 」把三個值給分開

II. 後端程式碼
資料繫結部份請直接看下圖
接著撰寫 Click 事件
利用 String.Split 方法將組合而成的 PostbackValue 給切開
切開的值依序分別為:Index、X、Y
將 Index 傳入 Chart1.Series[0].Points 中以取得點選的 DataPoint
再將 CustomProperties 的 Exploded 設為 true
如此一來,被點選的資料點即是顯示為分離狀態
再將 X 及 Y 值丟到 Label 上顯示
最後再補個目前時間,大功告成!!!!

III. 成果

可以看到,圓餅圖上標籤顯示為百分比
而圖例標籤上則是名稱加百分比
點選之後,該資料點呈分離狀
Label上的訊息為資料名稱及滿意度的件數
IV. 小結
利用關鍵字可省去不少麻煩還有很多個關鍵字沒介紹,有興趣的人可以自行研究一下
本次的範例下載
















