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

三 横坐标显示日期格式 

转载于:https://www.cnblogs.com/shzt/p/9150984.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值