目的

備忘録として記載。
導入までを記載し、そこから別のグラフ描画は別記事に記載する見込み。

参考

環境

windows11 21H2
Microsoft Visual Studio Community 2022 (64 ビット) Version 17.3.3

今回作成したプロジェクトについて

下記githubにコミットしました。
https://github.com/satukihare/LiveChartMauiSample.git

導入

nugetパッケージマネージャにて
下記をインストール

LiveChartsCore.SkiaSharpView.Maui

MauiProgram.csの変更

下記ソースコードのように追記する

using SkiaSharp . Views . Maui . Controls . Hosting;
namespace LiveChartSample;
public static class MauiProgram {
    public static MauiApp CreateMauiApp ( ) {
        var builder = MauiApp.CreateBuilder();
        builder
            . UseSkiaSharp ( true ) // 追加
            . UseMauiApp<App> ( )
            . ConfigureFonts ( fonts => {
                fonts . AddFont ( "OpenSans-Regular.ttf" , "OpenSansRegular" );
                fonts . AddFont ( "OpenSans-Semibold.ttf" , "OpenSansSemibold" );
            } );
        return builder . Build ( );
    }
}

モデルの作成

下記クラスを作成。
今回はここで表示される値を設定。

using LiveChartsCore . SkiaSharpView;
using LiveChartsCore;
namespace LiveChartSample {
    public class ViewModel {
        public ISeries [ ] Series { get; set; }
        = new ISeries [ ]
        {
            new LineSeries<double>
            {
                Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                Fill = null
            }
        };
    }
}

MainPage.xamlの変更

ここではContentPageのタグに「モデルの作成」にて作成したクラス（ViewModel.cs）を参照するようにする。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LiveChartSample.MainPage"
             xmlns:local="clr-namespace:LiveChartSample"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui">
<!-- 下記は変更前
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LiveChartSample.MainPage">
-->
    <!-- 下記のように変更 -->
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Grid>
            <lvc:CartesianChart
                Series="{Binding Series}">
            </lvc:CartesianChart>
        </Grid>
    </ContentPage.Content>
</ContentPage>

実行

グラフが表示されます。