Question

我有一个饼图，有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
      ]
    ]
  }],

使用上述数据，我只想展示出租，花钱和其他的传说。

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

下一步是什么？

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

然后你将有机会添加condtions等，从而实现你的目标。

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

1 个答案: