如何避免highchart饼图中dataLabels重叠？答案

【问题标题】：How to avoid overlapping of dataLabels in highchart pie chart?如何避免highchart饼图中dataLabels重叠？
【发布时间】：2015-08-24 01:16:54
【问题描述】：

我正在使用 highcharts 来渲染饼图，

当系列数据较小/较少时，dataLabels 会重叠。

链接到重现的问题。

http://jsfiddle.net/venkatesh1453/nwg2rdze/1/

 plotOptions: {
        pie: {
            dataLabels: {
                distance : function(){
                    return (-30 - (this.series.index *3));
                }
            }
        }
    },

我试过这段代码，但它会将所有标签移到右上角。

请提供避免标签重叠的解决方案/解决方法。

【问题讨论】：

highcharts 中没有重叠算法，但您可以尝试开发以下示例之一：jsfiddle.net/menXU/1 / jsfiddle.net/menXU/6

标签： javascript highcharts

【解决方案1】：

最简单的方法是将数据标签移到饼图之外。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        series: [{
            data: [
                ['Firefox',   44.2],
                ['IE7',       26.6],
                ['IE6',       20],
                ['Chrome browser',    1.1],
                ['Other browsers',    1.4]
            ]
        }]
    });
});

Example

【讨论】：