Highcharts：圆环图与数据标签重叠

我正在使用Highcharts库制作一种甜甜圈图表类型

如下图所示，一些内部数据标签重叠。 我一直在使用参数“距离”，但没有解决这个问题

请在下面找到所附代码

// Create the chart
    $(container).highcharts({
        chart: {
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        exporting: {   
            buttons: {
                contextButton: {
                    symbol: 'url(/icon-turn-down.png)'
                }
            }
        },
        title: {
            text: _title, 
            margin: 50
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            formatter: function() {
                var s = this.point.name.split('.');                
                if (s.length == 1) {
                    return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
                }
                return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
            }
        },
        series: [{
            name: '',
            data: innerData,
            size: '80%',
            dataLabels: {
                formatter: function() {
                    return this.y > 0 ? this.point.name : null;
                },                 
                color: 'white',
                distance: -50
            }
        }, {
            name: '',
            data: outerData,
            size: '100%',
            innerSize: '80%',
            dataLabels: {
                formatter: function() {
                    var s = this.point.name.split('.');  
                    if (s.length == 1) {
                         return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
                    }                   
                    s = this.point.name.substring(this.point.name.indexOf(".")+2);
                    return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y):  null;
                },
                style: {
                    fontSize: "10px",                       
                    fontColor: "#000000"
                }
            }
        }]
    });

//创建图表
$（容器）.highcharts({
图表：{
键入：“馅饼”
},
学分：{
已启用：false
},
导出：{
按钮：{
上下文按钮：{
符号：“url（/icon turn down.png）”
}
}
},
标题：{
正文:(标题)，
差额：50
},
打印选项：{
馅饼：{
影子：错，
中心：['50%，'50%']
}
},
工具提示：{
格式化程序：函数（）{
var s=this.point.name.split（'.'）；
如果（s.length==1）{
返回this.y>1？“”+this.point.name+”：“”+Highcharts.numberFormat（this.point.y）：null；
}
返回此.y>1？s[0]+'
'+$.trim（s[1]）+'：'+Highcharts.numberFormat（this.point.y）：null；
}
},
系列：[{
名称：“”，
数据：innerData，
大小：“80%”，
数据标签：{
格式化程序：函数（）{
返回此.y>0？this.point.name:空；
},                 
颜色：'白色'，
距离：-50
}
}, {
名称：“”，
数据：外部数据，
大小：“100%”，
内部尺寸：“80%”，
数据标签：{
格式化程序：函数（）{
var s=this.point.name.split（'.'）；
如果（s.length==1）{
返回this.y>1？“”+this.point.name+”：“”+Highcharts.numberFormat（this.point.y）：null；
}                   
s=this.point.name.substring（this.point.name.indexOf（“.”+2）；
返回此.y>1？''+s+：''+Highcharts.numberFormat（this.point.y）：null；
},
风格：{
字体大小：“10px”，
fontColor:#000000”
}
}
}]
});

距离参数不能应用于每个点，只能是一般的，所以我想到的只是在每个datalabel上使用translate（）函数，或者使用formatter，对每个元素应用CSS类和dhten使用top/left参数。但是，如果您将示例重新创建为fiddle，这将非常有帮助。

最后，我找到了一个解决方案，即使用“startangle”属性

     series: [{
                name: '',
                data: innerData,
                startAngle:110, 
                size: '80%',
                dataLabels: {
                    formatter: function() {                    
                        return this.y > 0 ? this.point.name : null;
                    },                 
                    color: 'white',
                    distance: -45
                }, {
...

---

你的理论似乎是一个很好的探索方法。但我试图在dataLabels中添加

样式：{position:'relative'，top:'25em'}

，但它不起作用。有人知道样式属性是否有“top”吗？CSS不起作用，因为图表是作为SVG元素生成的。