Run Fast: ストレス テスト レンダリング
金融向け、あるいは医療向けアプリケーションにおいて、一つの画面に複数のチャートを配置し、そこにリアルタイム データを表示させることは特殊ではありません。当然、使用する UI コントロールもそういったシナリオをカバーするため限りなく高速に表示でき、さらに複数のチャートを表示できることが重要になります。このレッスンでは標準的な性能のタブレットやスマートフォンにおいて Infragistics Ultimate UI for Xamarin が提供しているチャートを複数配置し、リアルタイムに更新させます。更に設定を変更することでパフォーマンスを向上させる方法を学びます。
このレッスンは複数のチャートを 1 画面に配置しストレス テストを実施します。1 画面に 3 つの異なるデータを 3 つの異なるチャートにバインドします。
レッスンの目的
このレッスンを終えることで Infragistics が提供するチャートのパフォーマンス耐性を理解できます。
- プロジェクトのセットアップ
- チャートを 1 つ作成
- ソリューションのテスト
- 別のチャートをソリューションに追加
- ソリューションの再テスト
このレッスンで使用されているコントロールについては Xamarin カテゴリー チャート コントロール ページ をご覧ください。
手順1: プロジェクトのセットアップ
こちらからこのレッスンで使用するプロジェクトをダウンロードいただけます。zip ファイルのプロパティを表示し、[ブロックの解除] にチェックを入れ [OK] ボタンをクリックします。
zip ファイルを解凍し、XFPerfSamples.sln ソリューションを Visual Studio で開きます。ソリューションを右クリックし、コンテキストメニューから [NuGet パッケージの復元] を選択します。
NuGet パッケージの復元を完了した後、XFPerfSamples および、XFPerfSamples.Droid プロジェクトに DataSource.DataProviders.OData.Core.dll への参照を追加します。このファイルは解凍した ZIP ファイルの OtherDependencies フォルダーに存在しています。各プロジェクトの [参照] を右クリックしコンテキストメニューから [参照の追加] をクリックします。
表示された参照マネージャー ウィンドウの右下に表示されている [参照] ボタンをクリックし、プロジェクトフォルダーの OtherDependencies フォルダー直下に存在する、DataSource.DataProviders.Odata.Core.dll ファイルを選択し[追加] ボタンを選択します。
参照マネージャーに dll が表示されていることを確認し、[OK] ボタンをクリックすると参照設定が解決されます。
参照設定が完了した後に XFPerfSamples.Droid プロジェクトを右クリックし、コンテキストメニューから [プロパティ] をクリックします。
プロジェクト設定画面において ターゲット Android バージョン が "SDK バージョンを使用したコンパイルの使用" となっていることを確認してください。
手順2: チャートを 1 つ作成
XfPeformSamples プロジェクトの Views フォルダーを展開し、ChartStressTest.xaml を開きます。このファイルは既に Infragistics チャート コントロールを利用するための名前空間と、RowDefinition、ColumnDefinition が定義されているレイアウト グリッドが設定されています。このレッスンではどれくらいのデータがアプリケーションで使用されているかを計測します。
このレイアウト グリッドに下記のコードのようにカテゴリー チャートを追加します。
<igCharts:XamCategoryChart x:Name="chart1" Title="Chart1"
ItemSource="{Binding Path=Data}"
MarkerTypes="None"
Grid.Row="0">
</igCharts:XamCategoryChart>
<Label Text="{Binding Path=FpsText}" Grid.Row="1" />このコードセグメントはあらかじめ設定されているデータ ソースを利用しチャートを作成します。標準ではマーカーが表示されますが、このコードセグメントではパフォーマンス向上のため、無効化しています。更にチャートの下にラベルを追加し、フレーム/秒を表すデータをバインドします。
手順3: ソリューションのテスト
チャートの設定を終えた後、ソリューションをエミュレーター、あるいは物理デバイスで実行し動作結果を確認します。アプリケーションが実行した後に CHART - STRESS TEST ボタンをクリックします。
画面遷移の後に折れ線チャートが生成されます。チャートの下にフレーム/秒が表示され更新されます。追加したチャートでは約 1,000 点のデータが使用されており、我々のサンプルの環境では 40 フレーム/秒でした。
手順4: 別のチャートをソリューションに追加
ストレス テストを実施するため、設定項目を増やしたチャートを追加します。下記のコードを最初のチャートの下に追加してください。
<igCharts:XamCategoryChart x:Name="chart2" Title="Chart2" ItemSource="{Binding Path=Data1}"
MarkerTypes="None"
YAxisExtent="40"
XAxisExtent="40"
Grid.Row="1">
</igCharts:XamCategoryChart>
<igCharts:XamCategoryChart x:Name="chart2" Title="Chart2" ItemSource="{Binding Path=Data1}"
MarkerTypes="None"
YAxisExtent="40"
XAxisExtent="40"
YAxisMinimumValue="0"
YXaisMaximumValue="100"
Grid.Row="2">
</igCharts:XamCategoryChart>
<Label Text="{Binding Path=FpsText}" Grid.Row="3" />このコードセグメントは2つのチャートをY軸とX軸の設定と共にViewに追加しています。3つ目のチャートについてはY軸の最小・最大値を指定しています。軸範囲をあらかじめ指定することで実行時にチャート コントロールは実施すべき演算処理を最小化できます。
手順5: ソリューションの再テスト
再度、ソリューションをエミュレーター、あるいは物理デバイスで実行し動作結果を確認します。アプリケーションが実行した後に CHART - STRESS TEST ボタンをクリックします。下記のように 3 つのチャートが表示されます。最初の 2 つのチャートはデータに合わせて Y 軸のスケールが変化しますが、3 番目のチャートについてはあらかじめ最大値が 100 と設定されているため変動がありません。チャートを追加したことによるパフォーマンスの変動を確認してください。我々の環境では 25-30 フレーム/秒程度となり、十分に使用に耐えるものと判断できます。
結びに
XamCategoryChart を使用することで 1 画面で複数のデータ ソースをパフォーマンスを犠牲にすることなく表示できます。