如何在饼图highchart中显示前3个数据标签答案

【问题标题】：How to display top 3 data label in piechart highchart如何在饼图highchart中显示前3个数据标签
【发布时间】：2016-09-13 20:53:16
【问题描述】：

我有一个要求，我希望我的饼图只显示前 3 个数据标签，而不是显示全部并填充空间。是否有任何内置的 highchart api 可用或实现此目的的最佳解决方案？

这是我的 jsfiddle： http://jsfiddle.net/k80ayx1t/

            plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        }

在发布此问题之前，我已经进行了足够多的搜索并尝试找到解决方案，但没有找到任何帮助。

【问题讨论】：

可以使用dataLabels.formatter函数：jsfiddle.net/k80ayx1t/1
谢谢@GrzegorzBlachliński 它似乎正在工作，但在你的小提琴中它显示，数据标签中的值，但我想要数据标签中的名称。我对 highchart 有点陌生，请你帮我在数据标签中显示前 3 名而不是值。
知道了.. 我返回了“this.key”而不是 val，它起作用了。如果可能，请将此评论添加为答案，我会将其标记为已回答。它可以帮助其他用户。更新小提琴：jsfiddle.net/5njsu0vo

标签： angularjs web highcharts

【解决方案1】：

您可以使用 dataLabels.formatter 函数仅返回特定的 dataLabels（对于值足够大的点）。

formatter: function() {
          var val = this.y,
            allData = $.extend(true, [], this.series.processedYData).sort(),
            length = allData.length;
          if (length - 4 >= 0 && val > allData[length - 4])
            return val;
}

我正在对我的 yValues 进行排序，然后我正在检查我的 dataLabels 点 y 值是否大于或等于我的系列的第三个 y 值。如果它更大或相等，我将返回值，否则我不会返回任何东西。

您可以在这里找到它如何工作的示例：http://jsfiddle.net/k80ayx1t/1/

【讨论】：