WPF中DynamicDataDisplay的使用总结

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

一、DynamicDataDisplay使用步骤

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

2，在XAML中增加名称空间

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

3，增加Chartplotter控件

1	`<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()方法绘图

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

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

1	`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>