2009年8月27日

輕鬆使用MS Chart Control - 親愛的,我把餅切開啦

之前在 簡單設定圖表外觀 裡有提過
將圓餅圖裡的 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. 小結

利用關鍵字可省去不少麻煩
還有很多個關鍵字沒介紹,有興趣的人可以自行研究一下

本次的範例下載

11 則留言:

Unknown 提到...

III. 成果的那張圖,裡面的箭頭應該是你抓好圖以後另外加上去的吧? XD

坎尼 提到...

箭頭當然是另外加上去
這樣才比較容易理解圖在說什麼 :p

匿名 提到...

坎尼你好^^~~看你的學到很多,
我想請問你,為什麼我用的時候,
會一值出現
索引超出範圍。必須為非負數且小於集合的大小。
參數名稱: index 的錯誤呢?

坎尼 提到...

hello,
如果你是參照範例裡的 Code,有可能發生 index 錯誤大概有兩個地方 http://2.bp.blogspot.com/_bGOQZqQ9oEM/Spap0HV5paI/AAAAAAAAA3A/qdgQedduhyw/s1600-h/ce6.png
1. 圖中的 strValue[0] 的部分,可用中斷點確認,是否抓到的是代表 Points 的 Index
2. 圖中 strValue[2] 部分,PostbackValue 切開來的陣列個數,呼叫時是否超過該長度?

另外你可以善用中斷點,看一下錯誤點的參數為何,或許就能恍然大悟 :D

匿名 提到...

不好意思= = 我看不太懂
我講一下我的情形好了,
我是利用sqlsource去連我的資料庫
欄位如下hb_name,hb_count
hb_name裡面有兩個值 h,b
hb_count為 5,3

然後我只取你Chart_click的程式碼

series該設的屬性都有設(postbackvalue...等)

我想問的是,因為你是用程式建立資料,而
我是在資料庫建立好再做連結,不知道是不
是因為這邊的關係?


P.S:我不太懂DataPoint是什麼

如果我是用sqlsource連到以上所提欄位,
那我該如何作達到相同的效果,麻煩你解答^^

坎尼 提到...

以錯誤訊息來講絕不可能是這個原因 哈 XD

可以給我你的 PostbackValue 的設定值嗎?
我想問題應該在這才對 :)

匿名 提到...

我把部分程式碼貼上來@@,如果可以你在複製執行看看= =,因為很急需這個功能- -,但找不出問題所在
aspx檔




















aspx.cs檔
protected void Chart1_Click(object sender, ImageMapEventArgs e)
{
string[] strValue = e.PostBackValue.Split(',');

if (strValue.Length == 3)
{
//將指定 index 的 DataPoint 屬性設為 Exploded=true
Chart1.Series[0].Points[int.Parse(strValue[0])]["Exploded"] = "true";
}
}
出現的錯誤訊息就是上面我提到的索引~
麻煩你啦@@ 坎尼大~~

匿名 提到...

P.S 因為PO文 不能 打div這個標籤,
所以我刪掉了,所以程式會少一個div
你再自行加上。

匿名 提到...

補上aspx檔

asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:SDConnectionString %>"
SelectCommand="SELECT * FROM [pieuse]">

匿名 提到...

aspx檔PO不上去- -
我的postvalue就是
#INDEX,#VALX,#VALY

還是方便有MSN之類的- - 我再傳給你看檔案
或者是電子郵件@@

坎尼 提到...

你有把 strValue 抓出來看長度多少嗎?
不會設中斷點的話,就用 Response.Write(strValue.length)

另外問一下,你是用哪個 PostbackValue,Chart Control 一共有三個 PostbackValue 屬性

聯絡資訊點我的名字就可以看到信箱了 ^^

Google Spreadsheet 裡用規則運算式

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