Highcharts 使用highmaps在世界地图中显示城市地图点时为国家着色

我正在使用highmaps，并使用lat long绘制了具有地图点的城市

现在，我想给一些国家涂上颜色，比如印度和美国

有没有办法达到同样的效果

下面是我在lat/lon的帮助下用citis mappoints绘制世界地图的js文件

// Initiate the chart

$.getJSON("/MyProject/HighChartPhp/getMapData.php", function (data) {

    // Correct UK to GB in data
    $.each(data, function () {
        if (this.code === 'UK') {
            this.code = 'GB';
        }
    });

    //console.log(data);

    var final_array = [];

    for(var i in data[0].data)
    {
        var map_data = {
            name: data[0].name[i],
            lat: data[0].lat[i],
            lon: data[0].lon[i],
            z: data[0].data[i],
            val: data[0].loc[i],
            color: data[0].color[i]
        }

        //console.log(map_data);

        final_array[i] = map_data;
    }

    console.log(final_array);

    Highcharts.mapChart('container', {
        chart: {
            borderWidth: 1,
            map: 'custom/world'
        },

        title: {
            text: 'Word Wide Data Usage'
        },

        subtitle: {
            text: ''
        },

        tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.val}</b><br/>{point.z}'
        },

        legend: {
            enabled: false
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series: [{
        // Use the gb-all map with no data as a basemap
        mapData: Highcharts.maps['custom/world'],
        name: 'Basemap',
        borderColor: 'green',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: true
    }, {
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
        //color: 'blue',
        data: final_array
    }]

    });

});

---

在与mapData连接之前，可以将特性添加到数据中的特定点

API参考：

例如：

---

我试过，但不起作用，在问题中更新了相同的内容，请您帮助检查我是否遗漏了什么。我希望在下面的提琴中用红色给我们上色，用蓝色给俄罗斯上色。

$.getJSON("/MyProject/HighChartPhp/getMapData.php", function (data) {

    // Correct UK to GB in data
    $.each(data, function () {
        if (this.code === 'UK') {
            this.code = 'GB';
        }
    });

    data.forEach(function(point, index) {
        console.log("country="+point.country);
    if (point.country === 'India' || point.country === 'United States') {
      point.color = 'green';
    }
  });

    //console.log(data);

    var final_array = [];

    for(var i in data[0].data)
    {
        var map_data = {
            name: data[0].name[i],
            lat: data[0].lat[i],
            lon: data[0].lon[i],
            z: data[0].data[i],
            val: data[0].loc[i],
            color: data[0].color[i],
            country:data[0].country[i]
        }

        //console.log(map_data);

        final_array[i] = map_data;
    }

    console.log(final_array);

    Highcharts.mapChart('container', {
        chart: {
            borderWidth: 1,
            map: 'custom/world'
        },


        title: {
            text: 'Word Wide outsource Vendor Usage'
        },

        subtitle: {
            text: ''
        },

         colorAxis: {
      min: 1,
      max: 1000,
      type: 'logarithmic'
        },

        tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.val}</b><br/>{point.z}'
        },

        legend: {
            enabled: false
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series: [{
        // Use the gb-all map with no data as a basemap
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        name: 'Basemap',
        borderColor: 'green',
        nullColor: 'rgba(200, 200, 200, 0.3)',

        showInLegend: true
    }, {
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
        //color: 'blue',
        data: final_array
    }]

    });

});

"name": [
"Ahemdabad",
"Atlanta",
"Bangalore",
"Bangkok",
"Buenos Aires",
"Chennai",
"Chicago",
"Cochin",
"Colombo",
"Dallas",
"Delhi",
"Hyderabad",
"Irvine",
"Irvine Dallas",
"Johannesburg",
"Kolkata",
"Kuala Lumpur",
"Lima",
"Los Angeles",
"Miami",
"Moscow",
"Mumbai",
"New Jersey",
"New York",
"Niagra",
"Philadelphia",
"Rio",
"Riyadh",
"Seattle",
"Syracuse",
"Washington Baltimore"
],
"loc": [
"Ahemdabad:India",
"Atlanta:USA",
"Bangalore:India",
"Bangkok:Thailand",
"Buenos Aires:Argentina",
"Chennai:India",
"Chicago:USA",
"Cochin:India",
"Colombo:Sri Lanka",
"Dallas:USA",
"Delhi:India",
"Hyderabad:India",
"Irvine:USA",
"Irvine Dallas:USA",
"Johannesburg:South Africa",
"Kolkata:India",
"Kuala Lumpur:Malaysia",
"Lima:Peru",
"Los Angeles:USA",
"Miami:USA",
"Moscow:Russia",
"Mumbai:India",
"New Jersey:USA",
"New York:USA",
"Niagra:USA",
"Philadelphia:USA",
"Rio:Brazil",
"Riyadh:Saudi Arabia",
"Seattle:USA",
"Syracuse:USA",
"Washington Baltimore:USA"
],
"color": [
"#FFC300",
"#EC32BF",
"#FFC300",
"#EC32BF",
"#49EC32",
"#FFC300",
"#EC3246",
"#FFC300",
"#EC32BF",
"#EC3246",
"#EC32BF",
"#FFC300",
"#EC32BF",
"#16F7EC  ",
"#EC32BF",
"#FFC300",
"#EC32BF",
"#FFC300",
"#581845",
"#EC32BF",
"#EC32BF",
"#FFC300",
"#EC32BF",
"#EC32BF",
"#3A32EC",
"#EC32BF",
"#49EC32",
"#EC32BF",
"#EC32BF",
"#EC32BF",
"#EC32BF"
],
"lat": [
23.022505,
33.748995,
12.971599,
13.756331,
-34.603684,
13.08268,
41.878114,
9.931233,
6.927079,
32.776664,
28.704059,
17.385044,
33.684567,
33.684567,
-26.204103,
22.572646,
3.139003,
-12.046373,
34.052234,
25.76168,
55.755826,
19.075984,
40.058324,
40.712784,
43.082816,
39.952584,
-22.906847,
24.713552,
47.606209,
43.048122,
39.177404
],
"lon": [
72.571362,
-84.387982,
77.594563,
100.501765,
-58.381559,
80.270718,
-87.629798,
76.267304,
79.861243,
-96.796988,
77.10249,
78.486671,
-117.826505,
-117.826505,
28.047305,
88.363895,
101.686855,
-77.042754,
-118.243685,
-80.19179,
37.6173,
72.877656,
-74.405661,
-74.005941,
-79.074163,
-75.165222,
-43.172896,
46.675296,
-122.332071,
-76.147424,
-76.668392
],
"country": [
"India",
"USA",
"India",
"Thailand",
"Argentina",
"India",
"USA",
"India",
"Sri Lanka",
"USA",
"India",
"India",
"USA",
"USA",
"South Africa",
"India",
"Malaysia",
"Peru",
"USA",
"USA",
"Russia",
"India",
"USA",
"USA",
"USA",
"USA",
"Brazil",
"Saudi Arabia",
"USA",
"USA",
"USA"
]
}