LiveCharts2：簡單靈活互動式且功能強大的.NET圖表庫

前言

之前的文章中提到過ScottPlot、與oxyplot，這兩個是比較常用的.NET圖表庫，今天介紹一款新的.NET圖表庫：LiveCharts2。

LiveCharts2介紹

LiveCharts2 是一個現代化的資料視覺化庫，用於建立動態和互動式圖表，支援 .NET 平臺。它是 LiveCharts 的進化版，旨在提供更高效能、更靈活和更易於使用的圖表解決方案。LiveCharts2 支援多種圖表型別，包括折線圖、柱狀圖、餅圖、散點圖等，適用於各種資料展示需求。

該庫採用 MVVM（Model-View-ViewModel）設計模式，方便開發者在應用中進行資料繫結和動態更新。LiveCharts2 強調效能最佳化，能夠處理大量資料並提供流暢的互動體驗。

GitHub上的介紹如下：

Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP.

簡單、靈活、互動式且功能強大，適用於 .NET的圖表、地圖和儀表庫，現在可以在 Maui、Uno Platform、Blazor-wasm、WPF、WinForms、Xamarin、Avalonia、WinUI、UWP上執行。

截止寫這篇文章，該專案獲得了4k個Starts。

簡單使用

畫折線圖

安裝NuGet包：

需要點選包含預發行版才會出現。

在ViewModel中新增一個Series屬性，如下所示：

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

在xaml頁面，新增名稱空間，如下所示：

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

新增控制元件：

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

最後不要忘了設定頁面的DataContext，如下所示：

 public partial class LiveCharts2Demo : Window
 {
     public LiveCharts2Demo()
     {
         InitializeComponent();
         this.DataContext = new LiveChart2DemoViewModel();
     }
 }

實現效果如下：

畫餅圖

將Series屬性修改為：

 public ISeries[] Series { get; set; }
       = new ISeries[]
       {
         new PieSeries<double> { Values = new double[] { 2 } },
         new PieSeries<double> { Values = new double[] { 4 } },
         new PieSeries<double> { Values = new double[] { 1 } },
         new PieSeries<double> { Values = new double[] { 4 } },
         new PieSeries<double> { Values = new double[] { 3 } }
       };

新增控制元件：

<lvc:PieChart
    Series="{Binding Series}">
</lvc:PieChart>

效果如下所示：

畫極座標圖

將Series屬性修改為：

public ISeries[] Series { get; set; } = new[]
        {
            new PolarLineSeries<double>
            {
                Values = new double[] { 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 },
                Fill = null,
                IsClosed = false
            }
        };

新增控制元件：

 <lvc:PolarChart
       Series="{Binding Series}">
 </lvc:PolarChart>

效果如下所示：

更多示例可見官網：

官網提供了多種多樣的樣式，可以根據自己的需求，去官網上選擇合適的圖表樣式。

參考

1、beto-rodriguez/LiveCharts2: Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP. (github.com)

2、LiveCharts - LiveCharts2