简体   繁体   中英

How to set different colors on circles in amcharts map

I have implemented a map in amcharts plugin and drawing circles on locations where I have servers.

I want to show different colors on servers based on availability Green , Yellow and Red , as per business requirement. I have implemented circles on preferred location and I am able to assign only one color .

This is my code

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",
      })
}

How can I set individual colors on circle based on conditions?

This is my output screen

在此处输入图像描述

you already have "circle.propertyFields.fill = "color";" defined.

Including "color" property in data should work.

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'
       },

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM