【目录】DynamicDataDisplay - 简书

一、概述

本文介绍使用DynamicDataDisplay绘制动态折线图。

一般的场景是数据绑定到VM中，然后在VM中动态添加数据点，图表实时更新。

下面进行实现。

二、演示

三、实现

第一步：新建项目

1.新建项目D3DynamicDemo

2.添加Nuget包：DynamicDataDisplayReloaded

第二步：新建MainWindowViewModel，并编写以下代码

public class MainWindowViewModel : INotifyPropertyChanged
    {
        private List<Point> _points { get; set; } = new List<Point>();

        public EnumerableDataSource<Point> PointDataSource
        {
            get
            {
                // 每次都需要重新创建数据源
                var points = new List<Point>();

                for (int i = 0; i < _points.Count; i++)
                    points.Add(_points[i]);

                var ds = new EnumerableDataSource<Point>(points);
                ds.SetXYMapping(pt => pt);

                return ds;
            }
        }

        public MainWindowViewModel()
        {
            InitDynamicDataSource();
        }

        private void InitDynamicDataSource()
        {
            // 模拟动态添加数据
            Task.Factory.StartNew(async () =>
            {
                var random = new Random();
                var index = 0;

                while (true)
                {
                    // 添加一个模拟数据点
                    _points.Add(new Point(index++, random.Next(300, 500)));
                    // 通知数据源有更改
                    OnPropertyChanged(nameof(PointDataSource));

                    await Task.Delay(500);
                }
            });
        }

        public event PropertyChangedEventHandler? PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }

• 首先实现了INotifyPropertyChanged接口，这样便有了属性更改通知界面刷新的能力。

• 然后定义了PointDataSource数据源，在其get方法中重新创建数据源并返回。

• 最后模拟动态添加数据，通过属性通知更改的方式，实现刷新界面。

第三步：在MainWindow.xaml中编写以下代码

<Window x:Class="D3DynamicDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
        xmlns:local="clr-namespace:D3DynamicDemo"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="动态折线图"
        Width="800"
        Height="450"
        mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid Margin="8">
        <d3:ChartPlotter>
            <d3:LineGraph x:Name="lineGraph" DataSource="{Binding PointDataSource}" />
        </d3:ChartPlotter>
    </Grid>
</Window>

这里主要是将LineGraph的DataSource绑定到了VM中的PointDataSource属性上。

第四步：恭喜，已完成

四、环境

开发工具：Visual Studio

开发语言：C#

目标框架：.Net 6.0

Nuget包：DynamicDataDisplayReloaded