Question

我每隔x秒从网络服务刷新条形图的数据，并根据其值对条形图进行颜色编码。我使用的角度$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);

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

1 个答案: