第07章:DynamicDataDisplay 動態折線圖

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容