Xamarin.FormsでChart.jsみたいに簡単にグラフを描画する2

2020年7月12日

前回の内容はこちら

今回は、前回の続きということで、実際にグラフの目盛りだけじゃなくてデータも一緒に表示させる。今回の修正により、こんなグラフが描画されるようになる。
ソースコードはこちらにあります。

今回もほぼ公式と同じようにやっていく。
ただ、一部ViewModelの名前を変えたりする。
理由としては、今後もこのプロジェクトを使っていくうえで名前が衝突してしまいそうだから。
例えば、今回のソースを例にすると ViewModel というクラス名になっているけど、これをGettingStarted2ViewModelとして画面と紐づくようにしておく。

データプロットのためにクラスとViewModelを作る

Personクラスを作成する。

1
2
3
4
5
6
7
8
9
namespace HowToUseSyncfusionXamarin.GettingStarted
{
    public class Person
    {
        public string Name { get; set; }
 
        public double Height { get; set; }
    }
}

GettingStarted2ViewModelを作成する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
using System.Collections.Generic;
 
namespace HowToUseSyncfusionXamarin.GettingStarted
{
    public class GettingStarted2ViewModel
    {
        public List<Person> Data { get; set; }
 
        public GettingStarted2ViewModel()
        {
            Data = new List<Person>()
            {
                new Person { Name = "David", Height = 180 },
                new Person { Name = "Michael", Height = 170 },
                new Person { Name = "Steve", Height = 160 },
                new Person { Name = "Joel", Height = 182 }
            };
        }
    }
}

バインドデータとXAMLの紐づけ

GettingStarted2.xamlを作成して以下のようにコードを書いていく。

GettingStarted2.xaml.csでGettingStarted2ViewModelをBindingContextに嵌め込む。

1
2
3
4
5
6
7
8
9
10
11
12
13
using Xamarin.Forms;
 
namespace HowToUseSyncfusionXamarin.GettingStarted
{
    public partial class GettingStarted2 : ContentPage
    {
        public GettingStarted2()
        {
            InitializeComponent();
            this.BindingContext = new GettingStarted2ViewModel();
        }
    }
}

GettingStarted2.xamlを編集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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.GettingStarted.GettingStarted2">
    <chart:SfChart>
        <chart:SfChart.PrimaryAxis>
            <chart:CategoryAxis>
                <chart:CategoryAxis.Title>
                    <chart:ChartAxisTitle Text="Name"></chart:ChartAxisTitle>
                </chart:CategoryAxis.Title>
            </chart:CategoryAxis>
        </chart:SfChart.PrimaryAxis>
        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis>
                <chart:NumericalAxis.Title>
                    <chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>
                </chart:NumericalAxis.Title>
            </chart:NumericalAxis>
        </chart:SfChart.SecondaryAxis>
        <chart:SfChart.Series>
            <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
            </chart:ColumnSeries>
        </chart:SfChart.Series>
    </chart:SfChart>
</ContentPage>

各ソースの結びつき

ここまでのソースを写経すれば動くようになります。

PersonクラスのNameとHeightが描画したいグラフのデータとなります。
XAML側は、以下の部分でNameとHeightの紐づけをしています。

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

ItemSource="{Binding Data}"はGettingStarted2ViewModel.Dataとの紐づけをしています。
GettingStarted2ViewModelの7行目にある
public List Data { get; set; }
がそれです。

XAMLのコードにまだ不慣れなので、C#で書いた場合のソースを見てみようと思います。コード内に説明を書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// chartのインスタンスを生成
// <chart:SfChart>
SfChart chart = new SfChart();
 
// primary axis(X軸)を初期化
// <chart:SfChart.PrimaryAxis>
CategoryAxis primaryAxis = new CategoryAxis();
 
// X軸のタイトルを設定
// <chart:ChartAxisTitle Text="Name"> </chart:ChartAxisTitle>
primaryAxis.Title.Text = "Name";
 
// primary axisをchartのPrimaryAxisプロパティに設定
// <chart:SfChart>にネストして記述することでchartのプロパティアクセスしていると捉えています。
chart.PrimaryAxis = primaryAxis;
 
// secondary Axis(y軸)を初期化
// <chart:SfChart.SecondaryAxis>
NumericalAxis secondaryAxis = new NumericalAxis();
 
// ｙ軸のタイトルを設定
// <chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>
secondaryAxis.Title.Text = "Height (in cm)";
 
// secondary AxisをchartのPrimaryAxisプロパティに設定
// 14行目と同様
chart.SecondaryAxis = secondaryAxis;
 
// 棒グラフをシリーズをインスタンス化
// <chart:SfChart.Series>
ColumnSeries series = new ColumnSeries();
 
// 棒グラフのデータをセット
// <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height"></chart:ColumnSeries>
series.SetBinding(ChartSeries.ItemsSourceProperty, "Data");
 
// X軸で使用するデータの紐づけ先の設定
// 34行目のXBindingPath="Name"
series.XBindingPath = "Name";
 
// y軸で使用するデータの紐づけ先の設定
// 34行目のYBindingPath="Height"
series.YBindingPath = "Height";
 
// seriesをchartに追加
// // <chart:SfChart>にネストして記述することでchart.Seriesにaddされている
chart.Series.Add(series);
 
// chartをContent内に設定
this.Content = chart;

上記C#のソースコード内にXAMLとの対比を見てきた。
ほとんどXAMLの解説になってしまったような気がしますが。。。
データさえ用意すれば簡単にイカしたグラフが作成できることがわかったと思います。

まとめ

今回のコードでやっていることは
・Chartを生成
・軸を生成
・グラフのシリーズを生成
となります。
これ以降で作成するグラフも上記内容がベースとなって、あとはオプションで他のプロパティを設定したりするという感じでしょうか。

例えば、これ以外にもタイトルを追加したり、ToolTipを出したり、判例を表示したり等の設定ができます。
次回はこれらの設定方法を見ていきます。

C#, XamarinSyncfusion

Posted by takumioda