在工作中經常會遇到需要將一組資料繪製成曲線圖的情況，最簡單的方法是將資料匯入Excel，然後使用繪圖功能手動生成曲線圖。但是如果基礎資料頻繁更改，則手動建立圖形可能會變得枯燥乏味。本篇將利用DynamicDataDisplay  在WPF 中動態模擬CPU 使用率圖表，實現動態生成曲線圖。

     新建專案將DynamicDataDisplay.dll 載入到References 中，開啟MainWindow.xaml 新增名稱空間xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"。通過<d3:ChartPlotter> 建立一個圖表框架，在其中新增兩條整型座標軸，X軸：<d3:HorizontalIntegerAxis>，Y軸：<d3:VerticalIntegerAxis>。<d3:Header> 用來設定圖表名稱，<d3:VerticalAxisTitle> 用來設定Y軸名稱。

<Window x:Class="WpfPerformance.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
        Title="CPU Performance" Loaded="Window_Loaded" Height="350" 
 
Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="CPU Usage" Margin="20,10,0,0"
                       
 
FontSize="15" FontWeight="Bold"/>
            <TextBlock x:Name="cpuUsageText" Margin="10,10,0,0"
                       FontSize="15"/>
        </StackPanel>
        <d3:ChartPlotter x:Name="plotter" Margin="10,10,20,10" Grid.Row="1">
            <d3:ChartPlotter.VerticalAxis>
                <d3:VerticalIntegerAxis />
            </d3:ChartPlotter.VerticalAxis>

            <d3:ChartPlotter.HorizontalAxis>
                <d3:HorizontalIntegerAxis />
            </d3:ChartPlotter.HorizontalAxis>

            <d3:Header Content="CPU Performance History"/>
            <d3:VerticalAxisTitle Content="Percentage"/>
        </d3:ChartPlotter>
    </Grid>
</Window>

      接下來工作需要通過C#每秒獲取一次CPU使用率，並將這些資料生成座標點（Point）繪製在圖表中。 以下是MainWindow.xaml.cs 部分的程式碼內容。

using System;
using System.Diagnostics;
using System.Windows;
using System.Windows.Media;
using System.Windows.Threading;
using Microsoft.Research.DynamicDataDisplay;
using Microsoft.Research.DynamicDataDisplay.DataSources;

namespace WpfPerformance
{
    public partial class MainWindow : Window
    {
        private ObservableDataSource<Point> dataSource = new ObservableDataSource<Point>();
        private PerformanceCounter cpuPerformance = new PerformanceCounter();
        private DispatcherTimer timer = new DispatcherTimer();
        private int i = 0;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void AnimatedPlot(object sender, EventArgs e)
        {
            cpuPerformance.CategoryName = "Processor";
            cpuPerformance.CounterName = "% Processor Time";
            cpuPerformance.InstanceName = "_Total";

            double x = i;
            double y = cpuPerformance.NextValue();

            Point point = new Point(x, y);
            dataSource.AppendAsync(base.Dispatcher, point);

            cpuUsageText.Text = String.Format("{0:0}%", y);
            i++;
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            plotter.AddLineGraph(dataSource, Colors.Green, 2, "Percentage");
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.Tick += new EventHandler(AnimatedPlot);
            timer.IsEnabled = true;
            plotter.Viewport.FitToView();
        }
    }
}

     通過ObservableDataSource<Point> 動態儲存圖表座標點，PerformanceCounter 獲取CPU使用率數值，DispatcherTimer 計時器在規定間隔進行取數操作，整型i 作為CPU使用率座標點的X軸數值。

private ObservableDataSource<Point> dataSource = new ObservableDataSource<Point>();
private PerformanceCounter cpuPerformance = new PerformanceCounter();
private DispatcherTimer timer = new DispatcherTimer();
private int i = 0;

     AnimatedPlot 事件用於構造座標點，通過設定cpuPerformance 相關引數，並使用NextValue() 方法獲取當前CPU使用率資料作為Y值，整型i 作為X值。將X、Y值構造為座標點（Point），並通過非同步方式儲存在dataSource 中。

private void AnimatedPlot(object sender, EventArgs e)
{
    cpuPerformance.CategoryName = "Processor";
    cpuPerformance.CounterName = "% Processor Time";
    cpuPerformance.InstanceName = "_Total";

    double x = i;
    double y = cpuPerformance.NextValue();

    Point point = new Point(x, y);
    dataSource.AppendAsync(base.Dispatcher, point);

    cpuUsageText.Text = String.Format("{0:0}%", y);
    i++;
}

     最後通過Window_Loaded 將事件載入到<Window> 中，AddLineGraph 方法將dataSource 中的座標點繪製到圖表中，曲線顏色定義為綠色，粗細設定為2，曲線名稱為"Percentage"。設定計時器間隔為1秒，連續執行AnimatedPlot 事件實時繪製新座標點。

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    plotter.AddLineGraph(dataSource, Colors.Green, 2, "Percentage");
    timer.Interval = TimeSpan.FromSeconds(1);
    timer.Tick += new EventHandler(AnimatedPlot);
    timer.IsEnabled = true;
    plotter.Viewport.FitToView();
}

滑鼠右鍵可將圖表拷貝到其他文件：

動態演示

滑鼠左鍵拖動圖表瀏覽任意位置曲線資料，滑鼠中鍵可以縮放顯示曲線圖。

原始碼下載