Visual Studio | WPF > OxyPlot > 꺾은선형 차트 그리기 성능 > 10,000점: 즉시 그리기 | zooming and panning: 기본적으로 사용 | 초당 데이터 추가 구현 예

운영 환경

Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
OxyPlot.Wpf v1.0.0
Sublime Text 2

@ 유메 토도 님이 추천한 OxyPlot을 사용해 보았습니다.

관련

Visual Studio | WPF > 그래프 > LiveCharts > 선 그래프 그리기 성능 > 튜닝 후 > 1000점 그래프라면 | 적용 예

c++ builder > TeeChart > 한 그래프: 데이터 수 20만 건으로 굳어짐 / 다중 그래프: 총 데이터 수 20만 건으로 굳어짐

참고

WPF OxyPlot으로 원형 차트 만들기 by @ 쿠로 4 씨

정보 감사입니다.

다만, MVVM등 넣으면 복잡해지기 때문에, 간이적인 실장으로 한다.

준비

Nuget에서 OxyPlot.Wpf v1.0.0 설치

XAML에 다음을 추가

xmlns:oxy="http://oxyplot.org/wpf"

code behind에 다음을 추가

using OxyPlot;

using OxyPlot.Series;

code

MainWindow.xaml

<Window x:Class="_171127_t1530_tooManyPoints.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_171127_t1530_tooManyPoints"
        xmlns:oxy="http://oxyplot.org/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <oxy:PlotView Model="{Binding _PlotModel, Mode=OneWay}"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
// 以下を追加した
using OxyPlot;
using OxyPlot.Series;

namespace _171127_t1530_tooManyPoints
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public PlotModel _PlotModel { get; private set; } = new PlotModel() { Title = "LineSeries" };

        public MainWindow()
        {
            InitializeComponent();
            graph_init();
        }

        private void graph_init()
        {
            var series = new LineSeries
            {
                StrokeThickness = 0.5,
            };

            graph_add_series_addEach(series);
            _PlotModel.Series.Add(series);

            this.DataContext = this;
        }

        static readonly int kNumPoint = 10000;

        private void graph_add_series_addEach(LineSeries series)
        {
            var gen = new Random();
            for (int idx=0; idx < kNumPoint; idx++)
            {
                var yval = gen.NextDouble() * 10.0;
                series.Points.Add(new DataPoint(idx, yval));
            }            
        }
    }
}

10,000 점 : 즉시 그리기

100,000 점 : 3 초 정도 후에 그리기

zooming and panning

기본적으로 활성화되어 있습니다.

조작에 대해서는 이쪽

성능도 좋다.

초당 데이터 추가 구현 예

참고 : OxyPlot 컨트롤 (PlotView)을 실시간으로 업데이트하는 방법

위에서 디스플레이를 업데이트하는 방법을 알았습니다.
InvalidatePlot()을 사용하는 방법을 사용해 보겠습니다.

정보 감사입니다.

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
// 以下を追加した
using OxyPlot;
using OxyPlot.Series;
using System.Windows.Threading;

namespace _171127_t1530_tooManyPoints
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        private DispatcherTimer myTimer;
        private LineSeries mySeries;
        private Random randGen;
        private int pos = 0;
        public PlotModel _PlotModel { get; private set; } = new PlotModel() { Title = "LineSeries" };

        public MainWindow()
        {
            InitializeComponent();

            // 1. 1秒タイマーの設定
            myTimer = new DispatcherTimer(DispatcherPriority.Normal);
            myTimer.Interval = new TimeSpan(0, 0, 1);
            myTimer.Tick += myTimer_Tick;

            randGen = new Random();

            graph_init();

            myTimer.Start();
        }

        private void graph_init()
        {
            mySeries = new LineSeries
            {
                StrokeThickness = 0.5,
            };

            graph_add_series_addEach();
            _PlotModel.Series.Add(mySeries);
            this.DataContext = this;
        }

        static readonly int kNumAddPoint = 5000;
        static readonly int kMaxPoint = 200000;

        private void graph_add_series_addEach()
        {
            for (int idx=0; idx < kNumAddPoint; idx++)
            {
                var yval = randGen.NextDouble() * 10.0;
                mySeries.Points.Add(new DataPoint(pos, yval));
                pos++;
            }
        }

        void myTimer_Tick(object sender, EventArgs e)
        {
            if (pos > kMaxPoint)
            {
                return;
            }

            graph_add_series_addEach();
            _PlotModel.InvalidatePlot(true);
        }
    }
}

초당 데이터 추가

200,000 점에서 데이터 추가 중지

20만점에서는 panning이 무겁지만, 묘화는 되어 있다.

TeeChart 미나미는 할 수 있을 것 같다.