Visual Studio | WPF > グラフ > LiveCharts > 折れ線グラフ描画のパフォーマンス > チューニング後 > 1000点のグラフなら | 適用例

動作環境

Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2

Visual Studio | WPF > グラフ > LiveCharts > 折れ線グラフ描画のパフォーマンス > 1000点: zoomingとpanningが重い | 1万点: 表示されない
の続き。

https://lvcharts.net/App/examples/v1/wf/Performance%20Tips
のチューニングを試してみた。

Geared Package

保留。
データ点数を減らすだけの気がする。

Disable Animations

XAMLにてDisableAnimations をTrueにした。

効果があった。

• Disable前: 1000点のpanningに3秒の遅れ
• Disable後: 1000点のpanningに1秒の遅れ

Freeze all you can

Freeの概念を未消化のため保留。

Avoid calling .Add() multiple times

効果は感じなかった。

code

MainWindow.xaml

<Window x:Class="_171127_t1200_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_t1200_tooManyPoints"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <lvc:CartesianChart Series="{Binding seriesCollection}" Height="250"
                                LegendLocation="Right"
                                DisableAnimations="True"
                                Zoom="Xy"/>
        </StackPanel>          
    </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 LiveCharts;
using LiveCharts.Wpf;

namespace _171127_t1200_tooManyPoints
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            graph_init();
        }

        private void graph_init()
        {
            gd = new GraphData();

            var sc = new SeriesCollection {
                new LineSeries
                {
                    Title = "napier",
                    Values = new ChartValues<double> { 2, 7, 1, 8, 2, 8, 1, 8 }                    
                }
            };

            //graph_add_series_addEach(sc);
            graph_add_series_addGroup(sc);

            gd.seriesCollection = sc;
            this.DataContext = gd;
        }

        static readonly int kNumPoint = 1000; /****************************/

        private void graph_add_series_addEach(SeriesCollection sc)
        {
            var lnsr1 = new LineSeries();
            lnsr1.Title = "pi";
            lnsr1.Values = new ChartValues<double> { };
            lnsr1.Fill = Brushes.Transparent;
            lnsr1.PointGeometry = null;
            lnsr1.StrokeThickness = 0.5;
            //
            var gen = new System.Random();
            for (int idx = 0; idx < kNumPoint; idx++)
            {
                var tmp = gen.NextDouble() * 10.0;
                lnsr1.Values.Add(tmp);
            }
            sc.Add(lnsr1);
        }

        private void graph_add_series_addGroup(SeriesCollection sc)
        {
            var lnsr1 = new LineSeries();
            lnsr1.Title = "pi";
            lnsr1.Values = new ChartValues<double> { };
            lnsr1.Fill = Brushes.Transparent;
            lnsr1.PointGeometry = null;
            lnsr1.StrokeThickness = 0.5;
            //
            var gen = new System.Random();
            var pntlist = new double[kNumPoint];
            for (int idx = 0; idx < kNumPoint; idx++)
            {
                var tmp = gen.NextDouble() * 10.0;
                pntlist[idx] = tmp;
            }
            var cv = new ChartValues<double>();
            cv.AddRange(pntlist);
            lnsr1.Values = cv;
            sc.Add(lnsr1);
        }

        GraphData gd;
        public class GraphData
        {
            public SeriesCollection seriesCollection { get; set; }
        }
    }
}

適用例

1000点のデータポイントでの描画なら利用するのに差しさわりはないだろう。

自分が想定している例としては下記のようなものが考えられる。

• 8グラフ
• 6シリーズ/グラフ
• Nポイント/シリーズ

上記の場合、総データポイント数を1000に抑えるにはN=20程度。

他のチャートパッケージ

OxyPlotあたりを触ってみよう。

5年後も使えるといいのだが。
(LiveChartsはメンテが続いているというのが一つの長所ではあった）。