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

2020年7月11日2020年7月13日

タイトルの通り、今回はXamarin.Formsでイカしたグラフを使えるように説明していきたい。Webでグラフを表示するとなると、Chart.jsを使う機会は少なくないかなと思い、そういうキーワードで検索していると Syncfusion のサービスを見つけました。

私のモットーは、可能な限り外部のライブラリーを使って巨人の肩に乗りまくることです。不意に巨人が消滅したり、思わぬところで振り落とされて大怪我することもありますが、使えるものは使っていこうというスタンスです。

今回は、初回ということで、公式のGetting Started with Xamarin Charts (SfChart)に沿って手を動かしていこうと思います。

1. プロジェクトを作成する
2. Getting Started with Xamarin Charts (SfChart) を実際に手を動かしてやっていく
3. おわりに

プロジェクトを作成する

Syncfusionの使い勝手を知るために、いろんなサンプルを実際に手を動かして学んでいこうと思う。ということで、まずはプロジェクトを作成する。
いつものように、Xamarin.Formsのプロジェクトを作ろうとしたけど、Syncfusionをインストールしたことで、Syncfusion Xamarin Project Templateというのがあった。なので、こちらを使ってみよう。
その前に、Syncfusionの登録が済んでいない場合は、以下を参考に登録して使えるようにしておきましょう。

Syncfusionの登録とライセンスの設定

※今回の説明で使うソースコードはこちら。

公式のドキュメントを見る限り、Syncfusion Xamarinプロジェクトテンプレートはv16.2.0.41から利用可能とのことです。

※以下画像のプロジェクト名ではLearnSyncfusionXamarinAppとなってますが、HowToUseSyncfusionXamarinで作成しています。実際に手を動かす段階で名前空間が違ってエラーとなるので、 HowToUseSyncfusionXamarinでプロジェクトを作成してください。

作成を押すと、以下のようにプロジェクトの設定ウィザードが出てくる。
Choose controlsでは、今回Chartを使ってみたかったので、それを選択してプロジェクトを作成する。

どうでもいいことだけど、ブログを書きながら進めていると、プロジェクトの設定ウィザードの画面が背後にいって行方不明になった。Alt+Tabで開いているウィンドウから探さないといけなかったのがめんどくさかった。

さて、作成されたプロジェクトをVisual Studioで開くと以下のような状態だった。とりあえずリビルドして、Android向けにデバッグ実行してみる。

上記Androidのバージョンを下記のようにエラーである

毎度こういう環境構築系の時は何かしらエラーが出ているけど、今回も例にもれず、エラーが出た。

重大度レベル	コード	説明	プロジェクト	ファイル	行	抑制状態
エラー		The $(TargetFrameworkVersion) for LearnSyncfusionXamarinApp.Android (v8.1) is less than the minimum required $(TargetFrameworkVersion) for Xamarin.Forms (9.0). You need to increase the $(TargetFrameworkVersion) for LearnSyncfusionXamarinApp.Android.	LearnSyncfusionXamarinApp.Android

プロジェクトを作った時に
Target Android VersionをUse Complie using SDK Versionを選択していたのがまずかったのだろうか。今となってはわからない。
ただ、エラーを見る限り
プロジェクトファイルの設定をいじってTargetFrameworkVersionに関わるところを修正すればなんとかなった。

AndroidプロジェクトのプロパティからAndroidバージョンを指定したコンパイル(ターゲットフレームワーク)というのが見つかる。
エラーからXamarin.Forms (9.0)が要求されているようなので、ここのバージョンをAndroid9.0に変更する。するとエラーが消えて正常にビルドが完了した。

Getting Started with Xamarin Charts (SfChart) を実際に手を動かしてやっていく

こちらが公式のサイトです。英語なので適宜翻訳ツールとか使いながらやっていけばできますが、こちらでざっくりとした流れとソースコード，その解説を書いていこうと思います。

このセクションでは、チャートを使い始めるために知っておくべき最低限の機能をカバーしています。

