WPFでデータチャートを表示する (LiveCharts2)

最近、小さなプロジェクトを引き継いで、データ表示用の大画面を作る必要がある。曲線を表示し、出入り量を表示し、見た目が良いことが重要だ。そもそも何が「良い」か分からないので、適当に作ってみた。

作者実際のプロジェクト

データはすべて偽物で、効果を出すだけ。データグラフの表示には LiveCharts2 を使用。これは非常に美しい Charts モジュールだ。公式サイトは以下の通り：

https://www.lvcharts.com/

公式トップページ

サポートプラットフォーム

LiveCharts2 は多くのプラットフォームをサポートしており、ここでは WPF を選択する。

NuGet で直接検索すると、見つかる LiveCharts のバージョンは古い。

旧バージョンNuGet検索結果

LiveCharts2 は V0 バージョンから多くの改良と修正が加えられており、NuGet から LiveChartsCore.SkiaSharpView.WPF をインストールする。

新バージョンNuGet検索結果

または、パッケージマネージャーコンソールを開き、以下を入力する：

Install-Package LiveChartsCore.SkiaSharpView.WPF -Version 2.0.0-rc2

コンソールインストールスクリーンショット

インストールが完了すると、見つかるようになる。

プロジェクトインストールスクリーンショット

ついでに CommunityToolkit.Mvvm もインストールする。これは NuGet で見つかる。GalaSoft.MVVMLight がメンテナンスされなくなったため、公式が新しく作成したモデルで、スムーズに移行できる。

新しい MainViewModel を作成し、参照を追加してコードを追加する。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using CommunityToolkit.Mvvm.ComponentModel;

namespace LiveChartsDemo
{
    [ObservableObject]
    public partial class MainViewModel
    {
        public ISeries[] Series { get; set; }
            = new ISeries[]
            {
                new LineSeries<double>
                {
                    Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                    Fill = null
                }
            };
    }
}

次に MainWindow.xaml で LiveCharts を参照し、DataContext を設定する。

xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"

<Window.DataContext>
	<local:MainViewModel />
</Window.DataContext>

そして CartesianChart を追加する。

<Grid>
	<lvc:CartesianChart Series="{Binding Series}" />
</Grid>

LineSeries は線グラフ、もちろん棒グラフも設定できる。

public ISeries[] Series { get; set; }
            = new ISeries[]
            {
                new ColumnSeries<double>
                {
                    Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                },
                new LineSeries<double>
                {
                    Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                    Fill = null
                },
            };

さらに Title を追加して、グラフの役割を説明することもできる。

public LabelVisual Title { get; set; }
            = new LabelVisual
            {
                Text = "Title",
                TextSize=20,
                Paint = new SolidColorPaint(SKColors.Black)
            };

<lvc:CartesianChart Series="{Binding Series}" Title="{Binding Title}"/>

ここで問題が発生する。Title を日本語に設定すると、

public LabelVisual Title { get; set; }
            = new LabelVisual
            {
                Text = "タイトル",
                TextSize=20,
                Paint = new SolidColorPaint(SKColors.Black)
            };

表示されなくなる。

設定を変更して、日本語表示に対応させる必要がある。

public LabelVisual Title { get; set; }
            = new LabelVisual
            {
                Text = "タイトル",
                TextSize=20,
                Paint = new SolidColorPaint {
                    Color = SKColors.Black,
                    SKTypeface = SKFontManager.Default.MatchCharacter('日')
                },
            };