バージョン

チャート ツールチップ

ここでは、コード例とともに、XamDataChart™ コントロールでツールチップを表示する方法を説明します。

概要

XamDataChart コントロールでは、 チャート プロット エリアでタップとホールドのジェスチャが実行されるとツールチップが表示されます。また、タップとホールドをしてから、放さずに指を移動させると、ツールチップの値が更新されます 。

ツールチップの概要

ツールチップは次の特性をカスタマイズできます。

  • ツールチップのコンテンツ

  • ツールチップ ルックアンドフィール

ツールチップ コンテンツは、Series オブジェクトの ToolTipTemplate プロパテによって提供されます。Xamarin.Forms では、ツールチップを構成する視覚要素を含む DataTemplate を使用します。

また、ToolTipBackgroundColorToolTipBorderColorToolTipBorderThickness を設定してツールチップのルックアンドフィールを更にカスタマイズすることもできます。

注: ツールチップは、ScatterSeries および PolarSeries で現在サポートされません。

アプリケーションでナビゲーションを実装した場合、ツールチップが表示されているときに XamDataChart 以外へナビゲーションすることが可能ですが、トランジションが完了するまでツールチップが画面に表示されます。その前にツールチップを非表示にするには、ナビゲーションを開始する前に XamDataChart の HideToolTip メソッドを呼び出します。

HideToolTip を呼び出す際に、フレームワークが XamDataChart の操作を許可するかどうかに基づいて Flush を呼び出す必要がある場合があります。XamDataChart のツールチップの非表示などの操作が遅延されます。フレームワークがコントロールの操作を許可しない場合、ツールチップはただちに非表示になりません。このような場合に Flush を呼び出すと、遅延された操作をすぐに実行し、ツールチップを非表示にします。

コード例: カスタム ツールチップの表示

この例は、財務チャートの任意のポイントの、オープン、高、低、およびクローズの売上高に関する情報をツールチップで表示する方法を示します。これを達成するには、 LineSeries で量の値を、そして FinancialPriceSeries でオープン、高、低、およびクローズの値を表示するカスタム ツールチップを作成します。

プレビュー

xamDataChart Chart Tooltips 02.png

図 1: 財務物価シリーズの値を示すカスタム ツールチップを含む XamDataChart コントロール

手順

  1. ツールチップの背景と境界線を設定します。

XAML の場合:

<ig:XamDataChart x:Name="dataChart1"
                   ToolTipBackgroundColor="#80F4F4F4"
                   ToolTipBorderColor="#1E000000"
                   ToolTipBorderThickness="2">
   <!--TODO: Add Series with custom tooltip content -->
</ig:XamDataChart>
  1. カスタム ツールチップ コンテンツを 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>

関連コンテンツ

トピック 目的

このトピックは、XamDataChart のナビゲーションについて説明します。

このトピックは、XamDataChart でサポートされるさまざまなシリーズ タイプを説明します。

このトピックは、すべてのシリーズ タイプの要件について説明します。