[Xuni:FlexChart]チャートの目盛りに表示する数字の書式を変更する方法 (Xamarin.Forms)
対象製品
Xuni
詳細
FlexChartでグラフを表示した場合、自動的にY軸の目盛り(軸ラベル)に値が表示されます。
データによって、この数値が大きくなるため、省略した形で表示したほうが良い場合があります。
例:千、万、百万などの単位
FlexChartには軸ラベルを描画する際に発生するLabelLoadingイベントがあるので、
そのイベントハンドラで各種書式を指定できます。
サンプルコード
C#(Xamarin.Forms)
Xuni > 技術情報 > ドキュメント > FlexChart-機能-軸ラベルの書式設定
参考情報
チャート用データの出典
「仙台市地下鉄乗車人員(平成23~27年度)」
仙台市オープンデータ(まちづくり政策局情報政策課企画係)
データによって、この数値が大きくなるため、省略した形で表示したほうが良い場合があります。
例:千、万、百万などの単位
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年度)」
仙台市オープンデータ(まちづくり政策局情報政策課企画係)