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.