IgrDataChart 棒グラフの色を条件で色分けする。

  • 公開日:
  • 最終更新日:

IgrDataChartの棒グラフ（IgrColumnSeries）の棒の色を条件に応じて色分けする場合は、

  • IgrColumnSeriesのisCustomCategoryStyleAllowedをtrueにする。
  • IgrColumnSeriesのassigningCategoryStyleにfunctionを指定し、その中で色分けを実装する。

でできます。

<IgrDataChart ...>
  ...
  <IgrColumnSeries ...
    isCustomCategoryStyleAllowed="true"
    assigningCategoryStyle={this.onAssigningCategoryStyle} />
  ...
</IgrDataChart>
onAssigningCategoryStyle = (s: IgrCategorySeries, e: IgrAssigningCategoryStyleEventArgs) => {
    // 点数が80点以上は緑
    if(e.getItems(e.startIndex, e.endIndex)[0].Score >= 80){
        e.fill = "lightgreen";
        e.stroke = "green";
    }
    // 点数が80点未満50点以上は黄色
    else if(e.getItems(e.startIndex, e.endIndex)[0].Score >= 50){
        e.fill = "lightyellow";
        e.stroke = "yellow";
    }
    // 点数が50点未満は赤
    else {
        e.fill = "pink";
        e.stroke = "red";
    }
}

　

実行結果

　　

APIリファレンス

サンプル

kb6223-app1ダウンロード

　

Tagged: