Highcharts - 柱状图重绘动画

问题描述

我试图用新数据数组更新现有数据系列，并在完成时调用 redraw 函数。虽然这很好，但我不太满意，因为我想要进行某种增长/缩小转型。我看过一个（摆弄现有的数据集，然后点击按钮将新数据设置为选定系列），但我无法复制此行为。

I'm trying to update an existing data series with a new data array and invoke the redraw function when done. While this works perfectly, I'm not quite satisfied as I'd like to have a sort of grow/shrink transition. I have seen an example by Highcharts (fiddle around with the existing data set then click on the button "Set new data to selected series") but I can't replicate this behavior.

这是我写的代码：

  var series, newSeriesThreshold = this.chart.series.length * 2;

  for (var i = 0; i < data.length; i += 2) {
    series = {
      name:  this.data[i].title,
      data:  this.data[i].data,
      color: this.data[i].color
    };

    if (i >= newSeriesThreshold) {
      this.chart.addSeries(series, false);
    } else {
      var currentSeries = this.chart.series[i / 2];
      currentSeries.setData(series.data, false);
    }
  }

  this.chart.redraw();

这些是创建图表时的选项：

These are the options when creating the chart:

  var config = {
    chart: {
      renderTo: $(this.container).attr('id'),
      type: this.settings.type,
      animation: {
        duration: 500,
        easing: 'swing'
      }
    },
    title: {
      text: null
    },
    legend: {
      enabled: this.settings.legend.show
    },
    tooltip: {
      formatter: function() {
        return this.x.toFixed(0) + ": <b>" + this.y.toString().toCurrency(0) + '</b>';
      }
    },
    xAxis: {
      title: {
        text: this.settings.xaxis.title,
        style: {
          color: '#666'
        }
      }
    },
    yAxis: {
      title: {
        text: this.settings.yaxis.title,
        style: {
          color: '#666'
        }
      }
    },
    series: series,
    plotOptions: {
      column: {
        color: '#FF7400'
      }
    },
    credits: {
      enabled: false
    }
  };

这样可以在不转换效果的情况下立即进行更新。任何想法我可能做错了什么？

This yields an immediate update without transitioning effects. Any ideas what I might be doing wrong?

推荐答案

这仍然是一个谜。我设法让轴更新，这表明有某种动画正在进行，但它只适用于轴，而不是列。

This remain a mystery. I managed to make the axis update which suggests that there is some kind of animation going on, but it's applied only to the axis, and not the columns.

最后，我已经解决了这个问题。

In the end, I've settled with this behavior.

这篇关于Highcharts - 柱状图重绘动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！