とのことなので、実際にやっていきます。

既に、【プロジェクトを作成する】で参照等の設定は終わっていると思います。なので、実際にやっていきます。

公式でいうと、Initialize Chartから目を通せばOKです。

今回、私が作成したプロジェクトではInitialize Chartをデフォルトで用意されるMainPage.xamlに記述するのではなく、GettingStarted1.xamlというように各フェーズごとにサンプルを用意しました。これらをデバッグ時に表示させるためには、App.xamlに変更を加える必要がありますが、その点については後ほど解説したいと思います。

まずはグラフの目盛りだけを表現したグラフを描画する。

GettingStarted1.xaml を作成し、公式と同じソースを動かせるようにする。

ところで、以下のように公式ではXAMLタブとC#タブがあります。
XAML側に記述する方法とC#で記述する方法があり、どちらの方法でやっても同じ結果になります。
WinFormsをやってた人なら、デザイナ部分をデザイナファイルで記述するのか、コードビハインドで記述するかの違いという感じで捉えればいいかなと思います。

ということで、実際動くようにしたコードはこちらにあります。
実際のソースコードを見ていきたいと思います

GettingStarted1.xaml の作成

MainPage.xamlをGettingStarted1.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:local="clr-namespace:HowToUseSyncfusionXamarin"
             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
			x:Class="HowToUseSyncfusionXamarin.GettingStarted1">
    <chart:SfChart>
        <chart:SfChart.PrimaryAxis>
            <chart:CategoryAxis>
            </chart:CategoryAxis>
        </chart:SfChart.PrimaryAxis>
        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis>
            </chart:NumericalAxis>
        </chart:SfChart.SecondaryAxis>
    </chart:SfChart>
</ContentPage>

SfChartを使えるようにするため、ネームスペースをページにインポートします。
xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"

上記コードをCで書くと以下になります。

SfChart chart = new SfChart();

 //Initializing Primary Axis
CategoryAxis primaryAxis = new CategoryAxis();

chart.PrimaryAxis = primaryAxis;

//Initializing Secondary Axis
NumericalAxis secondaryAxis  =  new NumericalAxis  ();

chart.SecondaryAxis = secondaryAxis;

this.Content = chart;

XAML記法自体の説明になってしまいますが、XAMLで
<chart:SfChart>と記述することで SfChart がインスタンス化されます。そのインスタンス化された SfChart に対して、primaryAxisやらsecondaryAxisを設定しているという流れです。

GettingStarted1.xaml .csのソースコード

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Syncfusion.SfChart.XForms;
using Xamarin.Forms;

namespace HowToUseSyncfusionXamarin
{
    public partial class GettingStarted1 : ContentPage
    {
        public GettingStarted1()
        {
            InitializeComponent();
        }
    }
}

XAML側でインスタンス化したりしているので、こちらは何も変更していません。

App.xaml.csを変更して初回起動のページを変更する

上記の手順通りにやっていれば MainPage.xamlをGettingStarted1.xamlに名称変更して作成しているはずなので、この手順は不要なのですが、今後新しくページを作った際に、初回起動のページを変えたいことがあると思います。
やり方は、App.xaml.csでページのインスタンスを差し替えることで実現できます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace HowToUseSyncfusionXamarin
{
    public partial class App : Application
    {
        public App()
        {
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("");
            InitializeComponent();
            MainPage = new HowToUseSyncfusionXamarin.GettingStarted1();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

16行目の
MainPage = new HowToUseSyncfusionXamarin.GettingStarted1();
というところで、リネームした GettingStarted1 のページで起動するようにしています。例えば、ここを変更してやれば起動ページを変更することができます。

おわりに

今回は、データをプロットするというところまではやってませんが、Syncfusion Essential Studio for Xamarin.Formsに触れるというところまでは説明できたかなと思います。
次回は実際にデータをプロットするところを書きたいなと思ってます。

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

C#, XamarinSyncfusion

Posted by takumioda

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