【第164期 May 5, 2011】
 

研發新視界

MSChart 基本介面運用介紹

作者/陳冠寧

[發表日期:2011/4/29]



前言

微軟在收購了 Dundas 這家優秀的圖表元件公司後,日前釋出了功能相當強大,而且完全免費的圖表元件,名為「Microsoft Chart Controls」。

過去要在 ASP.NET 或 Windows Form 中繪製圖表,可能要花錢買其它公司的元件,或用微軟的繪圖函式庫自己撰碼處理。但現在透過這元件,以及微軟提供免費下載的上百個現成範例 (包裝成單一個 project)、免費的技術檔,可讓您的專案及報表,輕鬆套用各種功能強大的 2D、3D、即時變化的動態圖表;且透過 AJAX,可讓圖表及裡面的資料,每秒鐘都持續更新;使用者透過流覽器,可和圖表做各種互動設定。

此圖表元件,可套用於 ASP.NET 和 Windows Forms 程式,並可讓程式開發人員完全依專案需求做客制化。但這套組件只能在新一代的 .NET 3.5 SP1 / VS 2008 SP1 中使用。只要下載官方範例壓縮檔後,直接用 VS 2008或 VS 2010開啟網站,即可看到現成的炫麗圖表範例。

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控制群組成


初步研究整個圖形控制項主要由以下幾個部份組成:

1.Annotations : 圖形的注解集合;Annotations注解集合是一個對圖形的一些注解物件的集合,所謂注解物件,類似於對某個點的詳細或者批註的說明,在圖片上實現各個節點的關鍵資訊,通過瞭解各個注解物件的屬性,可以方便的設置注解物件的放置位置、呈現的顏色、大小、文字內容樣式等常見的屬性。如下圖一所示:


《圖一》Annotations 範例圖


2.ChartArea : 圖表的區域集合;ChartAreas可以理解為是一個圖表的繪圖區,當一個Chart Control裡放多個ChartArea就可以顯示多個圖表,對於每一個繪圖區域,你可以設置各自的屬性,如:X,Y軸屬性、背景顏色等。如下圖二所示:


《圖二》ChartArea分為垂直上下2格圖表區域


3.Series : 圖形集合;Series即是匯入資料實際呈現的圖形形狀,可以往ChartArea裡面添加多個Series,每一個圖表可以有自己的繪製形狀、樣式、獨立的資料等。

需要注意的是,每一個圖表,你可以指定它的繪製區域(例如:Series1 內有一個屬性為ChartArea,指定給已建立的ChartArea1),讓此圖表呈現在ChartArea1這個繪圖區域,也可以讓幾個Series在同一個繪圖區域疊加。

4.Legend : Series的圖例集合

Legends是一個圖例的集合,即標注圖形中各個線條或顏色的含義,一個圖片可以包含多個圖例說明,可以建立多個圖例,分別說明各個繪圖區域的資訊。如下圖三所示:


《圖三》Chart中常見的圖例文字說明


5.Title : 圖形的標題集合;Titles根據字面含義即可以理解,是Series的標題配置,同樣可以添加多個標題,以及設置標題的樣式及文字、位置等屬性。

基本上一個Chart Control內,可以有多個ChartArea,一個Chart Area可以有多個Series,一個Series對應一個Legend。

在Form Load時,要先做兩件事,第一就是設定Series要長的樣子第二準備好要餵給Chart當DataSource的DataTable。如下圖四所示:


《圖四》確認相對應的DataTable是否已建立好連結


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

Chart控制項由Series(資料列)和ChartArea(成圖區域)兩部分組成。這兩部分都是可以有一個或者多個的,例如當一個“圖表”中要畫多條曲線的時候我們就可能會用到多個“資料列”,並且把多個資料列的ChartArea屬性設置為指定的“成圖區域”。當我們想在一個“圖表”中分區域多形式的顯示一種或多種資料的時候,我們就需要多個ChartArea了。

對於簡單的圖表,我們只用預設的樣式就足夠了,所以可以不用對ChartArea進行太多的修改,只要在“資料列”中添加一定數量的點就可以成圖了,相當簡單。
下載範例程式後,運行了一下,非常的強大,可以支援各種各樣的圖形顯示,常見的:點狀圖、圓形圖、柱狀圖、曲線圖、面積圖、排列圖等等,同時也支援3D樣式的圖表顯示,不過我覺得最有用的功能還是支援圖形上各個點的屬性操作,它可以定義圖形上各個點、標籤、圖形的提示資訊(Tooltip)以及超連結、Javascript動作等,而不是像其它圖形類庫僅生成一幅圖片而已,通過這些,加上微軟自己的Ajax框架,可以建立一個可以互動的圖形統計報表了。下圖五為3D範例圖示:


《圖五》3D範例圖示


Chart屬性設定


《圖六》Chart基本屬性設定和位置說明


常用屬性介紹

ChartAreas:增加多個繪圖區域,每個繪圖區域包含獨立的圖表組、資料來源,用於多個圖表類型在一個繪圖區不相容時。

