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('漢')
                },
            };