Xamarin.Formsで円グラフを描画する１

2020年7月14日

前回の記事はこちら

前回までは公式のGettingStartedをそのままやっていたので、棒グラフが題材として取り上げられていた。
今回から、違うタイプのグラフを取りあげていこうと思います。
今回は円グラフを描画するところの解説をしていきます。

実際のところ、公式でもどんな種類のChartを描画できるのかということについては、こちらで解説されています。
非常に簡潔に書かれているので、必要であれば英語で見るか翻訳ツールを使えばいいと思うのですが、私の英語とXamarinの勉強のために、内容に沿いながらアウトプットの練習をしていきたいと思います。

一番シンプルな円グラフの描画

ここでいうシンプルは、オプションがなくて必要最低限で円グラフを描画することを指します。

まあもっとシンプルなものがあるかもしれませんが、以下で円グラフの表示に必要なソースをバキバキに記述していきます。

まずは、モデルの作成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
namespace HowToUseSyncfusionXamarin
{
    public class PieChartModel
    {
        public string Month { get; set; }
 
        public double Target { get; set; }
 
        public PieChartModel(string xValue, double yValue)
        {
            Month = xValue;
            Target = yValue;
        }
    }
}

次にモデルに準拠したViewModelを生成
実際に円グラフのデータはここで定義。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
using System.Collections.ObjectModel;
 
namespace HowToUseSyncfusionXamarin
{
    public class PieChartViewModel
    {
        public ObservableCollection<PieChartModel> Data { get; set; }
 
        public PieChartViewModel()
        {
            Data = new ObservableCollection<PieChartModel>()
            {
                new PieChartModel("Jan", 50),
                new PieChartModel("Feb", 70),
                new PieChartModel("Mar", 1),
                new PieChartModel("Apr", 57),
                new PieChartModel("May", 48),
            };
        }
    }
}

XAMLソース PieSample1.xaml

1
2
3
4
5
6
7
8
9
10
11
12
<?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:local="clr-namespace:HowToUseSyncfusionXamarin"
             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
            x:Class="HowToUseSyncfusionXamarin.PieSample1">
    <chart:SfChart>
        <chart:SfChart.Series>
            <chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Target"/>
        </chart:SfChart.Series>
    </chart:SfChart>
</ContentPage>

csソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Syncfusion.SfChart.XForms;
using Xamarin.Forms;
 
namespace HowToUseSyncfusionXamarin
{
    public partial class PieSample1 : ContentPage
    {
        public PieSample1()
        {
            InitializeComponent();
        }
        protected override async void OnAppearing()
        {
            this.BindingContext = new PieChartViewModel();
        }
    }
}

っで表示されるChartが以下となります。

前回と今回とでグラフの種類が異なりましたが、どのグラフを描画するかは以下の部分で決定されます。今回でいうと、以下です。

1
&lt;chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Target"/>

上記は円グラフ用のソースコードですが、 GettingStartedで使っていた棒グラフは以下のように棒グラフを指定していました。

1
&lt;chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" Label="Heights" EnableTooltip ="True">

以下のように

<chart:xxxSeries・・・・・・・

xxxの部分によって、描画するグラフを指定することができます。

注意すべきポイント

円グラフに使うYBindingPath=””の部分には注意しましょう。
うっかりYBindingPathにstringを設定したりするとエラーが出ます。
上記ではdouble型のTargetを設定していますね。
厄介なことに、エラーの内容がキャストの失敗とかではなかったので少しはまります。はい、うっかりstringを設定してしまいました。

上記ソースではないのですが
私のところで出たエラーは、Input string was not in a correct format
でした。

しかも、以下のINotifyPropertyChangedを実装したModelで発生しました。
ソースコードでいうと、以下の部分11行目でエラーが投げられました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public string TotalTime
        {
            set
            {
                if (_totalTime != value)
                {
                    _totalTime = value;
 
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs(nameof(TotalTime)));
                    }
                }
            }
            get
            {
                return _totalTime;
            }
        }

エラーの内容が想定される型と違うとか、エラーの場所が違うところで発生するとかならわかるのですが、上記だと本当に何のエラーだ？と思ってすぐにはわかりませんでした。

というわけで、セットするデータには注意しましょうねという話でした。

他にはどのようなグラフが使えるか

以下のようなグラフがあります。
今回は<chart:PieSeries>を使いました。
今後これらチャートをどうやって使うのか，どんなプロパティ，オプションがあるのかを解説していきます。

  • <chart:LineSeries>
  • <chart:FastLineSeries>
  • <chart:StackingLineSeries>
  • <chart:StackingLine100Series>
  • <chart:AreaSeries>
  • <chart:SplineAreaSeries>
  • <chart:StepAreaSeries>
  • <chart:BarSeries>
  • <chart:StackingBarSeries>
  • <chart:StackingBar100Series>
  • <chart:SplineSeries>
  • <chart:BubbleSeries>
  • <chart:ScatterSeries>
  • <chart:FastScatterSeries>
  • <chart:HiLoOpenCloseSeries>
  • <chart:CandleSeries>
  • <chart:RadarSeries>
  • <chart:PolarSeries>
  • <chart:PieSeries>
  • <chart:DoughnutSeries>
  • <chart:PyramidSeries>
  • <chart:FunnelSeries>
  • <chart:WaterfallSeries>
  • <chart:BoxAndWhiskerSeries>
  • <chart:ErrorBarSeries>

まとめ

凡例もなければ、円グラフの割合もわからないので、ただの模様くらいの勢いですが、ちゃんとした円グラフでしたね。

次回、ちゃんと円グラフっぽく値を表示したり、オプションを活用していきたいと思います。

C#, XamarinSyncfusion

Posted by takumioda