Анимируйте изменение начального угла круговой диаграммы с помощью highcharts-ng

Я использую highcharts-ng для создания динамически обновляемой круговой диаграммы.

Когда данные изменяются, срезы анимируются (увеличиваются или уменьшаются в размере). Я пытаюсь добиться аналогичного эффекта в отношении начального угла диаграммы.

Когда свойство 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();
};

javascript highcharts highcharts-ng
person tausch86    schedule 12.10.2015    source источник
comment
Вероятно, не поддерживается highcharts-ng, см. комментарий его разработчика здесь github.com/pablojim /highcharts-ng/issues/328   -  person Nishith Kant Chaturvedi    schedule 13.10.2015
comment
@NishithChaturvedi знаете ли вы, поддерживается ли это в ванильных чартах?   -  person tausch86    schedule 13.10.2015

Ответы (1)


arrow_upward
0
arrow_downward

Мне не удалось найти способ анимировать изменение начального угла серии.

Вместо этого я остановился на создании «призрачного» элемента сериала. Вот мой объект элемента серии

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

Мне также пришлось изменить средство форматирования всплывающей подсказки, чтобы найти точку с «ключом» «пусто»

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

Таким образом, всплывающая подсказка не будет отображаться при наведении

и в моем форматировщике легенд

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

так как ничего не возвращая, решил показать undefined в легенде

person tausch86    schedule 13.10.2015