在WPF中使用Microsoft Chart Controls | MSchart | wpf中怎么加chart控件

原链接 http://www.dotblogs.com.tw/chou/archive/2009/10/03/10902.aspx

感谢作者

1. 前言

Microsoft Chart Controls 是微軟提供，適用於 .NET Framework 3.5 SP1 的 ASP.NET 和 Windows Form 圖表控制項，由於已經有蠻多文章介紹在 ASP.NET 與 Windows Forms 使用 Microsoft Chart Controls，而本文想要來點不一樣的，讓大家知道 Microsoft Chart Controls 也可以在 WPF 使用。

2. 前置作業

想要使用 Microsoft Chart Controls，首先當然必須上微軟網站下載與安裝，而關於 Microsoft Chart Controls 會有一些相關的下載

Microsoft Chart Controls for Microsoft .NET Framework 3.5 : Microsoft Chart Controls 主要的安裝程式

Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件 : Microsoft Chart Controls 的相關訊息文字，例如錯誤訊息，目前提供 23 種語言，其中包含繁體中文

Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 : 提供 Microsoft Chart Controls 與 Visual Studio 2008 工具箱整合，以及 Microsoft Chart Controls 的 IntelliSense

3. 使用 Microsoft Chart Controls

首先，新增 WPF 應用程式

3.1 加入所需 DLL

將所需的 DLL 加入參考中，有以下三個

C:Program FilesReference AssembliesMicrosoftFrameworkv3.0WindowsFormsIntegration.dll : Windows Presentation Foundation WindowsForms Integration Library

C:Program FilesMicrosoft Chart ControlsAssembliesSystem.Windows.Forms.DataVisualization.dll : Microsoft Chart Controls DLL

System.Windows.Forms.dll

將參考的DLL加到 namespace 中

view source

print?

1
xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

2
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

3
xmlns:CHR="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"

3.2 撰寫 XAML，將 Microsoft Chart Contorls 加入

加入 WindowsFormHost 控制項，原因是 WPF 並沒有辦法直接執行 Windows Forms 的控制項，Forms integration dll 與 WindowsFormHost 可以幫助我們達成。

view source

print?

1
<Grid>

2
<wfi:WindowsFormsHost x:Name="mainFGrid" >

3
</wfi:WindowsFormsHost>

4
</Grid>

在 WindowsFormHost 控制項中加入 Microsoft Chart Controls，就可以開始使用了

view source

print?

1
<wfi:WindowsFormsHost x:Name="mainFGrid" >

2
<CHR:Chart x:Name="mainChart" />

3
</wfi:WindowsFormsHost>

3.3 後端程式碼

這部份先參考 Jeff 的文章 MSChart的基本運用介紹,做出Performance Counter的介面，裡面有相當棒的範例，在此繪製 CPU 曲線於 Microsoft Chart Controls，每秒更新一次。

（因繁体乱码，去除部分注释，请原作者谅解）

1:  using System;  2:  using System.Collections.Generic;  3:  using System.Linq;  4:  using System.Text;  5:  using System.Windows;  6:  using System.Windows.Controls;  7:  using System.Windows.Data;  8:  using System.Windows.Documents;  9:  using System.Windows.Input; 10:  using System.Windows.Media; 11:  using System.Windows.Media.Imaging; 12:  using System.Windows.Navigation; 13:  using System.Windows.Shapes; 14:    15:  using System.Data; 16:  using System.Windows.Threading; 17:  using System.Diagnostics; 18:  using System.Windows.Forms.DataVisualization.Charting; 19:    20:  namespace WpfApplication1 21:  { 22:      /// <summary> 23:      ///  24:      /// </summary> 25:      public partial class Window1 : Window 26:      { 27:          public Window1() 28:          { 29:              InitializeComponent(); 30:          } 31:    32:          DataTable dt = new DataTable(); 33:    34:          private void Window_Loaded(object sender, RoutedEventArgs e) 35:          { 36:              DispatcherTimer dispatcherTimer = new DispatcherTimer(); 37:              dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); 38:              dispatcherTimer.Interval = new TimeSpan(0, 0, 1); 39:              dispatcherTimer.Start(); 40:    41:               42:              SetDataTable(); 43:               44:              SetChart(); 45:    46:              this.mainChart.DataSource = dt; 47:              this.mainChart.DataBind(); 48:          } 49:    50:          /// <summary> 51:          ///  52:          /// </summary> 53:          private void SetDataTable() 54:          { 55:              dt.Columns.Add("Processor"); 56:              dt.Columns.Add("Memory"); 57:    58:              // 59:              for (int i = 0; i < 30; i++) 60:              { 61:                  DataRow dr = dt.NewRow(); 62:                  dr["Processor"] = 0; 63:                  dt.Rows.Add(dr); 64:              } 65:          } 66:    67:          /// <summary> 68:          /// 69:          /// </summary> 70:          private void SetChart() 71:          { 72:              ChartArea ca = new ChartArea("ChartArea1"); 73:              ca.Area3DStyle.Enable3D = true; 74:              this.mainChart.ChartAreas.Add(ca); 75:    76:              //Processor 77:              Legend lgCPU = new Legend("Legend1"); 78:              lgCPU.IsTextAutoFit = true; 79:              lgCPU.Docking = Docking.Bottom; 80:              this.mainChart.Legends.Add(lgCPU); 81:    82:              Series seCPU = new Series("SeriesCPU"); 83:              seCPU.ChartArea = "ChartArea1"; 84:              seCPU.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line; 85:              seCPU.IsVisibleInLegend = true; 86:              seCPU.Legend = "Legend1"; 87:              seCPU.LegendText = "CPU"; 88:              seCPU.YValueMembers = "Processor"; 89:              this.mainChart.Series.Add(seCPU); 90:          } 91:    92:          PerformanceCounter pcCPU = new PerformanceCounter("Processor", "% Processor Time", "_Total", true); 93:    94:          //  System.Windows.Threading.DispatcherTimer.Tick handler 95:          // 96:          //  Updates the current seconds display and calls 97:          //  InvalidateRequerySuggested on the CommandManager to force  98:          //  the Command to raise the CanExecuteChanged event. 99:          private void dispatcherTimer_Tick(object sender, EventArgs e)100:          {101:              if (dt.Rows.Count > 30)102:              {103:                  dt.Rows.RemoveAt(0);104:              }105:              DataRow dr = dt.NewRow();106:   107:              dr["Processor"] = pcCPU.NextValue();//比è例y1:1108:  109:              dt.Rows.Add(dr);110:             111:              this.mainChart.DataBind();112:   113:              // Forcing the CommandManager to raise the RequerySuggested event114:              CommandManager.InvalidateRequerySuggested();115:          }116:      }117:  }

程式碼下載

[ChartControl]在 WPF 使用 Microsoft Chart Controls.rar

4. 執行結果

5. 參考

DOT.Developer Microsoft Chart Controls in a WPF application!

Jeff 隨手記 MSChart的基本運用介紹,做出Performance Counter的介面