Question

我有一个国家/地区的json列表，每个国家/地区的状态为未更新或已更新。

我想根据国家/地区的状态显示不同的背景颜色。

$my_array = ['a','b','c'];

$array_main[] = &$my_array;
$array_main[] = [1, 2];
$array_main[] = [4, 5];
$array_main[] = ['etc', 'bla'];

$iterations = count($array_main);

for ($i = 1; $i < $iterations; $i++) {
    $array_main[0] = array_merge(
        $array_main[0], 
        $array_main[$i]
    );
}

echo '<pre>';
print_r($my_array);

$(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;
}

感谢您的帮助。

Answer 1

通过将自定义数据添加为单独的系列，可以使用load事件来判断某个国家/地区应处于一个州还是另一个州。可以这样：

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>

根据数据更改国家/地区的背景色

1 个答案: