Javascript ChartJS数据的条件开关
我在一个网站上使用ChartJS和JQVMaps创建一个交互式世界地图,当用户单击某个区域时,它会显示信息图形。国家/地区按区域分组,因此它们将与此代码一起高亮显示和取消高亮显示:Javascript ChartJS数据的条件开关,javascript,chart.js,jqvmap,Javascript,Chart.js,Jqvmap,我在一个网站上使用ChartJS和JQVMaps创建一个交互式世界地图,当用户单击某个区域时,它会显示信息图形。国家/地区按区域分组,因此它们将与此代码一起高亮显示和取消高亮显示: var countryMap = { "bi": "Africa", "km": "Africa", //... "cn": "Asia", "kp": "Asia", "jp": "Asia", //... //... }; var regionMap = { "Africa" : {
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”)中的代码
地图的高亮显示可以工作(大部分情况下),但图表根本不会渲染。我是在switch()中使用了错误的变量,还是需要完全不同的方法
我有完整的密码。谢谢 代码有以下错误:未捕获的TypeError:无法读取未定义jquery.vmap.js:633的属性“setOpacity”。这不会有什么帮助是的,这一定是交换机中的某个地方的问题,没有它它它运行得很好,我根本没有弄乱JQVMap脚本。
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);
}