[Xuni:FlexChart] 棒グラフの色をデータごとに変更する方法 (Xamarin.Forms)

文書番号 : 81967     文書種別 : 使用方法     登録日 : 2017/02/07     最終更新日 : 2017/02/07
文書を印刷する
対象製品
Xuni
詳細
FlexChartでは縦棒グラフ(Column)と横棒グラフ(Bar)を表示できます。 
通常は表示する系列で統一した色で表示し、組み込み済みのテーマを設定ことで全体の色を指定できます。

しかし、データの内容で色を変更した表現をしたい場合もあります。たとえば、縦棒グラフでX軸が年月を表示しY軸がその時点の実績値を表示する場合などで、四半期単位でグラフの色を変更するケースなどです。

これは、FlexChartがグラフを描画する時に発生する`PlotLoading`イベントを利用して、データに応じた色の変更を行うことで実現します。

サンプルコード
C#(Xamarin.Forms)
public partial class Xuni_QuickStartPage : ContentPage
{
    public Xuni_QuickStartPage()
    {
        InitializeComponent();
        // データソースをFlexChartにバインディング
        chart.BindingContext = new FlexChartDataSource();
        // 凡例は表示しない
        chart.Legend.Position = Xuni.Forms.ChartCore.ChartPositionType.None;

        //チャートの要素を描画する時に発生
        chart.PlotElementLoading +=
         (object sender, Xuni.Forms.FlexChart.ChartPlotElementLoadingEventArgs e) =>
        {
            //データ点の値で判断して要素の色を設定
            if (e.PointIndex < 3)   // 0〜2 の場合[第1四半期]
            {
                // イベント引数で渡されたチャート要素の背景色を変更する。
                e.PlotElement.Content.BackgroundColor = Color.FromHex("#b50f52");
            }
            else if (e.PointIndex < 6) // 3〜5 の場合[第2四半期]
            {
                e.PlotElement.Content.BackgroundColor = Color.FromHex("#3498db");
            }
            else if (e.PointIndex < 9) // 6〜8 の場合[第3四半期]
            {
                e.PlotElement.Content.BackgroundColor = Color.FromHex("#a4c639");
            }
            else  // 9〜11 の場合[第4四半期]
            {
                e.PlotElement.Content.BackgroundColor = Color.FromHex("#8e8e93");
            }
        };
    }
}





Xuni > 技術情報 > ドキュメントFlexChart-機能-軸のカスタマイズ
関連情報