我正在使用highcharts来构建饼图,我隐藏了高图和自己制作的默认图例。我可以为折线图构建一个,但是当我为饼图创建时,我无法使show()/hide()
方法的数据起作用,因为它们都在同一系列中。
如何让show()/hide()
在饼图上工作?
var chart = $('#chartdiv').highcharts();
$(".legend div").html("");
$(chart.series).each(function(seriesKey, series){
$(series.data).each(function(k, v){
var color = v.color;
var name = v.name;
var total = v.options.y;
var activeStatus = v.visible ? "active" : "inactive";
var item = $("<div data-color=\""+color+"\" data-series=\""+k+"\" class=\""+activeStatus+"\"><p>"+name+"</p><p>"+total+"</p></div>");
$(".legend > div").append(item);
if(item.hasClass("active")){
item.css("border-bottom", "solid 3px " + color);
}
item.on("mouseover mouseleave click", function(e){
if(e.type === "mouseover"){
$(this).css("border-bottom", "solid 3px " + color);
}else if(e.type === "mouseleave"){
if($(this).hasClass("active")){
$(this).css("border-bottom", "solid 3px " + color);
}else{
$(this).css("border-bottom", "solid 3px #dddddd");
}
}else if(e.type === "click"){
$(this).removeClass("active inactive");
if(v.visible){
$(this).addClass("inactive");
v.hide();
}else{
$(this).addClass("active");
v.show();
}
}
});
});
});
答案 0 :(得分:2)
馅饼存在类似的机制。它适用于每个人Point
。您只需在要显示/隐藏的点上使用setVisible(boolean)
,例如:
chart.series[0].points[0].setVisible(false);
有关如何使用可点击的div
显示/隐藏的提示,请参阅this JSFiddle demonstration。