IgcGrid を使用してヒートマップを作成する

IgcGrid で列の cellStyles 機能を使用してヒートマップを表現します。

<igc-grid>を作成し、id を付与して列を定義します。

<igc-grid id="grid1">
    <igc-column field="id" header=" " width="65px"></igc-column>
    <igc-column id="col1" field="col1" header="1" width="40px"></igc-column>
    <igc-column id="col2" field="col2" header="2" width="40px"></igc-column>
    ...その他の列定義...
</igc-grid>

IgcGridComponent に columnInit イベントを追加します。

const grid = document.querySelector("#grid1") as IgcGridComponent;
grid.addEventListener("columnInit", onColumnInit);

columnInit イベントでは各列に cellStyles プロパティを設定します。

const onColumnInit = (args: CustomEvent<IgcColumnComponent>) => {
  if (args.detail.field != "id") {
    args.detail.cellStyles = colorColStyles;
  }
}

cellStyles プロパティに設定する値はキーと値のペアをもつオブジェクトリテラルです。css クラス名をキーとし、値にはコールバック関数を設定します。ここでは、セルの値によって異なる色を background に返すようにします。

const colorColStyles = {
  background: (rowData: any, colKey: string, cellValue: any, rowIndex: number) => {
    if (cellValue < 2) {
      return "#FF367F";
    }
    else if (cellValue < 5) {
      return "#2C7CFF";
    }
    else if (cellValue < 8) {
      return "#2DFF57";
    }
    else {
      return "#C9FF2F";
    }
  },
};