[ChartControl]在 WPF 使用 Microsoft Chart Controls

[ChartControl]在 WPF 使用 Microsoft Chart Controls


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 主要的安装程序

image

Microsoft Chart Controls for Microsoft .NET Framework 3.5 语言套件 : Microsoft Chart Controls 的相关消息文字,例如错误消息,目前提供 23 种语言,其中包含繁体中文

image

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

image

3. 使用 Microsoft Chart Controls

首先,新增 WPF 应用程序

image

3.1 加入所需 DLL

将所需的 DLL 加入参考中,有以下三个

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

image

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

image

System.Windows.Forms.dll

image

将参考的DLL加到 namespace 中

    xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    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 可以帮助我们达成。

    
        

        
    

image

在 WindowsFormHost 控件中加入 Microsoft Chart Controls,就可以开始使用了

        
            
        

image

3.3 后端程序

这部分先参考 Jeff 的文章 MSChart的基本运用介绍,做出Performance Counter的界面,里面有相当棒的范例,在此绘制 CPU 曲线于 Microsoft Chart Controls,每秒更新一次。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using System.Data;
using System.Windows.Threading;
using System.Diagnostics;
using System.Windows.Forms.DataVisualization.Charting;

namespace WpfApplication1
{
    /// 
    /// Window1.xaml 的交互逻辑
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        DataTable dt = new DataTable();

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DispatcherTimer dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
            dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
            dispatcherTimer.Start();

            //设定DataTable的字段
            SetDataTable();
            //设定Chart Control
            SetChart();

            this.mainChart.DataSource = dt;
            this.mainChart.DataBind();//这时候先DataBind()是为了显示空白的图表
        }

        /// 
        /// 设定DataTable的字段
        /// 
        private void SetDataTable()
        {
            dt.Columns.Add("Processor");
            dt.Columns.Add("Memory");

            //这个动作只是为了能够在一开始显示图表,比例就是30笔
            for (int i = 0; i < 30; i++)
            {
                DataRow dr = dt.NewRow();
                dr["Processor"] = 0;
                dt.Rows.Add(dr);
            }
        }

        /// 
        /// 设定Chart Control
        /// 
        private void SetChart()
        {
            ChartArea ca = new ChartArea("ChartArea1");
            ca.Area3DStyle.Enable3D = true;//开启3D
            this.mainChart.ChartAreas.Add(ca);

            //Processor
            Legend lgCPU = new Legend("Legend1");
            lgCPU.IsTextAutoFit = true;
            lgCPU.Docking = Docking.Bottom;
            this.mainChart.Legends.Add(lgCPU);

            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";
            this.mainChart.Series.Add(seCPU);
        }

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

        //  System.Windows.Threading.DispatcherTimer.Tick handler
        //
        //  Updates the current seconds display and calls
        //  InvalidateRequerySuggested on the CommandManager to force 
        //  the Command to raise the CanExecuteChanged event.
        private void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            if (dt.Rows.Count > 30)//这动作只是保留显示30笔即可,不用一直再增加下去
            {
                dt.Rows.RemoveAt(0);
            }
            DataRow dr = dt.NewRow();

            dr["Processor"] = pcCPU.NextValue();//比例1:1

            dt.Rows.Add(dr);
            //因为DataSource在Form Load就设了,所以这里只要重新DataBind()就可以更新显示数据,没重DataBind之前,新数据不会显示上去
            this.mainChart.DataBind();

            // Forcing the CommandManager to raise the RequerySuggested event
            CommandManager.InvalidateRequerySuggested();
        }
    }
}

程序下载

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

4. 执行结果




5. 参考

DOT.Developer  Microsoft Chart Controls in a WPF application!

Jeff 随手记 MSChart的基本运用介绍,做出Performance Counter的界面