我无法通过在后端应用程序提供的国家ISO代码中着色来使世界地图发挥作用。
我的代码是:
var chartData = [{
"name": "Africa",
"data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
}, {
"name": "Asia",
"data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
}, {
"name": "Europe",
"data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
}, {
"name": "North America",
"data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
}, {
"name": "South America",
"data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
}, {
"name": "Oceania",
"data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
}];
// Instantiate the map
Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world-highres',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Continents'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
// joinBy: 'hc-key',
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: chartData
});
我错过了什么?谢谢!
答案 0 :(得分:3)
我修改了以下内容以使代码正常工作:
添加了地图custom/world.js
:
修改了您的系列数组,因此现在每个元素都是{"code": ...}
:
var data = [];
for (var k in chartData) {
data.push({
name: chartData[k].name,
data: chartData[k].data.map(function (code) {
return { code: code };
})
});
}
以下是更新的jsfiddle:http://jsfiddle.net/beaver71/nccwpmen/
var chartData = [{
"name": "Africa",
"data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
}, {
"name": "Asia",
"data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
}, {
"name": "Europe",
"data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
}, {
"name": "North America",
"data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
}, {
"name": "South America",
"data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
}, {
"name": "Oceania",
"data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
}];
var data = [];
for (var k in chartData) {
data.push({
name: chartData[k].name,
data: chartData[k].data.map(function (code) {
return { code: code };
})
});
}
console.log(data);
// Instantiate the map
var chart = Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Continents'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: data
});
&#13;
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
&#13;
<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/mapdata/custom/world.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div id="container"></div>
&#13;