InnerPlotPosition:圖表在繪圖區內的位置屬性。

Legends:圖例說明。

Series:最重要的屬性,圖表集合,就是最終看到的圓形圖、柱狀圖、線圖、點圖等構成的集合,可以將多種相互相容的類型放在一個繪圖區域內,形成複合圖。

LabelFormat:資料點標籤文字格式。

ChartType:圖表類型(柱形、餅形、線形、點形等)。


《圖七》左邊區域為部分物件成員,右邊區域則可設定物件屬性


較特殊屬性介紹

YValues : 一般情況下只用一個YValue就可以生成圖表了,但是在某些情況下要兩個甚至多個值,多個值是只有當圖表類型為bubble, candlestick和stock時才有意義。

IsXValueIndexed : 數列中的所有資料點都使用循序的索引,如果這個屬性為 true 資料點將循序繪製,不論其相關聯的 X 值。 這表示不會「遺漏」資料點。例如,假設連續的三 (3) 個資料點具有 1、2 和 4 等 X ?。 如果這個屬性之前是 false,標示「3」的 X 軸位置會缺少資料點。 但是,如果這個屬性設成 true,這三個資料點會循序繪製在點 1、 2 和 4 上,不會遺失任何資料點。 標示為 "3" 的 X 軸位置將不會出現在圖表上。在某間隔 (如週末) 將不會有資料,但不希望遺失此間隔的資料點時,這會很有用。

IsLabelAutoFit : 判斷座標軸標籤是否已自動調整大小。

IsUserEnabled、IsUserSelection : 旗標可啟用或停用資料指標使用者介面。

常用事件

Series1.Points.DataBind()
  綁定資料點集合,如果要在一個MSChart控制項的一個繪圖區(ChartArea)內添加多個不同資料來源的圖表,就用這個主動綁定資料集合的方法。可以將表中指定欄位的值綁定到指定的坐標軸上。
MSChart1.DataBind()

範例實作運用

首先,先開一個Windows Form應用程式,把Chart從工具箱拉到Form上,如下圖八。一開始時通常為較簡易的Column條狀圖或line折線圖,如下圖九。


《圖八》從工具箱找出Chart元件選項拖拉至Form上



《圖九》初始簡易拖拉Chart圖示


接著在工具設定選項中,主要將ChartArea、Series、Legend三個地方的所需屬性設定完成。

最後在code中,將資料序列對應Series的點座標輸入(x,y),如: chart1.Series["Series1"].Points.AddXY(DateTime.Parse("1/1/2011"), 10);

於此特別提到一點,這裡的Y值可以輸入一個集合(例: Y可輸入平均值、數量等等) ,如:

object[] ymembers = new object[3]{"X" , 100 , 25.5 };
chart1.Series["Series1"].Points.AddXY(DateTime.Parse("1/1/2011"), ymembers);

如果沒有特別指定Y軸為何,ymembers[0]即為預設值。

如果在前三個步驟有分別將拉取圖件、屬性設定、資料欄位輸入作好,最後即可輕易得到一張屬於自己設計的圖表。

下圖十為隨時間起伏的3條折線圖


《圖十》三條噪音測試平均分布圖例,縱軸單位為分貝,橫軸單位為時間分布


結論

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

Windows Form跟ASP.NET的用法差異不太大,只是個別的特別性質會有些許差異,但在這強烈建議要看Microsoft Chart Controls for .NET Framework Documentation,未來如果有機會應用,再看會用到什麼樣的功能,再做介紹。

參考資料

  • http://dotnetmis91.blogspot.com/2009/05/ms-chart-control.html

  • http://msdn.microsoft.com/zh-tw/library/microsoft.office.tools.excel.chart_members(v=vs.80).aspx

  • http://calos-tw.blogspot.com/2008/08/chart.html

  • http://www.fengfly.com/plus/view-170654-1.html

  • http://tech.e800.com.cn/articles/2009/623/1245721773822_1.html

  • http://www.oeedu.com/contents/1237/9714.html

  • http://fan.renren.it/a/bianchengyuyan/ASP/20101023/55479.html

  • http://terudio.blogspot.com/2009/02/microsoft-chart-control-for-not-net.html


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

    以下列出一些相關的連結供各位參考、下載:(取自 Microsoft Chart Control)

  • Microsoft Chart Controls for Microsoft .NET Framework 3.5
    包含 ASP.NET 和 Windows Form 圖表控制項的組件。


  • Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件 (繁體中文)


  • Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
    安裝後可以方便的在 VS2008 SP1 中拖曳控制項與使用 IntelliSense (含 ASP.NET 與 WinForm )


  • Microsoft Chart Controls for .NET Framework Documentation
    此文件包括安裝說明與完整的 API 說明文件。


  • Samples Environment for Microsoft Chart Controls
    這裡提供超過 200 個範例,讓你快速上手如何開發!



  • 《圖十一》範例附圖示、功能屬性設定和操作流程說明