GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

タッチ操作でデータを見やすく表示する

はじめに

今回はComponentOne for Xamarinのコントロールの1つ、FlexChart(フレックスチャート)の機能を紹介します。

モバイルやタブレットでデータをチャートで視覚的に表示する際に、ディスプレイサイズの制限により参照したいデータを表示しづらいケースがあります。FlexChartはタッチ操作に対応していますので、このようなケースをカンタンに解決することができます。

ズーム

ZoomBehaviorを使用してチャートでのズーム動作を設定できます。GestureModeの値によってズーム動作を変更できます。以下はX軸とY軸両方向でズームができるように設定しています。

ZoomBehavior z = new ZoomBehavior();
z.ZoomMode = GestureMode.XY;
flexchart.Behaviors.Add(z);

f:id:GrapeCity_dev:20180507110800g:plain

スクロール

TranslateBehaviorを使用してチャートでのスクロール動作を設定できます。X軸とY軸両方向でズームができるように設定している場合は両軸方向にスクロールができます。

TranslateBehavior t = new TranslateBehavior();
flexchart.Behaviors.Add(t);

f:id:GrapeCity_dev:20180507112919g:plain

まとめ

設定はシンプルなので非常に使いやすく、利用シーンも多そうですね。是非お試しください!

なお、今回の機能はWijmoやComponentOne for ASP.NET MVCのFlexChartでも確認いただけます。こちらもあわせてお試しください。

ズーム操作 | Wijmo f:id:GrapeCity_dev:20180508113118p:plain:w600

FlexChart - ズームとパン - ComponentOne for ASP.NET MVC f:id:GrapeCity_dev:20180508113152p:plain:w600

Copyright © GrapeCity, Inc. All Rights Reserved.