我在网站中使用 ChartJS 和 JQVMaps 来创建交互式世界地图,当用户单击某个区域时显示信息图形。国家按地区分组,因此它们将与此代码一起突出显示和取消突出显示:
var countryMap = {
"bi": "Africa",
"km": "Africa", //...
"cn": "Asia",
"kp": "Asia",
"jp": "Asia", //...
//...
};
var regionMap = {
"Africa" : {
"countries" : [
"bi", "km"
//...
],
"name" : " Africa"
},
"Asia" : {
"countries" : [
"cn", "kp", "jp"
//...
],
"name" : " Asia"
},
//...
};
function getCountriesInRegion(cc) {
for (var regionKey in regionMap)
{
var countries = regionMap[regionKey].countries;
for (var countryIndex in countries)
{
if (cc == countries[countryIndex])
{
return countries;
}
}
}
}
function getRegion(cc) {
var regionCode = countryMap[cc];
return regionMap[regionCode];
}
function highlightRegionOfCountry (cc) {
var countries = getRegion(cc).countries;
for (countryIndex in countries)
{
$('#vmap').vectorMap('highlight',countries[countryIndex]);
}
$('#vmap').vectorMap('highlight',cc);
}
function unhighlightRegionOfCountry (cc) {
var countries = getRegion(cc).countries;
for (countryIndex in countries)
{
$('#vmap').vectorMap('unhighlight',countries[countryIndex]);
}
$('#vmap').vectorMap('unhighlight',cc);
}
我正在尝试使用开关为用户单击区域时呈现的饼图设置不同的数据集。这是 jQuery('#vmap').vectorMap({}); 中的代码:
onRegionOver : function (element, code, region)
{
highlightRegionOfCountry(code);
},
onRegionOut : function (element, code, region)
{
unhighlightRegionOfCountry(code);
},
onRegionClick: function(element, code, region)
{
switch (regionMap) {
case 'Africa':
var pieData = [
{
value: 25,
color:"9e0b0f"
},
{
value : 75,
color : "#fff"
}
];
break;
case 'Asia':
var pieData = [
{
value: 50,
color:"9e0b0f"
},
{
value : 50,
color : "#fff"
}
];
break;
case 'Europe':
var pieData = [
{
value: 75,
color:"9e0b0f"
},
{
value : 25,
color : "#fff"
}
];
break;
case 'oceania':
var pieData = [
{
value: 98,
color:"9e0b0f"
},
{
value : 2,
color : "#fff"
}
];
break;
}
new Chart(pie).Doughnut(pieData);
}
地图的突出显示(大部分情况下)有效,但图表根本不会呈现。我在 switch() 中使用了错误的变量还是需要完全不同的方法?
我有完整的代码在这里。谢谢!