.NET MAUI에서 마이크로차트 사용

Microcharts은 가장 잘 알려진 Xamarin용 오픈 소스 차트 라이브러리 중 하나이며 저를 포함하여 많은 사람들이 .NET MAUI와 함께 사용하고 싶어합니다. Microcharts의 .NET MAUI 지원에 대한 작업이 곧 도착할 예정이지만 PR is not merged .NET MAUI와 함께 Microcharts를 이미 사용하는 방법을 보여주고 싶습니다.

You can find a sample for this on GitHub.

필요한 패키지 추가

가장 먼저 할 일은 필요한 모든 패키지를 추가하는 것입니다. 렌더링 논리를 가져올 마이크로차트가 필요합니다.

dotnet add package Microcharts --version 0.9.5.9

또한 .NET MAUI용 SkiaSharp 컨트롤에 대한 참조가 필요합니다.

dotnet add package SkiaSharp.Views.Maui.Controls --version 2.88.0

참조를 .csproj 파일에 직접 추가할 수도 있습니다.

    <ItemGroup>
      <PackageReference Include="Microcharts" Version="0.9.5.9" />
      <PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.0" />
    </ItemGroup>

ChartView 추가

Microcharts에는 SkiaSharp를 기반으로 렌더링을 제공하는 하나의 공유 코드 베이스를 사용하는 스마트 구조가 있습니다. 플랫폼은 SkiaSharp 보기를 제공하고 이 기본 계층을 사용하여 그리기 이벤트를 처리합니다. 따라서 기본적으로 Xamarin.Forms implementation of the view을 복사하고 약간 조정할 수 있습니다.

internal class ChartView : SKCanvasView
    {
        public event EventHandler<SKPaintSurfaceEventArgs> ChartPainted;

        public static readonly BindableProperty ChartProperty = BindableProperty.Create(nameof(Chart), typeof(Chart), typeof(ChartView), null, propertyChanged: OnChartChanged);

        public Chart Chart
        {
            get { return (Chart)GetValue(ChartProperty); }
            set { SetValue(ChartProperty, value); }
        }

        private InvalidatedWeakEventHandler<ChartView> handler;

        private Chart _chart;

        public ChartView()
        {
            BackgroundColor = Colors.Transparent;
            PaintSurface += OnPaintCanvas;
        }

        private static void OnChartChanged(BindableObject d, object oldValue, object value)
        {
            var view = d as ChartView;

            if (view._chart != null)
            {
                view.handler.Dispose();
                view.handler = null;
            }

            view._chart = value as Chart;
            view.InvalidateSurface();

            if (view._chart != null)
            {
                view.handler = view._chart.ObserveInvalidate(view, (v) => v.InvalidateSurface());
            }
        }

        private void OnPaintCanvas(object sender, SKPaintSurfaceEventArgs e)
        {
            if (_chart != null)
            {
                _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height);
            }
            else
            {
                e.Surface.Canvas.Clear(SKColors.Transparent);
            }

            ChartPainted?.Invoke(sender, e);
        }
    }

이 보기는 기본적으로 그리기 이벤트를 구독하고 캔버스에서 Microcharts Chart 그리기 논리를 호출하여 이벤트를 처리합니다( _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height) ). 프로젝트에 드롭하기만 하면 뷰에서 참조할 수 있습니다.

용법

마지막으로 사용하기 전에 .UseSkiaSharp() 의 MAUI 빌더에 MauiProgram.cs 메서드를 추가하여 필요한 핸들러를 추가하기만 하면 됩니다.

var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseSkiaSharp();

이제 다른 프로젝트에서 Microcharts와 함께 사용하는 것처럼 ChartView를 사용할 수 있습니다.

<ContentPage ...
xmlns:microcharts="clr-namespace:Microcharts.MAUI.Sample;assembly=Microcharts.MAUI.Sample">
            <microcharts:ChartView x:Name="Chart" />
</ContentPage>

their documentation에서 마이크로차트 사용에 대해 자세히 알아보십시오.