javascript - Highcharts 条形图不会动画

Question

不知道为什么，因为我过去曾经这样做过，但我有一个 Highcharts 条形图，但它不会动画。这是图表的声明，

    function initializeData() {
      $http.get(url).success(function(ret) {
        $scope.jsondata = ret;
        var newdata = [];

        for (x = 0; x < 5; x++) {
          newdata.push({
            name: setName($scope.jsondata[x].name),
            y: $scope.jsondata[x].data[0],
            color: getColor($scope.jsondata[x].data[0])
          });
        }

        $scope.chart.series[0].setData(newdata);
      });
      mainInterval = $interval(updateData, 5000);
    }

    function updateData() {
      $http.get(url).success(function(ret) {
        $scope.jsondata = ret;
        console.debug("here");

        for (x = 0; x < 5; x++) {
          $scope.chart.series[0].data[x].update({
            y: $scope.jsondata[x].data[0],
            color: getColor($scope.jsondata[x].data[0])
          });
        }
      });
    }

    $scope.chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'bar',
        animation: true,
        events: {
          load: initializeData
        }
      },
      title: {
        text: ''
      },
      xAxis: {
        type: 'category',
        labels: {
          style: {
            fontSize: '11px'
          }
        }
      },
      yAxis: {
        min: 0,
        max: 100,
        title: {
          text: 'Total Score',
          align: 'high'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: 'Total Score <b>{point.y:.3f}</b>'
      },
      series: [{
        name: 'Active Users',
        data: [],
        dataLabels: {
          enabled: true,
          rotation: 30,
          style: {
            fontSize: '10px',
            fontFamily: 'Verdana, sans-serif'
          },
          format: '{point.y:.3f}', // one decimal
        }
      }]
    });

正如你所看到的，我有 animate : true, 所以我不确定这里出了什么问题。 I have this older plunker所有数据都在单独的系列中，但动画效果很好。但是this is the plunker I am working on并遇到麻烦。它们基本上是相同的。在较新的版本中，我将数据的初始化分解为自己的方法，但这是唯一真正的主要区别。

一些编辑:

正如我所说，我已经使用面积样条图以这种方式完成了操作(我知道据说它们的工作方式有点不同，但它们的设置相同)。

function initializeData() {
              $interval.cancel(mainInterval);
              $scope.previousPackets = '';
              $http.get("https://api.myjson.com/bins/nodx").success(function(returnedData) {

                var newdata = [];

                var x = (new Date()).getTime();

                for (var step = 9; step >= 0; step--) {
                  newdata.push([x - 1000 * step, 0]);
                }

                $scope.chart.series[0].setData(newdata);
              });
              mainInterval = $interval(updateData, 2000);
            }

            function updateData() {
              $http.get(url + acronym + '/latest').success(function(returnedData) {
                var x = (new Date()).getTime();

                if ($scope.previousPackets != returnedData[0].numPackets) {
                  $scope.chart.series[0].addPoint([x, returnedData[0].numPackets], true, true);
                  $scope.previousPackets = returnedData[0].numPackets;
                } else {
                  $scope.chart.series[0].addPoint([x, 0], true, true);
                }

              });

            }

            $scope.chart = new Highcharts.Chart({
              chart: {
                renderTo: 'container',
                type: 'areaspline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                  load: initializeData
                }
              },
              title: {
                text: ''
              },
              xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
              },
              yAxis: {
                title: {
                  text: 'Packets'
                },
                plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#d9534f'
                }]
              },
              tooltip: {
                formatter: function() {
                  return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' + Highcharts.dateFormat('%H:%M:%S', this.x);
                }
              },
              legend: {
                enabled: false
              },
              exporting: {
                enabled: false
              },
              series: [{
                name: 'Packets',
                data: []
              }]
            });

我还使用 initializeData() 方法和 updateData() 方法更新了第一 block 代码，这两个方法在两个不同的图表中看似相同。

Answer 1

如果您在图表初始化时或之后提供数据，它看起来会发挥重要作用。为了简单起见，我稍微重构了您的代码

function initializeChart(initialData, onload) {
  $scope.chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'bar',
      animation: true,
      events: {
        load: onload
      }
      ....
      series: [{
        name: 'Active Users',
        data: initialData,
        dataLabels: {
          enabled: true,
          format: '{point.y:.3f}', // one decimal
        }
      }]
    });
  }

  function getData(callback) {
    $http.get(url).success(function(ret) {
      $scope.jsondata = ret;
      var newdata = [];

      for (x = 0; x < 5; x++) {
        newdata.push([setName(ret[x].name), ret[x].data]);
      }

      callback(newdata);
    });
  }

因此，您的两 block 木板本质上被简化为以下两种方法。第一个使用预加载的数据初始化图表，第二个更新现有图表中的数据。

function readDataFirst() {
  getData(function(newdata) {
    initializeChart(newdata);
  });
}

function initializeChartFirst() {
  initializeChart([], function() {
    getData(function(newdata) {
      $scope.chart.series[0].setData(newdata);
    })
  });
}

第一个动画效果很好，而第二个则不然。如果数据集不是初始的并且被视为不兼容，则 highcharts 看起来会跳过动画。

但是，如果您确实想在当前工厂中添加动画(图表第一个工作流程)，您可以通过用零初始化第一个系列然后用真实数据来实现。这种情况下它将被视为更新

function forceAnimationByDoubleInitialization() {
  getData(function(newdata) {
    initializeChart([]);
    var zerodata = newdata.map(function(item) {
      return [item[0], 0]
    });

    $scope.chart.series[0].setData(zerodata);
    $scope.chart.series[0].setData(newdata);
  });

所有这些选项均可在 http://plnkr.co/edit/pZhBJoV7PmjDNRNOj2Uc 上找到。