Run Fast: 高パフォーマンス、大量データに対応するチャート

始めに

通常モバイルアプリケーションでは円チャートや基本的な折れ線チャートのような単純な可視化パターンが使用されますが、場合によっては数千から数百万点のデータを完璧にモバイル デバイスでミリ秒のリフレッシュ レートと即座のタッチ レスポンスを実現することが求められる場合があります。このレッスンでは大量のリアルタイムデータを Infragistics Ultimate UI for Xamarin で提供しているチャートを利用し表示させる方法を学びます。 

レッスンの目的

このレッスンを終えることでチャートを使用し数十万ものデータ ポイントをフレームレートを犠牲にせずに可視化する方法を理解できます。

  1. プロジェクトのセット アップ
  2. カテゴリー チャートの作成
  3. ソリューションのテスト

このレッスンで使用されているコントロールについては Xamarin データ チャート コントロール ページ をご覧ください。

手順1: プロジェクトのセット アップ

こちらからこのレッスンで使用するプロジェクトをダウンロードいただけます。zip ファイルのプロパティを表示し、[ブロックの解除] にチェックを入れ [OK] ボタンをクリックします。

zip ファイルのセキュリティ

zip ファイルを解凍し、XFPerfSamples.sln ソリューションを Visual Studio で開きます。ソリューションを右クリックし、コンテキストメニューから [NuGet パッケージの復元] を選択します。
NuGet パッケージの復元

NuGet パッケージの復元を完了した後、XFPerfSamples および、XFPerfSamples.Droid プロジェクトに DataSource.DataProviders.OData.Core.dll への参照を追加します。このファイルは解凍した ZIP ファイルの OtherDependencies フォルダーに存在しています。各プロジェクトの [参照] を右クリックしコンテキストメニューから [参照の追加] をクリックします。
参照の追加

表示された参照マネージャー ウィンドウの右下に表示されている [参照] ボタンをクリックし、プロジェクトフォルダーの OtherDependencies フォルダー直下に存在する、DataSource.DataProviders.Odata.Core.dll ファイルを選択し[追加] ボタンを選択します。
参照の追加
アセンブリの追加

参照マネージャーに dll が表示されていることを確認し、[OK] ボタンをクリックすると参照設定が解決されます。
参照の追加

参照の解決

参照設定が完了した後に XFPerfSamples.Droid プロジェクトを右クリックし、コンテキストメニューから [プロパティ] をクリックします。
プロジェクトのプロパティ

プロジェクト設定画面において ターゲット Android バージョン が "SDK バージョンを使用したコンパイルの使用" となっていることを確認してください。

Android プロジェクトの設定

手順2: カテゴリー チャートの作成

XFPerfomSamples プロジェクトの Views フォルダーを展開し、ChartHighFrequency.xaml ファイルを開いてください。このファイルは既に Infragistics チャート コントロールを利用するための名前空間と、RowDefinitionColumnDefinition が定義されているレイアウト グリッドが設定されています。

このレイアウト グリッドに下記のコードのようにカテゴリー チャートを追加します。

<igCharts:XamCategoryChart x:Name="hfChart" Title="High Frequency Chart" ItemSource="{Binding Path=Data}" 
                                          ChartType="Line" 
                                          YAxisMaximumValue="1000" 
                                          YAxisMinimumValue="0" 
                                          MarkerTypes="None" 
                                          IsHorizontalZoomEnabled="True" 
                                          IsVerticalZoomEnabled="True">
</igCharts:XamCategoryChart>

このコード セグメントは ItemsSource で定義されているデータ ソースを使用した高頻度にデータが更新されるチャートを作成します。さらに、Y 軸の最大、最小値を定義することで実行時に軸の範囲を計算する必要がないようにしています。また、標準では各データ点のマーカー表示が有効になっていますが、このコード セグメントで無効化しています。さらに、チャートをタッチ フレンドリーなものとするように垂直および水平ズーム機能を有効にしています。

Xamarin 高速データ チャート - カテゴリーチャートの作成

手順3: ソリューションのテスト

高頻度にデータが更新されるチャートの設定を終えた後、ソリューションをエミュレーター、あるいは物理デバイスで実行し動作結果を確認します。アプリケーションが実行した後に CHART - HIGH FREQUENCY ボタンをクリックします。

Xamarin 高速データ チャート - ソリューションのテスト

折れ線チャートが生成されます。チャートのフレーム/秒とチャートにバインドされているデータはそれぞれ fps、Amount ラベルに表示されます。下記のスクリーンショットでは約 10,000 点のデータを 35 フレーム/秒で描画しています。

Xamarin 高速データ チャート - チャートのズーム

このチャートはリアルタイムで拡大や縮小を行うことができます。また、スライダーを移動させチャートにバインドするデータ量を変更することもできるようになっているため、ターゲットとするデバイスでどれくらいのパフォーマンスが期待できるかを確認できます。

Xamarin 高速データ チャート - チャートのパフォーマンス

データの量の変更や拡大・縮小の操作を行いパフォーマンスを確認してください。

結びに

ご覧いただいたように、XamCategoryChart はパフォーマンスを犠牲にせずに何十万ものデータを表示し、高頻度でデータを更新することが可能です。