Изменение цвета фона для стран на основе данных

Question

У меня есть список стран в формате json, каждый из которых имеет статус не обновлен или обновлен .

Я хочу показать разные цвета фона для стран в зависимости от их статуса.

$(function() { 

var criticalStatusData=[{"Country":"Australia","Criticality_High":40,"Criticality_Medium":294,"Criticality_Low":62,"LocationLiveStatus":"Live"}]; 


var mapData = Highcharts.maps['custom/world']; 

$('#container').highcharts('Map', { 
chart: { 
events: { 
load: function() { 
this.series[0].data = this.series[0].data.map((el) => { 
if (el['LocationLiveStatus'] == "Live") { 
el.color = "#ff0000"; 
return el; 
} 
return el 
}) 

this.update({ 
series: [{ 
data: this.series[0].data 
}] 
}) 
} 
} 
}, 
series: [{ 
name: 'Countries', 
mapData: mapData, 
data: criticalStatusData 
}], 
legend: { 
enabled: false 
}, 
title: { 
text: 'World map' 
} 
}); 

});

#container {
  height: 500px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

Любая помощь приветствуется.

Answer 1

Добавляя пользовательские данные в виде отдельной серии, можно использовать событие загрузки, чтобы указать, должна ли страна находиться в одном штате или в другом. Можно сделать так:

chart: {
  events: {
    load: function() {
      for (let i = 0; i < this.series[1].data.length; i++) {
        this.series[0].data.forEach((el) => {
          if (el['name'] == this.series[1].data[i].Country) {
            if(this.series[1].data[i].LocationLiveStatus == 'Live'){
                el.update({color: "#ff0000"}, false);
            }
          }
          return el
        })
      }
      this.redraw();
    }
  }
},

Спасибо @ daniel_s за повышение эффективности запроса путем обновления только затронутых точек, а не всей серии.

$(function() {

  var criticalStatusData = [{
    "Country": "Australia",
    "Criticality_High": 40,
    "Criticality_Medium": 294,
    "Criticality_Low": 62,
    "LocationLiveStatus": "Live"
  }];


  var mapData = Highcharts.maps['custom/world'];

  $('#container').highcharts('Map', {
    chart: {
      events: {
        load: function() {
          for (let i = 0; i < this.series[1].data.length; i++) {
            this.series[0].data.forEach((el) => {
              if (el['name'] == this.series[1].data[i].Country) {
              	if(this.series[1].data[i].LocationLiveStatus == 'Live'){
                	el.update({color: "#ff0000"}, false);
                }
              }
              return el
            })
          }
          this.redraw();
        }
      }
    },
    series: [{
      name: 'Countries',
      mapData: mapData,

    }, {
      name: 'Countries options',
      visible: false,
      data: criticalStatusData
    }],
    legend: {
      enabled: false
    },
    title: {
      text: 'World map'
    }
  });

});

#container {
  height: 500px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>