DynamicDataDisplay 实时曲线图的使用和沿轴移动的效果

原文地址

 由于项目需要，最近在找关于绘制实时曲线图的文章，但看了很多自己实现的话太慢，所以使用了第三方控件来实现（由于是项目中使用所以我比较倾向与开源的项目，如果出问题的话可以很好的找到根源）。这里记录是让我以后可以回顾，也可以让志同道合的程序猿减少搜索时间。

        下面我们就介绍一下DynamicDataDisplay中实时曲线图的功能（其他没有时间去研究），由于在网上能找到类似的配置文章。

首先我们要去官网下载dll(或者直接NuGet,这里没有用过就不介绍了），DynamicDataDisplay找到需要的DynamicDataDisplay.dll并在项目中引用

然后在项目中配置命名空间 xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"，再在内容中添加<d3:ChartPlotter>基本配置问题就已经解决。

     CPU的使用率的实时显示问题，CPU所使用的api可以自己去查找，我这里就不说明了。

     下面我们来直接贴代码

MainWindow.xaml文件内容如下：

[html] view plain copy

1. <Window xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"  
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.         x:Class="LinechartApplication.MainWindow"  
5.         Title="MainWindow" Height="400" Width="650"  
6.         xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0" Loaded="Window_Loaded">  
7.     <Grid>  
8.         <Grid.RowDefinitions>  
9.             <RowDefinition Height="Auto"/>  
10.             <RowDefinition Height="*"/>  
11.         </Grid.RowDefinitions>  
12.         <StackPanel Orientation="Horizontal">  
13.             <Button Content="滚屏or不滚屏"  Click="Button_Click"/>  
14.         </StackPanel>  
15.         <d3:ChartPlotter x:Name="plotter" Margin="10,10,20,10" Grid.Row="1">  
16.             <d3:ChartPlotter.VerticalAxis>  
17.                 <d3:VerticalIntegerAxis />  
18.             </d3:ChartPlotter.VerticalAxis>  
19.   
20.             <d3:ChartPlotter.HorizontalAxis>  
21.                 <d3:HorizontalIntegerAxis />  
22.             </d3:ChartPlotter.HorizontalAxis>  
23.   
24.             <d3:Header Content="CPU 实时性能"/>  
25.             <d3:VerticalAxisTitle Content="百分比"/>  
26.         </d3:ChartPlotter>  
27.     </Grid>  
28. </Window>  

[csharp] view plain copy

1. using System;  
2. using System.Globalization;  
3. using System.IO;  
4. using System.Reflection;  
5. using System.Threading;  
6. using System.Windows;  
7. using System.Diagnostics;  
8. using System.Windows.Threading;  
9. using System.Windows.Media;  
10. using Microsoft.Research.DynamicDataDisplay;  
11. using Microsoft.Research.DynamicDataDisplay.DataSources;  
12. using System.Collections;  
13.   
14. namespace LinechartApplication  
15. {  
16.     /// <summary>  
17.     /// MainWindow.xaml 的交互逻辑  
18.     /// </summary>  
19.     public partial class MainWindow : Window  
20.     {  
21.   
22.         private ObservableDataSource<Point> dataSource = new ObservableDataSource<Point>();  
23.         private PerformanceCounter performanceCounter = new PerformanceCounter();  
24.         private DispatcherTimer dispatcherTimer = new DispatcherTimer();  
25.         private int currentSecond = 0;  
26.   
27.         bool buttonbool = false;//标志是否滚屏  
28.         public MainWindow()  
29.         {  
30.             InitializeComponent();  
31.   
32.         }  
33.   
34.         private void Window_Loaded(object sender, RoutedEventArgs e)  
35.         {  
36.             plotter.AddLineGraph(dataSource, Colors.Red, 2, "百分比");  
37.             plotter.LegendVisible = true;  
38.             dispatcherTimer.Interval = TimeSpan.FromSeconds(1);  
39.             dispatcherTimer.Tick += timer_Tick;  
40.             dispatcherTimer.IsEnabled = true;  
41.             plotter.Viewport.FitToView();  
42.         }  
43.   
44.         int xaxis = 0;  
45.         int yaxis = 0;  
46.         int group = 20;//默认组距  
47.   
48.         Queue q = new Queue();  
49.         private void timer_Tick(object sender, EventArgs e)  
50.         {  
51.             performanceCounter.CategoryName = "Processor";  
52.             performanceCounter.CounterName = "% Processor Time";  
53.             performanceCounter.InstanceName = "_Total";  
54.             double x = currentSecond;  
55.             double y = performanceCounter.NextValue();  
56.             Point point = new Point(x, y);  
57.             dataSource.AppendAsync(base.Dispatcher, point);  
58.             if (wendu)  
59.             {  
60.                 if (q.Count < group)  
61.                 {  
62.                     q.Enqueue((int)y);//入队  
63.                     yaxis  = 0;  
64.                     foreach (int c in q)  
65.                         if (c > yaxis)  
66.                             yaxis = c;  
67.                 }  
68.                 else {  
69.                     q.Dequeue();//出队  
70.                     q.Enqueue((int)y);//入队  
71.                     yaxis = 0;  
72.                     foreach (int c in q)  
73.                         if (c > yaxis)  
74.                             yaxis = c;  
75.                 }  
76.   
77.                 if (currentSecond - group > 0)  
78.                     xaxis = currentSecond - group;  
79.                 else  
80.                     xaxis = 0;  
81.   
82.                 Debug.Write("{0} ", yaxis.ToString());  
83.                 plotter.Viewport.Visible = new System.Windows.Rect(xaxis, 0, group, yaxis);//主要注意这里一行  
84.             }  
85.             currentSecond++;  
86.         }  
87.   
88.         private void Button_Click(object sender, RoutedEventArgs e)  
89.         {  
90.             if (wendu)  
91.             {  
92.                 wendu = false;  
93.             }  
94.             else {  
95.                 wendu = true;  
96.             }  
97.         }  
98.     }  
99. }  

DynamicDataDisplay实现实时显示曲线的功能有很多但没有看到x轴移动的功能所以下面就是主要内容（如何沿着x轴移动）
在使用DynamicDataDisplay时候我发现会出现图像缩放的情况（就是x轴一直被缩放，所有数据都会被压缩在一块，很不方便）。使用plotter.Viewport.Visible = new System.Windows.Rect(xaxis, 0, group, yaxis);这行代码就可以解决按照x轴移动的功能。这个就像一个窗口，我们定义窗口位置和大小就能想看到我们所需要的数据。第一和第二个参数是原点坐标，第三个参数是X轴长度，第四个参数是Y长度。定义好了之后所有在这个区间的内容都会被显示，多余的参数不显示。随着窗口的移动也就是X轴移动的功能。

代码中，使用了队列，队列的长度就等于显示窗口的长度也就是X轴的长度。队列的作用是取该队列中最大的值来确定窗口的高度。

  不滚屏时图像（我们可以看到X轴都挤到一块）

  滚屏时图像（我们可以看到X起始点和结束点）

      资源下载http://download.csdn.net/detail/u013187531/9842653