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 미나미는 할 수 있을 것 같다.

    좋은 웹페이지 즐겨찾기