[Xuni:FlexChart]チャートの目盛りに表示する数字の書式を変更する方法 (Xamarin.Forms)

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

対象製品

Xuni

詳細

FlexChartでグラフを表示した場合、自動的にY軸の目盛り(軸ラベル)に値が表示されます。
データによって、この数値が大きくなるため、省略した形で表示したほうが良い場合があります。
例:千、万、百万などの単位

FlexChartには軸ラベルを描画する際に発生するLabelLoadingイベントがあるので、
そのイベントハンドラで各種書式を指定できます。

サンプルコード
C#(Xamarin.Forms)
public Xuni_QuickStartPage()
{
    InitializeComponent();
    Title = "データを可視化するグラフ表示";

    // データソースをFlexChartにバインディング
    chart.ItemsSource = SubwayDataSource.getDataList();
    chart.BindingX = "Station";

    // チャート全体の設定
    chart.ChartType = ChartType.Column; //縦棒グラフ
    chart.HeaderText = "地下鉄年間乗車人員数(南北線  単位:百万) ";
    chart.FooterText = "データ出典:仙台市オープンデータ - まちづくり政策局情報政策課企画係";
    chart.FooterFontSize = 8;
    chart.FooterHorizontalAlignment = TextAlignment.End;

    // データ系列の作成と設定
    ChartSeries s1 = new ChartSeries();
    s1.Binding = "Passengers";
    s1.Color = Color.FromHex("2e9b6e");
    chart.Series.Add(s1);
    // X軸の設定
    chart.AxisX.LabelAngle = 60;
    // Y軸の設定 描画時にラベルをカスタマイズして表示
    chart.AxisY.LabelLoading += (object sender, LabelLoadingEventArgs e) =>
    {
        // ラベルを作成
        Label label = new Label();
        // データの値を、100万単位で表示するように変更
        label.Text = string.Format("{0:F1}", e.Value / 1000000);
        // 表示位置の調整
        label.HorizontalTextAlignment = TextAlignment.End;
        label.FontSize = 9;
        e.Label = label;
    };
}




Xuni > 技術情報 > ドキュメントFlexChart-機能-軸ラベルの書式設定


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