Highcharts: xxx.animate не работает правильно, когда объекты заменяются друг на друга более одного раза

Question

Приведенный ниже код не работает правильно, когда я нажимаю кнопку более одного раза.Я обнаружил, что временным решением является вызов chart.destroy() и chart = Highcharts.chart(...) для сброса внутренних состояний.Но я хочу знать правильное решение, потому что это лишь временная мера, и она не решит истинную причину проблемы.Пожалуйста, кто-нибудь может мне помочь?

var chart = Highcharts.chart('container', options);

var update = function () {
  var points = chart.series[0].points;
  chart.series[0].setData([points[0].y, points[1].y + 200]);
};

var rotate = function () {
  var points = chart.series[0].points,
      ticks = chart.xAxis[0].ticks;

  var sortedPoints = points.slice();
  sortedPoints.sort(function(a,b){
    return b.y - a.y;
  });

  points.forEach(function(point, i){
    sortedPoints.forEach(function(sPoint, j){
      if (point === sPoint){

        points[i].graphic.animate({
          x: points[j].shapeArgs.x
        });

        points[i].dataLabel.animate({
          y: points[j].dataLabel.y
        });

        ticks[i].label.animate({
          y: ticks[j].label.xy.y
        });
      }
    });
  });
};

document.getElementById("button").addEventListener("click", function() {
    update();
    rotate();
}, false);

Демонстрация в реальном времени: https://jsfiddle.net/Shinohara/dscvwrxu/22/

Answer 1

@ ppotaczek Ваше живое демо вращает бары бесконечно, когда я нажимаю кнопку более одного раза.В этом случае мне нужен код, который вращает бары только в первый раз.Ниже приведены мои намерения.

State1:    Cat1=1000, Cat2=900  # Current rank is 1st:Cat1 and 2nd:Cat2
Interval1: Cat2+=200 and rotate bars between state1 and state2
State2:    Cat1=1000, Cat2=1100 # Current rank is 1st:Cat2 and 2nd:Cat1
Interval2: Cat2+=200 and don't rotate bars between state2 and state3
State3:    Cat1=1000, Cat2=1300 # Current rank is 1st:Cat2 and 2nd:Cat1

Я думаю, что причина, по которой ваша демо-версия вращает бары между состоянием2 и состоянием3, заключается в update(), а также вращает бары.

// This function unintentionally rotates bars for the second time.
var update = function() {
    var points = chart.series[0].points;
    chart.series[0].setData([points[0].y, points[1].y + 200]);
};

Я хочу поставить бары от самых больших до самых маленьких.И я не хочу вращать бары, когда ранг не изменился.Есть ли у вас хорошее решение?

Answer 2

Вам не нужно сбрасывать внутренние состояния.Вы можете передавать текущие и начальные значения:

var rotate = function() {
    var points = chart.series[0].points,
        index,
        ticks = chart.xAxis[0].ticks;

    var sortedPoints = points.slice();
    sortedPoints.sort(function(a, b) {
        return b.y - a.y;
    });

    points.forEach(function(point, i) {
        sortedPoints.forEach(function(sPoint, j) {
            if (point === sPoint) {
                index = j;

                if (points[i].animated) {
                    points[i].animated = false;

                    j = i;
                } else {
                    points[i].animated = true;
                }

                points[i].graphic.animate({
                    x: points[j].shapeArgs.x
                });

                points[i].dataLabel.animate({
                    y: points[index].dataLabel.y
                });

                ticks[i].label.animate({
                    y: ticks[j].label.xy.y
                });
            }
        });
    });
};

Демо-версия: https://jsfiddle.net/BlackLabel/jfd0vuy8/