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,所以我不確定這是什么問題。 我有一個較舊的插件 ，所有數據都在單獨的系列中，但是動畫效果很好。 但這是我正在研究的麻煩事。 他們基本上一樣。 在較新的版本中，我將數據初始化分為自己的方法，但這是唯一真正的主要區別。

一些編輯：

因此，正如我所說的，我已經用一個面積圖繪制了這種方式（我知道據說它們的工作原理有些不同，但是它們的設置是相同的）。

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()方法更新了第一段代碼，它們在兩個不同的圖表中看起來都是相同的。

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

結果，您的兩塊木板從本質上講簡化為以下兩種方法。 第一個使用預加載的數據初始化圖表，第二個更新現有圖表中的數據。

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獲得