【XAMARIN】グラフを描いてみる

OxyPlotなど色々なプラグインがあったのですが、デザイン的に
「Microcharts」
を採用してみました

1. 共通プロジェクト、iOSプロジェクト、Androidプロジェクトにライブラリを追加

Nugetにて以下のライブラリを全てのプロジェクトに追加

• Microcharts

• Microcharts.Forms

2. 共通プロジェクトの MainPage.xaml を編集する

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
             xmlns:local="clr-namespace:TestProject" 
             x:Class="TestProject.MainPage">
    <StackLayout>
        <microcharts:ChartView x:Name="chartView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    </StackLayout>
</ContentPage>

3. 共通プロジェクトの MainPage.xaml.cs を編集する

public MainPage()
{
    InitializeComponent();

    List<Microcharts.Entry> entries = new List<Microcharts.Entry>
    {
        new Microcharts.Entry(200)
        {
            Label = "Data 1",
            ValueLabel = "200",
            Color = SkiaSharp.SKColor.Parse("#266489")
        },
        new Microcharts.Entry(400)
        {
            Label = "Data 2",
            ValueLabel = "400",
            Color = SkiaSharp.SKColor.Parse("#68B9C0")
        },
        new Microcharts.Entry(-200)
        {
            Label = "Data 3",
            ValueLabel = "-200",
            Color = SkiaSharp.SKColor.Parse("#90D585")
        }
    };

    this.chartView.Chart = new Microcharts.BarChart { Entries = entries };
}

4. 動かす

棒グラフが表示された。
※画像はFontawesomeのテストも表示されてしまっています

棒グラフの他に、円グラフや線グラフなども簡単にできそう

あと、ラベルの大きさはどう変えるんだろうか・・・