ここでは、コード例とともに、XamDataChart™ コントロールでツールチップを表示する方法を説明します。
XamDataChart コントロールでは、 チャート プロット エリアでタップとホールドのジェスチャが実行されるとツールチップが表示されます。また、タップとホールドをしてから、放さずに指を移動させると、ツールチップの値が更新されます 。
ツールチップは次の特性をカスタマイズできます。
ツールチップのコンテンツ
ツールチップ ルックアンドフィール
ツールチップ コンテンツは、Series オブジェクトの ToolTipTemplate プロパテによって提供されます。Xamarin.Forms では、ツールチップを構成する視覚要素を含む DataTemplate を使用します。
また、ToolTipBackgroundColor、ToolTipBorderColor、 ToolTipBorderThickness を設定してツールチップのルックアンドフィールを更にカスタマイズすることもできます。
注: ツールチップは、ScatterSeries および PolarSeries で現在サポートされません。
アプリケーションでナビゲーションを実装した場合、ツールチップが表示されているときに XamDataChart 以外へナビゲーションすることが可能ですが、トランジションが完了するまでツールチップが画面に表示されます。その前にツールチップを非表示にするには、ナビゲーションを開始する前に XamDataChart の HideToolTip メソッドを呼び出します。
HideToolTip を呼び出す際に、フレームワークが XamDataChart の操作を許可するかどうかに基づいて Flush を呼び出す必要がある場合があります。XamDataChart のツールチップの非表示などの操作が遅延されます。フレームワークがコントロールの操作を許可しない場合、ツールチップはただちに非表示になりません。このような場合に Flush を呼び出すと、遅延された操作をすぐに実行し、ツールチップを非表示にします。
この例は、財務チャートの任意のポイントの、オープン、高、低、およびクローズの売上高に関する情報をツールチップで表示する方法を示します。これを達成するには、 LineSeries で量の値を、そして FinancialPriceSeries でオープン、高、低、およびクローズの値を表示するカスタム ツールチップを作成します。
図 1: 財務物価シリーズの値を示すカスタム ツールチップを含む XamDataChart コントロール
ツールチップの背景と境界線を設定します。
XAML の場合:
<ig:XamDataChart x:Name="dataChart1"
ToolTipBackgroundColor="#80F4F4F4"
ToolTipBorderColor="#1E000000"
ToolTipBorderThickness="2">
<!--TODO: Add Series with custom tooltip content -->
</ig:XamDataChart>カスタム ツールチップ コンテンツを Series オブジェクトの ToolTipTemplate プロパティに追加します。
XAML の場合:
<ig:XamDataChart.Series>
<ig:LineSeries ItemsSource="{Binding}"
ValueMemberPath="Volume"
XAxis="{x:Reference commonXAxis}"
YAxis="{x:Reference volumnYAxis}"
Title="Volume Series">
<ig:LineSeries.ToolTipTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" Margin="5">
<Label Text="{Binding Series.Title}" FontAttributes="Bold" />
<StackLayout Orientation="Horizontal">
<Label Text="Value:" FontSize="12"/>
<Label Text="{Binding Item.Volume}" FontSize="12"/>
</StackLayout>
</StackLayout>
</DataTemplate>
</ig:LineSeries.ToolTipTemplate>
</ig:LineSeries>
<ig:FinancialPriceSeries DisplayType="Candlestick"
ItemsSource="{Binding}"
OpenMemberPath="Open"
CloseMemberPath="Close"
HighMemberPath="High"
LowMemberPath="Low"
VolumeMemberPath="Volume"
XAxis="{x:Reference commonXAxis}"
YAxis="{x:Reference priceYAxis}"
Title="Price Series">
<ig:FinancialPriceSeries.ToolTipTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" Margin="5">
<Label Text="{Binding Series.Title}" FontAttributes="Bold" />
<StackLayout Orientation="Horizontal">
<Label Text="Open:" WidthRequest="40" FontSize="12"/>
<Label Text="{Binding Item.Open}" FontSize="12"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="High:" WidthRequest="40" FontSize="12"/>
<Label Text="{Binding Item.High, StringFormat='{0:N2}'}" FontSize="12"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Low:" WidthRequest="40" FontSize="12"/>
<Label Text="{Binding Item.Low, StringFormat='{0:N2}'}" FontSize="12"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Close:" WidthRequest="40" FontSize="12"/>
<Label Text="{Binding Item.Close}" FontSize="12"/>
</StackLayout>
</StackLayout>
</DataTemplate>
</ig:FinancialPriceSeries.ToolTipTemplate>
</ig:FinancialPriceSeries>
</ig:XamDataChart.Series>