0
我正在使用highmaps并使用lat-long绘制城市的地图点。使用highmaps在世界地图上显示城市的着色国家
现在，我想要特定国家的颜色说印度和美国。
有什么办法可以达到同样的效果吗？
下面是与CITIS绘制世界地图我的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
}]
});
});
帮助mappoints我如何能在图颜色印度和美国？
尝试了下面，但它仍然不起作用。 //启动图表
$.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
}]
});
});
下面是JSON数据：
"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"
]
}
我都尝试过，但它是不工作的，更新的问题一样，你可以请帮忙检查，如果我错过了什么。 –
为我提供一个可用的JSFiddle示例。谢谢。 –
我期待在下面的小提琴中着色“我们有红色”和“蓝色俄罗斯”。 http://jsfiddle.net/dnbtkmyz/ –