我在网站中使用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()中使用了错误的变量,还是需要完全不同的方法?
我有完整的代码here。谢谢!