使用highcharts-ng对饼图起始角度进行动画处理

Question

I'm using highcharts-ng to create a dynamically updated piechart.

When the data changes the slices animate (grow or shrink in size). I am trying to achieve a similar effect with a regard to the start angle of the chart.

When the startAngle property of a series changes I would like a transition animation to occur. I don't know if this is possible.

Here's a JSFiddle which shows the change in start angle, but without the animation.

http://jsfiddle.net/367gjasq/2/

here's a snippet of code from the jsFiddle which shows how I'm currently updating the startAngle property of the chart

$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

I was not able to find a way to animate a change in start angle of the series.

What I settled on instead was creating a 'ghost' element of the series. Here is my series element object

{
        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)
      };

I also had to change my tooltip formatter to watch for a point with the 'key' of 'empty'

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

So no tooltip would display on hover

and in my legend formatter

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

as returning nothing resolved to show undefined in the legend