Question

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

该部分是否已被切片
是否已提及plotOptions中的size属性

解决方案1 

为此，我尝试使用plotOptions的distance属性。我从图表的load（）事件中的series [0] .points [0] .shapeArgs.r得到了半径。然后使用以下内容：

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

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

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

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

解决方案2

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

有什么办法可以在饼图中间放置数据标签，无论大小，切片等等？

Answer 1

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

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

<强> [编辑] 解决了..只需在update（）中输入动画：true。

Answer 2

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

我已经和你的小提琴一起工作了一段时间。不幸的是，我不认为你提出的问题是可能的。

由于您想要移动饼图的切片部分的数据标签，使其位于该切片的中心，因此您需要将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的任何属性（请参阅http://api.highcharts.com/highcharts#series<pie>.data.dataLabels），但只能确定有效的（例如，如果您为特定点的数据标签设置了rotation，那么会显示，但不会显示distance）。

以下是我未成功实验的小提琴的修改版本：http://jsfiddle.net/brightmatrix/k94x958d/5/

现在，解决您的其他项目关于更新时没有动画的系列，我想这可能是因为您在加载事件中更新系列，而不是之后单独更新事件。有几个示例显示了如何使用setData()或setVisible()来强制制作动画，但是当我更新了小提琴中的load事件时，这些解决方案都没有起作用。

以下是我研究过的问题：

在这种情况下，也许您可以在页面加载时触发jQuery事件（在图表选项之外）以强制动画。

我希望这些信息有用。我也希望其中一位Highcharts开发人员可以权衡我的研究。

Highcharts：在饼图

2 个答案: