IgcGeographicMap – データポイントの値によってバブルマップのバブルの色を設定する

地理バブルマップでは IgcGeographicProportionalSymbolSeriesComponent の fillScale プロパティよりバブルのブラシスケールを設定することができます。
ブラシスケールとして IgcBrushScaleComponent を使用した場合、色の割り当ては brushes プロパティに割り当てたブラシのコレクションのインデックス順となります。予めデータソースの値を見て割り当てる色を順番に bruses コレクションに定義することができます。

以下は地図データの「color」プロパティの値が50より小さい場合にはバブルの色を red、50から70の場合には blue、70より大きい場合には green とするサンプルコードです。

// 地図データ
const mapData = [ _地図データ_ ];
// ブラシのコレクション
const brushes = [];

// 地図データをループし、colorの値を見てブラシをbrushesコレクションに追加する
for (var i = 0; i < mapData.length; i++) {
    if (mapData[i].color < 50) {
      brushes.push("red");
    } else if (mapData[i].color < 70) {
      brushes.push("blue");
    } else {
      brushes.push("green");
    }
}

// brushesコレクションをIgcBrushScaleComponentのbrushesプロパティに割り当てる
const brushScale = new IgcBrushScaleComponent();
brushScale.brushes = brushes;

const igcGeographicMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

const symbolSeries = new IgcGeographicProportionalSymbolSeriesComponent();
symbolSeries.dataSource = mapData;
// fillScaleプロパティにIgcBrushScaleComponentを割り当てる
symbolSeries.fillScale = brushScale;
.....

igcGeographicMap.series.add(symbolSeries);