[Xuni:FlexChart] 棒グラフの色をデータごとに変更する方法 (Xamarin.Forms)
対象製品
Xuni
詳細
FlexChartでは縦棒グラフ(Column)と横棒グラフ(Bar)を表示できます。
通常は表示する系列で統一した色で表示し、組み込み済みのテーマを設定ことで全体の色を指定できます。
しかし、データの内容で色を変更した表現をしたい場合もあります。たとえば、縦棒グラフでX軸が年月を表示しY軸がその時点の実績値を表示する場合などで、四半期単位でグラフの色を変更するケースなどです。
これは、FlexChartがグラフを描画する時に発生する`PlotLoading`イベントを利用して、データに応じた色の変更を行うことで実現します。
サンプルコード
C#(Xamarin.Forms)
Xuni > 技術情報 > ドキュメント > FlexChart-機能-軸のカスタマイズ
通常は表示する系列で統一した色で表示し、組み込み済みのテーマを設定ことで全体の色を指定できます。
しかし、データの内容で色を変更した表現をしたい場合もあります。たとえば、縦棒グラフで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-機能-軸のカスタマイズ