ツールチップ

デフォルトのツールチップには、通常、選択された点の X 値および Y 値と共に凡例の名前が表示されます。 FlexChart を使用すると、ツールチップにラベルや画像を含めることができるカスタマイズされたビューを表示できます。それには、Tooltip.Content プロパティを設定します。ユーザーが FlexChart コントロールの任意の場所をタップすると、このプロパティは Xamarin レイアウトを受け入れ、それをツールチップの形式で表示します。

次の図は、ツールチップが FlexChart に表示されたところです。

次のコード例は、C# でツールチップをカスタマイズする方法を示します。

C# のコード

それには、最初に、ツールチップに追加するビューを作成する必要があります。ツールチップには、ラベル、画像などの要素を含めることができます。

C#	コードのコピー
public static StackLayout GetChartTooltip() { //ラベルを追加します。 Label title = new Label(); title.SetBinding(Label.TextProperty, "SeriesName"); title.TextColor = Color.FromHex("#8A2BE2"); Label content = new Label(); content.SetBinding(Label.TextProperty, "Value"); content.TextColor = Color.Black; //画像を追加します。 var img = new Image { Aspect = Aspect.AspectFit }; img.Source = ImageSource.FromResource("chartsCS.Samples.GC.png"); //コンテナにラベルと画像を追加します。 StackLayout verticalContainer = new StackLayout(); verticalContainer.Orientation = StackOrientation.Vertical; verticalContainer.Padding = 5; verticalContainer.BackgroundColor = Color.FromHex("#eeffbd"); verticalContainer.Children.Add(img); verticalContainer.Children.Add(title); verticalContainer.Children.Add(content); return verticalContainer; }

コードのコピー

public static StackLayout GetChartTooltip()
{
    //ラベルを追加します。
    Label title = new Label();
    title.SetBinding(Label.TextProperty, "SeriesName");
    title.TextColor = Color.FromHex("#8A2BE2");

    Label content = new Label();
    content.SetBinding(Label.TextProperty, "Value");
    content.TextColor = Color.Black;

    //画像を追加します。
    var img = new Image { Aspect = Aspect.AspectFit };
    img.Source = ImageSource.FromResource("chartsCS.Samples.GC.png");

    //コンテナにラベルと画像を追加します。
    StackLayout verticalContainer = new StackLayout();
    verticalContainer.Orientation = StackOrientation.Vertical;
    verticalContainer.Padding = 5;
    verticalContainer.BackgroundColor = Color.FromHex("#eeffbd");
    verticalContainer.Children.Add(img);
    verticalContainer.Children.Add(title);
    verticalContainer.Children.Add(content);

    return verticalContainer;
}

次に示すように、チャートツールチップにビューを割り当てます。次の例では、「クイックスタート」セクションで作成したサンプルを使用します。

C#	コードのコピー
chart.Tooltip.Content = GetChartTooltip();