読者です 読者をやめる 読者になる 読者になる

ぴよぴよエンジニアの日記

クラウドベンダーに勤める見習いSEの日記です。発言は私自身の見解であり、必ずしも所属組織の立場、戦略、意見を代表するものではありません。

Fall Madly In Love With These 10 Xamarin Charts!

昨晩、Syncfusion の "Fall Madly In Love With These 10 Xamarin Charts!" というWebセミナーがありました.
今回はこのWebセミナーの簡単なまとめです.

f:id:Santea:20170222145257p:plain


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

www.syncfusion.com
help.syncfusion.com


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

Syncfusion Controls Explorer - Google Play の Android アプリ
Syncfusion Controls Explorer on the App Store


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

f:id:Santea:20170222145907p:plain

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

上記の条件を満たしていれば「無償」で、「商用アプリも可能」な Community license が適用できます.
そうでない場合は Flat license が適用されます.

Unlimited flat fee license for Syncfusion products

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





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

f:id:Santea:20170222150936p:plain

1つ目は Rader Chart です.

f:id:Santea:20170222151505p:plain

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




f:id:Santea:20170222151801p:plain

2つ目は Range Area Chart です.

f:id:Santea:20170222152647p:plain

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




f:id:Santea:20170222153046p:plain

3つ目は Pyramid です.

f:id:Santea:20170222154238p:plain

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

f:id:Santea:20170222154302p:plain

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




f:id:Santea:20170222154744p:plain

4つ目は Stacked area です.

f:id:Santea:20170222155229p:plain

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



f:id:Santea:20170222155803p:plain

5つ目は 100% Stacked Column です.

f:id:Santea:20170222160243p:plain

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




f:id:Santea:20170222160542p:plain

6つ目は Multiple Axis Column です.

f:id:Santea:20170222161241p:plain

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




f:id:Santea:20170222161651p:plain

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

f:id:Santea:20170222162128p:plain

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




f:id:Santea:20170222162557p:plain

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

f:id:Santea:20170222163110p:plain
f:id:Santea:20170222163349p:plain

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




f:id:Santea:20170222163625p:plain

9つ目は Doughnut です.

f:id:Santea:20170222163903p:plain

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

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




f:id:Santea:20170222164202p:plain

最後は Spline A です.

f:id:Santea:20170222164436p:plain

f:id:Santea:20170222164710p:plain

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





感想

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

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

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

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

以上です.