javascript - Highcharts 条形图动画仅适用于 1 个系列

Question

我每隔 x 秒从网络服务刷新条形图的数据，并根据其值对条形图进行颜色编码。我使用的 Angular $interval 看起来像这样:

    mainInterval = $interval(function() {
      console.debug("interval");
      for (x = 0; x < 5; x++) {
        var temp = Math.random() * 100;
        if (temp > 75) {
          $scope.chart.series[x].update({
            color: "red"
          });
          $scope.chart.series[x].setData([temp]);
        } else if (temp > 50) {
          $scope.chart.series[x].update({
            color: "orange"
          });
          $scope.chart.series[x].setData([temp]);
        } else if (temp > 25) {
          $scope.chart.series[x].update({
            color: "yellow"
          });
          $scope.chart.series[x].setData([temp]);
        } else {
          $scope.chart.series[x].update({
            color: "grey"
          });
          $scope.chart.series[x].setData([temp]);
        }
      }

    }, 5000);

但是我遇到的问题是，一旦第一次经过该间隔，动画就不再显示底部 4 个栏，而只显示顶部一个。例如，如果您将间隔更改为

    mainInterval = $interval(function() {
      console.debug("interval");
      for (x = 0; x < 5; x++) {
        var temp = Math.random() * 100;
          $scope.chart.series[x].setData([temp]);
        }
    }, 5000);

循环之间的动画效果完美，但颜色没有明显变化。有什么想法可以解决这个问题吗？ Here is the plunker I am working on.

Answer 1

问题是 series.update() 将删除那个漂亮的动画。解决方法是首先更新颜色，然后 setData()。例如:http://plnkr.co/edit/NbzYPwoLdCrgHQ4iTF59?p=preview - 两个单独的for，我们需要调用两次chart.redraw()。现在是性能与设计之间的问题;)

    mainInterval = $interval(function() {

      for (x = 0; x < 5; x++) {
        var temp = Math.random() * 100,
            color;
        if (temp > 75) {
          color = "red";
        } else if (temp > 50) {
          color = "orange";
        } else if (temp > 25) {
          color = "yellow";
        } else {
          color = "grey";
        }
          $scope.chart.series[x].update({
            color: color,
            nextData: [temp]
          },false);
      }

      $scope.chart.redraw();

      $.each( $scope.chart.series, function(i, s) {
        s.setData(s.options.nextData, false);
      });

      $scope.chart.redraw();

    }, 5000);