Javascript Highcharts:xxx.animate不'；当对象多次相互替换时，无法正常工作

当我多次单击按钮时，下面的代码无法正常工作。我发现临时解决方案是调用

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

---

现场演示：

您不需要重置内部状态。您可以根据电流和初始值进行中继：

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

---

现场演示：

@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

我认为，您的live demo在state2和state3之间旋转条形图的原因是

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

---

我想把酒吧从大到小。我不想在等级不变的情况下旋转酒吧。您有什么好的解决方案吗？

谢谢ppotaczek！我认为你的代码不能解决这个问题，我写了第二个问题。如果你有时间，如果你能给我你的意见，我将不胜感激。嗨，Teruki Shinohara，很抱歉我误解了你的问题。请检查此示例：并让我知道是否一切正常。谢谢ppotaczek！！看起来你的代码有点错误。当我放置三个或更多条时，数据标签移动到错误的位置。代码来重现->真实数据（有很多条），我想我所要做的就是根据很多条写很多if语句。但是，我宁愿重新初始化图表对象，也不愿编写许多if语句。我认为另一个解决方案是修复Highcharts中DataLabel的行为，因为只有这三个元素的DataLabel有奇怪的行为。我能听听你的意见吗？嗨Teruki Shinohara，是的，DataLabel的行为与其他元素不同，很难预测。我认为最好是创建自定义数据标签：在您的情况下，它似乎是最稳定的解决方案。