使用MAUI繪製圖表

梅露露發表於2024-11-25
UI

包 Microcharts.Maui

1.MauiProgram.cs

            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                   .UseSkiaSharp() //使用圖表新增
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

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

            return builder.Build();

2.xaml

<?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"
             xmlns:local="clr-namespace:MauiAppChart"
             xmlns:ct="clr-namespace:Microcharts.Maui;assembly=Microcharts.Maui"
             x:Class="MauiAppChart.MainPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Text="折線圖" Clicked="Button_Line"></Button>
        <Grid x:Name="ct" Grid.Row="1">
            <ct:ChartView x:Name="ctdata"></ct:ChartView>
        </Grid>
    </Grid>
</ContentPage>

3.cs

     var entries = new[]
{
     new Microcharts.ChartEntry(200)
     {
         Label = "January",
         ValueLabel = "200",
         Color = SKColor.Parse("#FF1943")
     },
     new Microcharts.ChartEntry(400)
     {
         Label = "February",
         ValueLabel = "400",
         Color = SKColor.Parse("#00B0FF")
     },
     new Microcharts.ChartEntry(300)
     {
         Label = "March",
         ValueLabel = "300",
         Color = SKColor.Parse("#32CD32")
     }
 };
     var chart = new LineChart
     {
         Entries = entries,
         LineMode = LineMode.Straight,
         LineSize = 2,
         PointSize = 3,
         LabelTextSize = 12,
         BackgroundColor = SKColors.Transparent,
     };
     ctdata.Chart= chart;

相關文章