모바일 앱 그래프 그리기 c# maui LiveCharts(1)

이번장에서는 모바일 앱에서 그래프를 그리는 라이브차트 라이브러리를 사용하도록 하겠다.

윈도우 버젼인 c# wpf 사용법에 관해서는 이전글을 참고하시면 됩니다.

https://easytocoding.tistory.com/20

그래프 그리기 c# wpf livechart 라이브러리

 

사용하기 위해서는 우선 누겟 패키지 관리자에서

livechartscore maui버젼을 설치한다.

그 다음 maui앱에서 사용할수 있게 mauiprogram.cs에서

 

using SkiaSharp.Views.Maui.Controls.Hosting;

을 추가한다음. create할때 .UseSkiaSharp(true) 구문을 다음과 같이 추가해줘야된다.

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.UseSkiaSharp(true) //추가해야 될부분
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

#if DEBUG
		builder.Logging.AddDebug();
#endif

		return builder.Build();
	}
}

그 다음 xaml에서 lvc라는 이름으로 라이브러리 추가후,

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

원하는 위치에 그래프를 추가하고 바인딩해준다.

 <lvc:CartesianChart Name="Pixelchart" Series="{Binding Series}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}" Sections="{Binding Sections}"   Grid.Row="1" MouseDown="Pixelchart_MouseDown"  TooltipPosition="Hidden"  EasingFunction="{x:Null}" ZoomMode="X" >
</lvc:CartesianChart>

 

그 다음에 원하는 그래프에 맞게 코드에서 바인딩 코드에 넣어주면 된다.

 

cartesian 차트 종류는 다음과 같고 

만일 다음과 같은 pie차트를 추가하고 싶으면. 

 

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

xaml코드를 다음과같이 하고 Series도 

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

다음과 같이.

 

다음과 같은 Polar 차트면,

 

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

다음과 같은 지도 그래프면,

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

위와 같이 xaml에서 추가하면 된다.

 

각각의 세부 내용에 대해서는 다음장에서 설명하도록 하겠다.