0
私はハイマップを使って作業しており、同じものに対してlat-longを使ってマップポイントで都市をプロットしました。ハイマップを使用して世界地図の都市のマポポイントを表示しながら国を塗りつぶし
今、私は特定の国の色をインドとアメリカと言いたいと思います。
これを実現する方法はありますか？
以下は、緯度/経度
// 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
}]
});
});
の助けを借りてcitis mappointsと世界地図をプロットするための私のjsファイルでどのように私はマップにインドと米国に色をすることができますか？
以下を試してみましたが、まだ動作していません。 //以下は
$.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/ –