另外看到很多blog都說摸索有點瓶頸
坎尼也不敢任意踏入無止盡的研究迴圈中...
最近有遇到要畫統計圖表的功能
加上 Tech. Days 聽了章立民老師的 ChartControl 線上研討會
於是放棄以前 OWC 的方式，用新的 Chart Control 來看看
元件安裝請參考保哥的 介紹好用元件：Microsoft Chart Controls for .NET 3.5
sample 檔一定要下載回來看，有很多 code 可參考
下圖是坎尼做的 sample -- 學生成績表
此表的特性為：
- Y軸為自訂Label
- X軸的學生名稱為直向
- 長條圖上有分數顯示
- 低於60分的人以紅色顯示成績條
這個表怎麼做的呢?
請先在頁面上放置個 Chart Control (如下圖)
接著用屬性 Panel 設定圖層的一些資料
但 Chart Control 可以用的屬性實在太多太雜了
坎尼也研究了半天才了解一些實用的屬性在哪設定
下圖為已經設定好的屬性 source code，下面會有解釋
Label 表示長條上要顯示的資料，#VAL表Y軸的值 (這邊是成績)
AxisY 為Y軸屬性，坎尼設定了 Maximum 為 100，表示最多顯示到 100
此項屬性不設定則 .NET 會自動控制 Y 軸的顯示值
接著是 CustomLabels，這邊自訂了 Y軸的標籤
這裡的重點是 ToPosition 屬性要設定，否則自訂標籤不會出現
AxisX 就是X軸屬性啦
這邊設定了 Interval=1，表示X軸上的所有標籤都會顯示
(預設為 Auto .NET會自動分配區間給 X 軸)
但 Label 的顯示會是橫向，自定義區間為1會造成標籤都擠在一起
待會兒坎尼會在後端的Code做點小處理
再來就是很重要的 DataBind 事件了
其實在 MS Chart Control 的論譠上有講到
要用 Chart 的第一步就是先 DataBind，看資料是否能正常顯示
再去設定顯示的樣式
坎尼為了容易理解，這裡就反過來講
可以看到 Chart 的 DataBind 方式不太一樣
給了第一個參數為 DataSource 接著是 x 及 y 軸的 DataMember
其實它也是可以支援
Chart1.DataSource = dt;
Chart1.DataBind();
DataBind之後就來處理顯示的樣式吧
剛剛有提到字會重疊在一起
於是坎尼把 X 軸的 Label 取出來加工，讓它變成直向
然後把 Y值小於60的長條變成紅色
實際畫面會是第一張圖所顯示的那樣
其實 Code 不會寫很多
比較容易卡住的是一些前端屬性的設定
以後有空坎尼也來寫一下 Chart Control 的應用吧
大家有興趣可以上 MS Chart Control 的討論區
話說 snipping tool 的 highlighter 很好用
圖片中的黃底色都是用它來畫的
沒有留言:
張貼留言