【目錄】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