如何在 amcharts map 中的圓圈上設置不同的 colors

Question

我已經在amcharts plugin中實現了 map 並在我有服務器的位置繪制圓圈。

我想根據業務需求，根據可用性Green 、 Yellow和Red在服務器上顯示不同的 colors 。 我已經在首選位置實現了圓圈，我只能分配一種color 。

這是我的代碼

public ServerMap()
{
    this.mapChart = am4core.create("chartdiv", am4maps.MapChart);
    this.mapChart .geodata = am4geodata_worldLow;

    //Set projection
    this.mapChart .projection = new am4maps.projections.Miller();
    //Create map polygon series
    this.polygonSeries = this.mapChart .series.push(new am4maps.MapPolygonSeries());
    this.polygonSeries.exclude = ["AQ"];
    this.polygonSeries.useGeodata = true;
    this.polygonSeries.nonScalingStroke = true;
    this.polygonSeries.calculateVisualCenter = true;

    let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
    imageSeries.dataFields.value = "value";

    var place = imageSeries.mapImages.template;
    place.nonScaling = true;
    place.propertyFields.latitude = "latitude";
    place.propertyFields.longitude = "longitude";   
    
    imageSeries.data=
    [
    {
        "latitude": 17.3850,
        "longitude": 78.4867,
        "name": "Miam",
        "value": 123,    
      },
    {
        "latitude":49.619446,
        "longitude": -128.695623,
        "name": "Washingto DC",
        "value": 123,
    },
    {
        "latitude": 41.8278767,
        "longitude": -87.9986114,
        "name": "Chicago",
        "value": 123,
    }  
    ]

    //Here creating circle
    var circle = place.createChild(am4core.Circle);
    circle.radius = 12;
    circle.fill = am4core.color("#e33");
    circle.strokeWidth = 1;
    circle.fillOpacity = 0.7;
    circle.propertyFields.fill = "color";
    circle.tooltipText = "{name}: [bold]{value}[/]";

    imageSeries.heatRules.push({
      "target": circle,
      "property": "radius",
      "min": 6,
      "max": 15,
      "dataField": "value",
      })
}

如何根據條件在圓圈上設置單個 colors？

這是我的 output 屏幕

Answer 1

你已經有了 "circle.propertyFields.fill = "color";" 定義。

在數據中包含“顏色”屬性應該可以。

imageSeries.data=
    [
    {
        "latitude": 17.3850,
        "longitude": 78.4867,
        "name": "Miam",
        "value": 123,    
        "color": 'red' // or rgb() or Hexa
      },
      {
         "latitude":49.619446,
         "longitude": -128.695623,
         "name": "Washingto DC",
         "value": 123,
         "color": 'blue'
       },