[英]Pie Chart Custom Legend
I am using highcharts to build a Pie chart, I am hiding the default legend that comes with highcharts and making my own.我正在使用 highcharts 来构建饼图,我隐藏了 highcharts 附带的默认图例并制作了我自己的图例。 I am able to build one for line graphs, but when I do it for a pie chart, I can not get
show()/hide()
methods of the data to work because they are all in the same series.我能够为折线图构建一个,但是当我为饼图构建一个时,我无法让数据的
show()/hide()
方法起作用,因为它们都在同一个系列中。
How can I get show()/hide()
to work on a pie chart?如何让
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();
}
}
});
});
});
A similar mechanism exists for pie.馅饼也存在类似的机制。 It operates on each individual
Point
.它对每个单独的
Point
。 You just have use setVisible(boolean)
on the point you want to show/hide, for example like this:您只需在要显示/隐藏的点上使用
setVisible(boolean)
,例如像这样:
chart.series[0].points[0].setVisible(false);
See this JSFiddle demonstration for tips on how to show/hide using a clickable div
.有关如何使用可点击
div
显示/隐藏的提示,请参阅此 JSFiddle 演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.