使用 highcharts-ng 动画改变饼图起始角度

Question

我正在使用 highcharts-ng 创建一个动态更新的饼图。

当数据发生变化时，切片会动画化（增大或缩小大小）。我试图在图表的起始角度方面实现类似的效果。

当系列的 startAngle 属性发生变化时，我希望出现过渡动画。我不知道这是否可能。

这是一个 JSFiddle，显示起始角度的变化，但没有动画。

这是 jsFiddle 中的一段代码，显示了我当前如何更新图表的 startAngle 属性

$scope.updateChartData = function() {
    //access to highcharts, though not using currently
    var h = $scope.chartConfig.getHighcharts();

    //register a change in series start angle
    $scope.chartConfig.series[1].startAngle += 20;

    //to make demo better, restart inner donut start angle
    if($scope.chartConfig.series[1].startAngle >= 0)
        $scope.chartConfig.series[1].startAngle = -360;

    //issue a digest so changes will reflect in chart
    $scope.$digest();
};

Answer 1

我无法找到一种方法来为系列开始角度的变化设置动画。

我决定改为创建该系列的 'ghost' 元素。这是我的系列元素对象

{
        name: 'empty',

        //make element transparent
        color: 'rgba(255, 255, 255, 0)',

        //cursor does not change on hover
        cursor: 'cursor',

       //so legend element won't disrupt actual legend display
       legendIndex: lastIndexOfLegend,

       // takes up the total size of 'empty space' required
        y: total - (aggregate)
      };

我还必须更改我的工具提示格式化程序以使用 'empty'

的 'key' 来观察一个点

if(this.key === 'empty') 
   return;

因此悬停时不会显示工具提示

在我的图例格式化程序中

if(this.name === 'empty')
  return '';

因为没有返回任何解决方案以在图例中显示 undefined

使用 highcharts-ng 动画改变饼图起始角度

Animate change in piechart start angle with highcharts-ng

javascript

highcharts

highcharts-ng