用highcharts-ng动画显示皮哈特起始角的变化

Animate change in piechart start angle with highcharts-ng

本文关键字：变化 哈特起 highcharts-ng 动画 显示      更新时间：2023-09-26

我使用highcharts-ng来创建一个动态更新的piechart。

当数据改变时，切片动画(大小增大或缩小)。我正试图在图表的起始角度方面达到类似的效果。

当一个系列的startAngle属性改变时，我想要一个过渡动画发生。我不知道这是否可能。

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

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

下面是一段来自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();
};

我找不到一个动画的方法来改变这个系列的开始角度

我决定为这个系列创造一个"幽灵"元素。这是我的系列元素对象

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

我还必须更改我的工具提示格式化程序，以监视'key'为'empty'的点

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

所以悬停时不会显示工具提示

和我的图例格式化器

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

返回未解析的内容以在图例

中显示undefined
相关文章：