WPFデータグラフの表示LiveCharts2

最近、小さなプロジェクトを引き受け、大きなデータ表示画面を行う必要があり、曲線を表示し、入力と入力の量を表示することができ、焦点は見栄えが良いことである、私は何が見栄えが良いかを知っている、ちょうどそれをします。

作者实际项目

数据都是假的，只是做出一个效果。显示这种数据图，使用的是LiveCharts2。这是一个非常漂亮的 Charts 模块。官网如下：

https://www.lvcharts.com/

官方首页

支持平台

LiveCharts2支持的还挺多，我们在这里选择WPF。

如果我们直接通过NuGet进行搜索，会发现找到的LiveCharts版本较旧。

旧版本NuGet搜索结果

LiveCharts2相对V0版本做了很多改进和修复，通过NuGet安装LiveChartsCore.SkiaSharpView.WPF。

新版本NuGet搜索结果

または、Package Managerコンソールを開き、次のように入力します。

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
                },
            };

アイコンの役割を説明するタイトルを追加することも可能です。

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

<lvc:CartesianChart Series="{Binding Series}" Title="{Binding 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('汉')
                },
            };