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

三 橫坐標顯示日期格式