javascript - Highcharts :将数据标签放置在饼图各部分的中间

我希望饼图的数据标签显示在各部分的中间，而与以下内容无关:

该部分是否已 slice

是否已提到plotOptions中的size属性

解决方案1 ​​

为此，我尝试使用plotOptions的distance属性。我从图表的load()事件中的series [0] .points [0] .shapeArgs.r获取了半径。然后使用以下命令:

series[0].update({
    dataLabels: {
        distance: -(radius/2)
    }
});

http://jsfiddle.net/k94x958d/2/

但这带来了两个问题:饼图加载动画丢失，并且如果 slice 了任何节，则数据标签放置不正确。

http://jsfiddle.net/k94x958d/3/

解决方案2

为了解决动画问题，我尝试使用上述逻辑来获取距离，然后在Highcharts库的重写drawDataLabels()方法中的series [0] .options.dataLabels中进行设置。但这没有用。

有什么方法可以实现将数据标签放置在饼形区域的中间，而与大小， slice 等无关？

最佳答案

我们可以在load事件中使用以下代码:

 series[0].update({
    animation: true,
    dataLabels: {
        distance: -(series[0].points[0].shapeArgs.r/2)
     }
 });

 _.each( series[0].points, function( point ) {
    var x = point.slicedTranslation.translateX + point.dataLabel.translateX,
        y = point.slicedTranslation.translateY + point.dataLabel.translateY;

    point.dataLabel.attr( {
        transform: 'translate(' + x + ',' + y + ')'
    } );
 });

上面的代码解决了 slice 和调整大小的问题。似乎调用attr()会保留动画。唯一仍然存在的问题是动画由于调用update()而丢失。

[编辑]
由于 slice 而已转换了数据标签的方式，是否可以使用attr()将数据标签转换为节的中间内容？

[编辑]
已解决。.只需在animation()中添加动画:true。