10 Oct 2021

WPF - Realtime charting by using DevExpress WPF toolkit

Realtime charting by using DevExpress WPF toolkit

Realtime chart的用途十分广泛，特别是在测量领域尤为常见。

这个代码样例实现了一个realtime chart的原型，借助了DevExpress WPF的ChartControl，并且应用了MVVM模式。

工程结构

代码实现

后台数据 - MainViewModel.cs

...
private ObservableCollection<Point<double>> _datasPoints;
...

前台绑定 - MainView.xaml

...
<UserControl.DataContext>
        <ViewModels:MainViewModel/>
</UserControl.DataContext>
...
<dxc:ChartControl Name="RealtimeChart" DataSource="{Binding DatasPoints}" BoundDataChanged="ChartControl_OnBoundDataChanged">
...

动态刷新 - 线程函数

...
    private void Update() {
        while (_cts.Token.IsCancellationRequested == false) {
            Dispatcher.BeginInvoke(new Action(() => {
                var model = (MainViewModel)this.DataContext;
                var DatasPoints = model.DatasPoints;

                DatasPoints.Add(new Point<double>(DatasPoints.Count, Math.Sin(Math.PI * (double)DatasPoints.Count / 60.0)));
            }));

            Thread.Sleep(1);
        }
    }
...

效果

Source code: Github

(end.)