Javascript 高图表：在饼图部分中间放置数据标签 我希望饼图的数据标签显示在节的中部，而不包括： 该节是否已切片 是否已提及plotOptions中的“大小”属性

解决方案1

为此，我尝试使用plotOptions的距离属性。我从图表的load（）事件中的系列[0]。点[0]。shapeArgs.r中获取了半径。然后使用以下命令：

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

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

解决方案2

为了解决动画问题，我尝试使用上述逻辑获取距离，然后在系列[0]中设置它。Highcharts库的重写drawDataLabels（）方法中的options.dataLabels。但它没有起作用

---

是否有任何方法可以将数据标签放置在饼图区域的中间，而不考虑大小、切片等？

这是一个很好的问题，我特别喜欢您使用图表半径（而不是使用固定值）计算数据标签距离的方法

我用你的小提琴已经有一段时间了。不幸的是，我认为你的要求是不可能的

由于要移动饼图切片部分的数据标签，使其位于该切片的中心，因此将

slicedOffset

值添加到该数据标签的

distance

属性是有意义的

我曾经想象过这样的事情：

events: {
  load: function() {
    var series = this.series[0],
        distance = series.points[0].shapeArgs.r / 2,
        pieOffset = this.options.plotOptions.pie.slicedOffset;
    $.each(series.points, function(index, value) {
      if (typeof value.sliced === "undefined") {
        value.update({
          dataLabels: { distance: -distance }
        });
      } else {
        value.update({
          dataLabels: { distance: -distance - pieOffset }
        });
      }
    });
  }
}

然而，一切都没有改变。似乎可以在系列级别（或整个饼图）定义数据标签的距离，但在点级别不能定义距离

根据Highcharts API，应该能够设置

series.data.dataLabels

的任何属性，就像

plotOptions.series.dataLabels

一样（请参阅），但只有某些属性可以工作（例如，如果为特定点的数据标签设置了

旋转

，则会显示，但不会显示

距离

）

这是你对我失败实验的修改版本：

现在，为了解决您的另一个问题关于更新时未设置动画的系列，我认为这可能是因为您在加载事件中更新了该系列，而不是在之后通过单独的事件来更新。下面有几个示例演示了如何使用

setData（）

或

setVisible（）

强制播放动画，但当我更新小提琴中的

load

事件时，这两种解决方案都不起作用

以下是我研究的问题：

在这种情况下，可能会有一个jQuery事件（在图表选项之外），在页面加载时触发该事件以强制动画

---

我希望这些信息有帮助。我也希望Highcharts的一位开发人员能够参与我的研究。

我们可以在加载事件中使用以下代码：

 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（）将它们转换到部分中间

[编辑] 已解决..只需将动画：true放入update（）