Jeff 隨手記

 

 

　　記得之前有介紹過ZedGraph及OWC的繪製統計圖表工具,然而微軟其實也推出了另一個統計圖表工具MS Chart,這個MS Chart在自己大概玩了一下,比想像中的還好上手,但要使用MS Chart還是有個軟體門檻要符合,”.Net Framework需為 3.5 SP1”,所以之前的.Net Framework版本都無法使用,所以必需是VS2008及以上開發工具才可以使用,在使用之前,需先到微軟官軟去下載幾個Pack回來安裝才會有.

 

1. Microsoft Chart Controls for Microsoft .NET Framework 3.5

適用於 .Net Framework 3.5 SP1的ASP.NET的Windows Form圖表控制項

下載

2. Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件

適用於 ASP.NET 和 Windows Form 圖表控制項的語言套件

下載

3. Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008

這個Add-on會將它整合至Windows Form/ASP.NET 工具箱並有IntelliSense的功能.

(不知道我是沒裝好還是怎麼樣,它並沒有自動出現在我的工具箱,但手動去把它加進來還是可以用的,但不用太期待IntelliSense,它是英文的)

下載

4. Microsoft Chart Controls for .NET Framework Documentation

MS Chart的完整說明文件,也是英文的~

下載

 

　　而MS Chart在圖表控制項上有Asp.Net及Windows Form這兩種,所以後續在使用時要看仔細,因為在新增工具箱的項目時,在.Net Framework元件會看到兩個Chart,Namespace如下 :

System.Windows.Forms.DataVisualization.Charting <== 給Windows Forms使用

System.Web.UI.DataVisualization.Charting <== 給Asp.Net使用

 

　　所以有自動出現Chart的人,就不用自己去把它加到工具箱,如果沒就,自己再去將它加進來即可,只要注意到上述兩個Chart的不同,才不會用錯.

 

　　現在基本準備動作都做好了,接下來就是可以把它拿出來玩了,在用Chart Control之前,要先大概瞭解一個觀念,後續就比較好去發揮,一個Chart Control內,可以有多個ChartArea,一個Chart Area可以有多個Series,一個Series對應一個Legend.(這樣講或許不完全正確,但在剛開始,這樣比較不會搞混)

 

ChartArea : 就是顯示圖表的主要區域,當一個Chart Control裡放多個ChartArea,就可以顯示多個圖表.

Series : 儲存各指標的數值及相關屬性,比如說,一個折線圖裡有兩條折線,而折線圖就是在ChartArea設定,而那兩條折線就是Series.

Legend : 就是各Series的圖例.

 

　　有這簡單的基礎概念後,後續用一個簡單的Sample來做,或許會更容易瞭解.本想用個Random亂數來填值,但覺得這似乎又少了一點樂趣,只是個有肉體但沒有靈魂的玩偶,所以改做一個類似Performance Counter效能檢視器的東西出來.

 

當然這個Sample不打算做到完全一樣,但要做到的是即時折線圖要出來,同時要看到Processo/PhysicalDisk及Memory這三樣的折線.

 

Sample Code所跑出來的樣子會如下圖:

 

　　首先,先開一個Windows Form應用程式,把Chart從工具箱拉到Form上,再加入一個Timer,這個Timer就是定時去更新圖表資訊,所以它要Enable,Interval不要設太短,單位是毫秒,所以我設1000,所以每1秒會更新一次(還是很快,但效能檢視器預設也是1秒),設定好Timer後,後續等一下就會在Timer的Tick事件做一些事.

 

　　在Form Load時,要先做兩件事,第一:先準備好要餵給Chart當DataSource的DataTable. 第二就是設定Chart要長的樣子,以這個例子來説,這個DataTable.Columns會有以下三個.

“Processor" / "PhysicalDisk" / "Memory"

 

　　設定好DataTable的欄位,接下來就是要設定Chart,在一開頭有大概講了一下ChartArea / Legend /Series這三者,接下來要設定的,就是跟這三者離不開關係(以下是在code中一行一行去設定,但它是可以在Design的畫面上直接設定好,只是這麼做主要是更詳細的看出"做"了什麼,未來在動態產生時,會比較有概念).

 

