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

처음 maui에 그래프 세팅하는법에 대해 모르신다면 전장을 참고 하시면 됩니다.

https://easytocoding.tistory.com/26

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

 

xaml에서 차트에 바이딩을 다음과 같이 진행해서 모두 기능들을 제어할수 있게 합니다.

 <lvc:CartesianChart x:Name="Chart" Series="{Binding Series}" XAxes="{Binding XAxis}" YAxes="{Binding YAxis}" LegendPosition="Right" ZoomMode="X" TooltipPosition="Bottom" VisualElements="{Binding VisualElements}">
</lvc:CartesianChart>

여기서 각각 파라미터의 의미는 아래 그림을 참고하면 된다.

각각의 바인딩은 메인 코드에서 아래와 같이 바인딩 하면 되고,

 

public ISeries[] Series { get; set; }
public List<ChartElement<SkiaSharpDrawingContext>> VisualElements { get; set; } 
public Axis[] XAxis { get; set; }
public Axis[] YAxis { get; set; }

할당은 초기화 후 하면 된다.

Series = new ISeries[]
{
	new StackedColumnSeries<double>
	{
        Name="Test",
        Values = valueA,

        Stroke = null,
        DataLabelsPaint = new SolidColorPaint(new SKColor(45, 45, 45)),
        DataLabelsSize = 14,
        DataLabelsPosition = DataLabelsPosition.Middle,


    },
    new StackedColumnSeries<double>
    {
        Name="Test1",
        Values = valueB,
        Stroke = null,
        DataLabelsPaint = new SolidColorPaint(new SKColor(45, 45, 45)),
        DataLabelsSize = 14,
        DataLabelsPosition = DataLabelsPosition.Middle
    },
        
};

XAxis = new Axis[]
{
    new Axis
    {

   		Labels = new[] {"라벨명"},
        TextSize = 30,
        LabelsPaint = new SolidColorPaint
        {
            Color = SKColors.Black,
            FontFamily = "AppleGothic"
        },


    }
};
YAxis = new Axis[]
{
    new Axis
    {

   		Labels = new[] {"라벨명"},
        TextSize = 30,
        LabelsPaint = new SolidColorPaint
        {
            Color = SKColors.Black,
            FontFamily = "AppleGothic"
        },


    }
};

한글을 쓰기위해서는 폰트를 바꿔야 되는데 위에 Axis처럼 폰트를 LEGEND와 툴팁도 해줘야된다.

Chart.LegendTextPaint = new SolidColorPaint()
{
    Color = new SKColor(0, 0, 0),
    SKTypeface = SKTypeface.FromFamilyName("AppleGothic"),
};

Chart.TooltipTextPaint = new SolidColorPaint()
{
    Color = new SKColor(0, 0, 0),
    SKTypeface = SKTypeface.FromFamilyName("AppleGothic"),


};
Chart.LegendTextSize = 30;
Chart.TooltipTextSize = 20;

그리고 폰트 자체도 추가해줘야되는데 우선 프로젝트에 폰트를 추가하고 Mauiprogram.cs에서 코드로 삽입해줘야 된다.

 

프로젝트에 Resource => Fonts폴더에 폰트 추가 ( .ttf 나 .otf)

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");
         	fonts.AddFont("AppleGothic.ttf", "AppleGothic"); //추가된 부분
        });

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

    return builder.Build();
}

위와 같이 추가하면 폰트를 사용할수 있다.

 

거기다가 values값을 이제 추가 하거나 수정이 바로 바로 되기 위해 ObservableCollection형으로 선언해놔야된다.

ObservableCollection<double> valueA = new ObservableCollection<double>();
ObservableCollection<double> valueB = new ObservableCollection<double>();

 

사용법은

 

valueA.Add(추가할값);
valueB[인덱스번호]=수정할값;
valueA.Clear(); //초기화
valueB.RemoveAt(인덱스번호);삭제할 인덱스

이런식으로 사용하면 된다.