饼图自定义图例答案

【问题标题】：Pie Chart Custom Legend饼图自定义图例
【发布时间】：2014-10-08 09:55:00
【问题描述】：

我正在使用 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();
                }
            }
        });
    });
});

【问题讨论】：

标签： javascript charts highcharts pie-chart

【解决方案1】：

馅饼也存在类似的机制。它作用于每个人Point。您只需在要显示/隐藏的点上使用setVisible(boolean)，例如：

chart.series[0].points[0].setVisible(false);

有关如何使用可点击的div 显示/隐藏的提示，请参阅this JSFiddle demonstration。

【讨论】：