1. ChartArea

ChartArea ca = new ChartArea("ChartArea1");

ca.Area3DStyle.Enable3D = true;

chart1.ChartAreas.Add(ca);

* name在設定Series.ChartArea要設定一樣~

Area3DStyle.Enable3D就是設定是否要以3D的方式顯示.

其中chart1還有很多設定,但先設這樣就可以,再把它加入到Chart Control的Chart1去.

2. Legend

Legend lgCPU = new Legend("Legend1");

lgCPU.IsTextAutoFit = true;

lgCPU.Docking = Docking.Bottom;

chart1.Legends.Add(lgCPU);

*name,在Series.Legend會用到.

IsTextAutoFit的功用是在設定自動調整字體大小.

Docking就是圖例所在的位置,Default沒設定會是在右邊.

最後再把這個Legend加到Chart Control裡去.

 

3. Series

Series seCPU = new Series("SeriesCPU");

seCPU.ChartArea = "ChartArea1";

seCPU.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;

seCPU.IsVisibleInLegend = true;

seCPU.Legend = "Legend1";

seCPU.LegendText = "CPU";

seCPU.YValueMembers = "Processor";

chart1.Series.Add(seCPU);

ChartArea就是第1點,我們給ca的name.

ChartType就是要以怎麼樣的統計圖表顯示,這個例子所用的是折線圖.

IsVisibleInLegend是否要顯示圖例

Legend圖例來源名稱

LegendText設定圖例的名稱

YValueMembers,就是這個資料來源的名稱,剛剛在DataTable加了三個欄位,而那三個欄位名稱就分別設到這個屬性內.

最後再把它加入到Chart Control去.

 

其它兩個也是同2,3這兩點,依序將它加入Chart Control去.

 

Chart Control設定好了,把剛剛設定好的DataTable設為DataSource.

但這還不會顯示出來,Windows Form跟ASP.NET都一樣,要在設完DataSource後,再執行DataBind()才會出現資料.

 

為了取得上述的三個資訊,就會用到PerformanceCounter這個元件.

PerformanceCounter pcCPU = new PerformanceCounter("Processor", "% Processor Time", "_Total", true);

PerformanceCounter pcDisk = new PerformanceCounter("PhysicalDisk", "Avg. Disk Queue Length", "_Total", true);

PerformanceCounter pcMemory = new PerformanceCounter("Memory", "Pages/sec", "", true);

再把取得的NextValue放到DataTable內,重新Chart.DataBind()就可以顯示出來.

 

這個Chart Control還有個貼心功能,當跑出這個統計圖表後,想要把它存起來要怎麼存?這個Control有個很方便的Method,呼叫SaveImage即可,支援的格式也很多.

 

SaveImage Overload List :

圖表來源 : Microsoft Chart Controls for .NET Framework Documentation

 

支援格式清單ChartImageFormat如下 :

圖表來源 : Microsoft Chart Controls for .NET Framework Documentation

 

目前支援的統計圖類別ChartType如下 :

圖表來源 : Microsoft Chart Controls for .NET Framework Documentation

 

　　雖然現在市面上有許多圖表工具模組可以用,但用微軟的還有個好處,它的一些用法及命名方式會走MS Style來走,所以比較容易去找到方向,坊間也比較容易找到書籍教學,Third Party也有很多不錯用的,甚至也是免費的,但有些用法真的一頭霧水,坊間也不容易找到書,不然就是東一塊,西一塊的網路資訊去拼湊起來.所以MS Chart是個不錯的選擇~

 

*Windows Form跟ASP.NET的用法差異不太大,只是個別的特別性質會有些許差異,但在這強烈建議要看Microsoft Chart Controls for .NET Framework Documentation,雖然是英文的,但裡面的說明真的很有幫助,而這個Sample也只是用到它的冰山一角,仍有很多功能可以玩,未來如果有機會應用,再看會用到什麼樣的功能,再做介紹~

 

Sample Code : MSChartDemo.rar