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并遇到麻烦。它们基本相同。在较新的一个中，我将数据初始化分解为自己的方法，但这是唯一真正的主要区别。

有些修改：

正如我所说的那样，我用areapline图表做了这样的事情（我知道它们的工作方式有点不同但它们的设置完全相同）。

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

提供了所有这些选项

Highcharts条形图不会动画

1 个答案: