在工作中經(jīng)常會遇到需要將一組數(shù)據(jù)繪制成曲線圖的情況，最簡單的方法是將數(shù)據(jù)導(dǎo)入Excel，然后使用繪圖功能手動生成曲線圖。但是如果基礎(chǔ)數(shù)據(jù)頻繁更改，則手動創(chuàng)建圖形可能會變得枯燥乏味。本篇將利用DynamicDataDisplay 在WPF 中動態(tài)模擬CPU 使用率圖表，實(shí)現(xiàn)動態(tài)生成曲線圖。

新建項(xiàng)目將DynamicDataDisplay.dll 加載到References 中，打開MainWindow.xaml 添加命名空間xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"。通過<d3:ChartPlotter> 創(chuàng)建一個(gè)圖表框架，在其中添加兩條整型坐標(biāo)軸，X軸：<d3:HorizontalIntegerAxis>，Y軸：<d3:VerticalIntegerAxis>。<d3:Header> 用來設(shè)置圖表名稱，<d3:VerticalAxisTitle> 用來設(shè)置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>

XAML

　　接下來工作需要通過C#每秒獲取一次CPU使用率，并將這些數(shù)據(jù)生成坐標(biāo)點(diǎn)（Point）繪制在圖表中。以下是MainWindow.xaml.cs 部分的代碼內(nèi)容。

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> 動態(tài)存儲圖表坐標(biāo)點(diǎn)，PerformanceCounter 獲取CPU使用率數(shù)值，DispatcherTimer 計(jì)時(shí)器在規(guī)定間隔進(jìn)行取數(shù)操作，整型i 作為CPU使用率坐標(biāo)點(diǎn)的X軸數(shù)值。

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

AnimatedPlot 事件用于構(gòu)造坐標(biāo)點(diǎn)，通過設(shè)置cpuPerformance 相關(guān)參數(shù)，并使用NextValue() 方法獲取當(dāng)前CPU使用率數(shù)據(jù)作為Y值，整型i 作為X值。將X、Y值構(gòu)造為坐標(biāo)點(diǎn)（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 中的坐標(biāo)點(diǎn)繪制到圖表中，曲線顏色定義為綠色，粗細(xì)設(shè)置為2，曲線名稱為"Percentage"。設(shè)置計(jì)時(shí)器間隔為1秒，連續(xù)執(zhí)行AnimatedPlot 事件實(shí)時(shí)繪制新坐標(biāo)點(diǎn)。

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();}

CPU