饼图自定义图例 [英] Pie Chart Custom Legend

问题描述

我使用highcharts建立一个饼状图，我隐藏了highcharts自带的默认图例。我可以为线图创建一个，但是当我做饼图，我不能得到 show（）/ hide（）数据的方法工作因为他们都在同一系列。

I am using highcharts to build a Pie chart, I am hiding the default legend that comes with highcharts and making my own. 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（）

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();
                }
            }
        });
    });
});

推荐答案

它对每个点运行。您只需在要显示/隐藏的点上使用 setVisible（boolean），例如像这样：

A similar mechanism exists for pie. It operates on each individual Point. You just have use setVisible(boolean) on the point you want to show/hide, for example like this:

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

请参阅此JSFiddle演示，了解如何使用可点击的 div 显示/隐藏提示。

See this JSFiddle demonstration for tips on how to show/hide using a clickable div.

这篇关于饼图自定义图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！