[Xuni:FlexChart]チャートの要素にツールチップを表示する方法 (Xamarin.Forms)

文書番号 : 81994     文書種別 : HowTo
登録日 : 2017/02/27     最終更新日 : 2017/02/27

対象製品

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年度)」
仙台市オープンデータ(まちづくり政策局情報政策課企画係)
CC BY