Highcharts饼图：如何隐藏除三个最高值之外的所有图例答案

【问题标题】：Highcharts Pie chart: how to hide the legend for all but the three highest valuesHighcharts饼图：如何隐藏除三个最高值之外的所有图例
【发布时间】：2015-03-13 19:06:54
【问题描述】：

我有一个包含 20 个“切片”的饼图，我只需要显示最高 3 个数字的图例。

比如我的系列：

        series: [{
        name: 'Costs',
        data: [
      [
        'Rent',
        2520
      ],
      [
        'Spending money',
        1572
      ],
      [
        'Travel',
        1325
      ],
      [
        'Home',
        1142
      ],
      [
        'Personal',
        949
      ],
      [
        'Groceries',
        577
      ],
      [
        'Car',
        469
      ],
      [
        'Clothing',
        415
      ],
      [
        'Gifts',
        391
      ],
      [
        'Entertainment',
        310
      ],
      [
        'Other',
        1480
      ]
    ]
  }],

使用上述数据，我只想显示 Rent、Spending Money 和 Other 的图例。

我可以看到我们有一个 showInLegend: false 选项，但这与隐藏系列有关，我想隐藏与数据相关的图例in 系列。

下一步是什么？

【问题讨论】：

标签： highcharts

【解决方案1】：

我建议禁用默认图例并使用您自己的图例，如示例中所示：

http://jsfiddle.net/N3KAC/1/

$legend = $('#customLegend');

    $.each(chart.series[0].data, function (j, data) {

        $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');

    });

    $('#customLegend .item').click(function(){
        var inx = $(this).index(),
            point = chart.series[0].data[inx];

        if(point.visible)
            point.setVisible(false);
        else
            point.setVisible(true);
    });

然后您将有机会添加条件等，从而实现您的目标。

【讨论】：