Блог

В то время как документация для amcharts4 предоставляет указание для заполнения полигонов цветами:

 chart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#aadaff");
 

Не совсем очевидно, как можно иметь альтернативные цвета, работающие с наборами предварительно загруженных данных. Предполагая, что для набора полигонов страны:

 black_filled_polygon.ids =  ["BR", "CA", "CN", "HR", "DK"]
pink_filled_polygon.ids =  ["NO", "PH", "PL", "PT", "ZA"]
 

как их можно определить для взаимодействия am4core , возможно, как отдельный скрипт, определяющий переменную, чтобы провести чистый рефакторинг кода и сгенерировать отдельный цвет заливки?

Вам не нужно было бы раскрашивать polygon элемент a MapPolygon , только сам шаблон MapPolygon или шаблон серии, т. Е. Вместо

 chart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#aadaff");
 

вы бы сделали (обратите внимание на отсутствие .polygon ):

 chart.backgroundSeries.mapPolygons.template.fill = am4core.color("#aadaff");
 

(не уверен, почему backgroundSeries установлено как свойство chart ?)

Вы можете сопоставить цвета с идентификаторами полигонов с помощью привязки полей свойств к полям в данных, например

 var black_filled_polygon_ids =  ["BR", "CA", "CN", "HR", "DK"]
var pink_filled_polygon_ids =  ["NO", "PH", "PL", "PT", "ZA"]
var data = [];


black_filled_polygon_ids.map(function(id) {
  data.push( {
    id: id,
    color: "black"
  });
});
pink_filled_polygon_ids.map(function(id) {
  data.push( {
    id: id,
    color: "pink"
  });
});

polygonTemplate.propertyFields.fill = "color";
polygonSeries.data = data;
 

Вот демонстрация:

https://codepen.io/team/amcharts/pen/062babaa4fec26c87c74c8dd5a885e42