ナレッジベース

Xuni

FlexChartを利用するとインタラクティブなチャート・グラフを作成できます。
表示された要素をタッチすると、標準機能としてデータをツールチップ（ToolTip）として表示します。



このツールチップの内容は、カスタマイズ可能です。
表示したい内容をレイアウトし、チャートのデータに書式設定して、ToolTipプロパティに設定することで、タッチに対応した場所にツールチップを表示します。

サンプルコード
C#（Xamarin.Forms）

// ツールチップを表示するためのレイアウトを作成
public static StackLayout GetChartTooltip()
{
    // データ点の名称を表示する上段ラベルを作成
    Label title = new Label();
    title.SetBinding(Label.TextProperty, "ValueX", BindingMode.Default, null, "{0} 駅");
    title.TextColor = Color.FromHex("#cc0055");
    title.HorizontalTextAlignment = TextAlignment.Center;

    // データ点の値を表示する上段ラベルを作成
    Label content = new Label();
    content.SetBinding(Label.TextProperty, "Value",BindingMode.Default ,null,"{0:#,0}人");
    content.TextColor = Color.FromHex("#cc0055");
    content.HorizontalTextAlignment = TextAlignment.End;

    //StackLayoutを作成
    StackLayout verticalContainer = new StackLayout() { 
        Orientation = StackOrientation.Vertical,
        Padding = 5,
        BackgroundColor = Color.FromHex("#7c9c89"),
    };
    //StackLayoutをコンテナとしてラベルを追加
    verticalContainer.Children.Add(title);
    verticalContainer.Children.Add(content);

    // コンテナを返す
    return verticalContainer;
}

作成したツールチップの内容をFlexChartのToolTipプロパティに設定すると表示します。

    chart.Tooltip.Content = GetChartTooltip();

Xuni　＞ 技術情報　＞ ドキュメント ＞ FlexChart－機能－ツールチップ


参考情報
チャート用データの出典
「仙台市地下鉄乗車人員（平成23～27年度）」
仙台市オープンデータ（まちづくり政策局情報政策課企画係）