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/ –