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

Question

我希望饼图的数据标签显示在各部分的中间，而不管:

1. 是否切片
2. plotOptions中的size属性是否被提及

解决方案一

为此，我尝试使用 plotOptions 的距离属性。我在图表的 load() 事件中从 series[0].points[0].shapeArgs.r 获得了半径。然后使用以下内容:

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

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

但这带来了两个问题:饼图加载动画丢失，如果任何部分被切片，数据标签放置不正确

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

方案二

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

有什么方法可以将数据标签放置在饼图部分的中间，而不考虑大小、切片等？

Answer 1

我们可以在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 + ')'
    } );
 });

上面的代码解决了切片和大小的问题。调用 attr() 似乎可以保留动画。仍然存在的唯一问题是动画因调用 update() 而丢失。

[编辑] 由于切片而翻译数据标签的方式，是否有任何方法可以使用 attr() 将它们翻译到部分的中间？

[编辑] 解决了.. 只需将 animation: true 放入 update() 即可。