WPF中DynamicDataDisplay的使用总结

最近做WPF项目，其中使用了DynamicDataDisplay绘图工具，这篇文章主要是记录在使用过程中遇到的问题和解决方法。

一、DynamicDataDisplay使用步骤

1，在引用中增加 DynamicDataDisplay.dll;

2，在XAML中增加名称空间    

“xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"

3，增加Chartplotter控件

<d3:ChartPlotter Name="plotter"/></ChartPlotter>

4，增加数据集合X，Y

dataSource = new EnumerableDataSource<Point>(dataCollection);
dataSource.SetXMapping(x => x.X);
dataSource.SetYMapping(y => y.Y);

　　5，使用AddLineGraph()方法绘图

plotter.AddLineGraph(dataSource,new Pen(Brushes.Blue, 2),new CirclePointMarker { Size = 10, Fill = Brushes.Red },new PenDescription("Data"));

　　6，使用函数 FitToView() 图像显示

plotter.FitToView();

　　二 DynamicDataDisplay绘制动态图像时，横坐标压缩，不能动态平移的的问题

当需要显示实时曲线，数据不断刷新时，就需要不断地调整当前显示的曲线。以下面的例子为例，主要思想是，创建一个数据列表，列表长度是固定，然后不断向列表中增加新的数据，这样页面不断刷新，就能实现实时显示的功能。

1，建立ViewModel模型

 

public class VoltagePointCollection : RingArray
{
    private const int TOTAL_POINTS = 300;
 
    public VoltagePointCollection()
        : base(TOTAL_POINTS) // here i set how much values to show
    {
    }
}
 
public class VoltagePoint
{
    public DateTime Date { get; set; }
 
    public double Voltage { get; set; }
 
    public VoltagePoint(double voltage, DateTime date)
    {
        this.Date = date;
        this.Voltage = voltage;
    }
}

 

2，数据绑定

var ds = new EnumerableDataSource(voltagePointCollection);
ds.SetXMapping(x => dateAxis.ConvertToDouble(x.Date));
ds.SetYMapping(y => y.Voltage);
plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); // to use this method you need to add manually "using Microsoft.Research.DynamicDataDisplay;"

3，XAML界面

<d3:ChartPlotter x:Name="plotter" Grid.Row="1" Grid.Column="1">
<d3:ChartPlotter.HorizontalAxis>
<d3:HorizontalDateTimeAxis Name="dateAxis"/>
</d3:ChartPlotter.HorizontalAxis>
<d3:Header FontFamily="Georgia" Content="Voltage chart"/>
<d3:VerticalAxisTitle FontFamily="Georgia" Content="Voltage [V]" />
<d3:HorizontalAxisTitle FontFamily="Georgia" Content="Time"/>
<d3:HorizontalLine Value="{Binding MaxVoltage}" Stroke="Red" StrokeThickness="2"/>
<d3:HorizontalLine Value="{Binding MinVoltage}" Stroke="Red" StrokeThickness="2"/>
</d3:ChartPlotter>

运行效果：

以上参考：https://www.mesta-automation.com/real-time-line-charts-with-wpf-and-dynamic-data-display/

示例代码下载：https://github.com/mesta1/DynamicDataDisplay-example

三 横坐标显示日期格式