このトピックでは、コード例と共に、XamDataChart™ コントロールの同じプロット領域に複数のタイプの Series をプロットして合成チャートを作る方法について説明します。
XamDataChart は、同じチャート プロット領域でシリーズをいくつでも無制限にサポートします。これは、さまざまなタイプの Series オブジェクトを XamDataChart コントロールの Series コレクションに追加することによって達成されます。チャートに追加される各シリーズは適切なタイプの一対の軸とデータ メンバー マッピングを持つ必要があります。この詳細は、シリーズ要件トピックを参照してください。複数のシリーズを任意の組み合わせでプロットできることに加え、いくつかの軸のタイプはさまざまなシリーズ (表 1 参照) の間で共有でき、合成チャートの作成プロセスが非常に容易になります。
別のデータ ソースを持つ複数のシリーズをプロットする場合、CategoryDateTimeXAxis または TimeXAxis を使用してチャートにシリーズのプロットで複数のデータ ソースの項目を配置しません。結果として、データ ソースに対応する項目がない場合、null 項目を挿入してデータ項目を整列する必要があります。
次の表はさまざまなシリーズでサポートされる軸のタイプとどの軸がデータ チャートの異なるシリーズ間で共有できるかを示しています。軸の共有方法についての詳細は、このトピックの例のセクションおよび複数軸トピックを参照してください。
このセクションでは XamDataChart コントロールで複数シリーズを使用した例をいくつか提供します。データ描画規則に関する詳細は個別のタイプのシリーズを参照してください。
前のセクションで、シリーズが異なるシリーズのグループから混在することができることを説明しました。カテゴリ シリーズ グループからのLineSeries タイプと財務シリーズ グループからの FinancialPriceSeries タイプの使用はその一例です。この例では、同じチャート プロット領域で LineSeries は株式市場の出来高をプロットし、FinancialPriceSeries タイプは株価 (始まり値、安値、高値、終わり値) をプロットします。さらにこれらの 2 つのシリーズはデータ ポイントを水平に揃えるために ｘ 軸を共有します。他のタイプのシリーズもシリーズ要件を満足する限りどのような組み合わせでもプロットのために同じロジックを適用できます。
図 1 – LineSeries と FinancialPriceSeries が同じ ｘ 軸を共有する実装の例
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"XAML の場合:
<ig:XamDataChart x:Name="DataChart" >
<ig:XamDataChart.Axes>
<ig:CategoryXAxis x:Name="sharedXAxis" ItemsSource="{Binding}" Label="Date" LabelLocation="OutsideBottom" />
<ig:NumericYAxis x:Name="volumeYAxis" LabelLocation="OutsideRight" />
<ig:NumericYAxis x:Name="priceYAxis" LabelLocation="OutsideLeft" />
</ig:XamDataChart.Axes>
<!-- ========================================================================== -->
<ig:XamDataChart.Series>
<ig:FinancialPriceSeries x:Name="priceSeries" Title="Stock Price"
DisplayType="Candlestick"
ItemsSource="{Binding}"
OpenMemberPath="Open"
CloseMemberPath="Close"
HighMemberPath="High"
LowMemberPath="Low"
XAxis="{x:Reference sharedXAxis}"
YAxis="{x:Reference priceYAxis}">
</ig:FinancialPriceSeries>
<ig:LineSeries x:Name="volumeSeries"
Title="Stock Volume"
ValueMemberPath="Volume" ItemsSource="{Binding}"
XAxis="{x:Reference sharedXAxis}"
YAxis="{x:Reference volumeYAxis}"
MarkerType="None"
Thickness="5" />
</ig:XamDataChart.Series>
<!-- ========================================================================== -->
</ig:XamDataChart>