Fall Madly In Love With These 10 Xamarin Charts!

昨晩、Syncfusion の “Fall Madly In Love With These 10 Xamarin Charts!” というWebセミナーがありました.

今回はこのWebセミナーの簡単なまとめです.

Syncfusion は .NET系の様々なコンポートを提供しています．Xamarin.Traditional/Xamarin.Forms にも対応しています．

こちらのアプリでサンプルを見ることができます．

Syncfusion Controls Explorer – Google Play の Android アプリ

Syncfusion Controls Explorer on the App Store

ライセンスは Community license, Flat license の2つがあります．

• 個人開発者
• 年間売り上げ100万$以下の企業
• 使用可能なユーザーは5人まで

上記の条件を満たしていれば「無償」で、「商用アプリも可能」な Community license が適用できます．

そうでない場合は Flat license が適用されます．

Unlimited flat fee license for Syncfusion products

ライセンスに関しての詳しい情報は上記ページをご覧ください．

紹介されていた10個のチャート

1つ目は Rader Chart です.

DrawType を指定で 線、面に描き分けできます．また、凡例の表示・非表示も設定可能です.

2つ目は Range Area Chart です.

線と面の両方に色の指定が可能です.また、EnableToolTip=True にすることでタップ時に値を表示できます．

3つ目は Pyramid です.

PyramidType の指定が可能で、Linear と Surface が選択可能．色も自由にカスタマイズできます．

左が Linear で右が Surface です.おそらく Linear は領域の高さで値を表しているのに対し、Surface は領域の面積で値を表しているのではないかと思います．

4つ目は Stacked area です.

Serieas ごとに値のバインディングができます！今回の例ではコードビハインドで ItemSource を指定してそうですが、もちろん ViewModel でのバインドも可能です.チャートの細かい設定は全部 XAML に追い出せるの、控えめに言って最高だろ！(ちなみに、似たようなチャートライブラリである OxyPlot for Xamarin.Forms はあまりバインディング効きません…)

5つ目は 100% Stacked Column です.

こちらもバインディング効きます．控えめに言って（ry

6つ目は Multiple Axis Column です.

Chart の PrimaryAxis(X軸) SecondaryAxis(Y軸) の他に、Series ごとに Axis を設定してあげることで複数軸のチャートが作成できます．複数のグラフを比較することはよくあることなので、とても実用的ですね．

7つ目は Candle です.

日本語では箱ひげ図が一般的でしょうか？最大値・最小値・四分位数を表すグラフですね．株取り引きなどでよく使われるグラフだと思います．

こちらもバインディングが効きます．IsTransposed = True にすると横向きにもできます．

8つ目は Columns です.一般的な棒グラフですね．

DataMarker に任意のテンプレートを適用できることを紹介していました.カスタマイズ性が高くて良いですね．

9つ目は Doughnut です.

色々な属性を指定できるようです.例えば、開始角度などがあるようです.

項目をタップすると少し大きくなったり、凡例がスクロールできたりと、細かいところまでサポートされています．

最後は Spline A です.

こちらもテンプレートの例が紹介されていました.

感想

バインディングが効くの最高！これですね．Event も Behavior 使えば問題なくバインディングできるのでほぼほぼ XAML で書けるかと．

各チャートのプロパティも色々なものがあり、多彩なグラフを比較的簡単に作れると思います．

また、テンプレートを用いたカスタマイズ性の高さも良いですね．これは実際に使ってみたいと思いました.

録画もそのうち見られるようになるようなので、興味のある方はぜひご覧いただければと思います．

以上です.