~.:.': .NET碎碎念:'.':.~: 輕鬆學會 Chart Control - 替 chart 加上 javascript 事件

2009年10月3日

輕鬆學會 Chart Control - 替 chart 加上 javascript 事件

之前坎尼介紹過如何用 postbackvalue 來與使用者互動
但每次都要 postback 很麻煩，有些動作其實用 javascript 來做就好
今天就來教如何加入 javascript 事件

I.實戰

首先要在畫面上佈置 Chart (如下圖

接著就是撰寫 javascript function，本次範例是把訊息 alert 出來

最後是今天的主角，Series 裡的 MapAreaAttributes 屬性
這個屬性可以替每個 DataPoint (也就是每一條長條圖) 加上可支援的屬性

如 Url、Target、javascript 事件

坎尼在範例中把每個長條加上 onclick 事件
來呼叫前面所寫的 javascript function

另外再提醒一點，這個屬性也可支援 Chart Keywords
所以坎尼把 X 軸關鍵字 #VALX 傳給 javascript function
接著把DataSource繫結到 Chart 後，就趕緊來看一下成果吧!!!

點了第一個 Column，果然跳出了該店家的訊息
以上，能簡簡單單地把 javascript function 送給 Chart 執行

II. 小結

MapArea 是 Chart 中很好用的屬性~~，小平叔贏牌還要靠它呢!!!~~
而且不只資料點有，其他像 Label、Legend、Title 都有 MapAreaAttributes 屬性
所以想要簡單打造出豐富的互動式圖表已經不是遙遠的夢想

還沒學 MS Chart Control 嗎? 快點來學吧 ^^

III.本次範例下載及參考資料

2 則留言:

艾小莎提到...: 坎尼大大您好: 不好意思想請教您, 我需要使用 html 去呼叫 char.aspx ; 當我把 RenderType 設為 BinaryStreaming 後, char 的 tooltip 功能就都無法使用了..請問這個有.解嗎? 非常感謝!!; 4/5/10 17:51
坎尼提到...: hi 艾小莎,
基本上當 RenderType 設為 BinaryStream 時，都是為了給 img 的標籤使用，一些互動的功能都會被取消掉

若是需要在純 html 裡使用 chart 的互動功能，建議可以用 iframe 來做，把含有可互動 chart 的頁面嵌入 html 之中 ^^; 4/5/10 22:36