ChartJS数据的条件切换

时间:2014-08-29 14:27:37

标签: javascript chart.js jqvmap

我在网站中使用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。谢谢!

0 个答案:

没有答案