我正在使用 highcharts 构建饼图,我隐藏了 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();
}
}
});
});
});
最佳答案
馅饼也存在类似的机制。它对每个单独的 Point
进行操作。您只需在要显示/隐藏的点上使用 setVisible(boolean)
,例如:
chart.series[0].points[0].setVisible(false);
参见 this JSFiddle demonstration有关如何使用可点击的 div
显示/隐藏的提示。
关于javascript - 饼图自定义图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25313273/