Highcharts - column chart redraw animation

问题:

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.

This is what code that I've written:

  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?

回答1:

I have solved this problem by destroying and creating again the chart.

Here is the link on highcharts forum that helps me : http://forum.highcharts.com/highcharts-usage/animation-on-redraw-t8636/#p93199

The answer comes from the highcharts support team.

    $(document).ready(function() {
            var chartOptions = {
                    // Your chart options
                    series: [
                             {name: 'Serie 1' , color: '#303AFF', data: [1,1,1,1,1,1,1}
                            ]
                };

            var chart = new Highcharts.Chart(chartOptions);

        $("#my_button").click(function(){ 
            chart.destroy();
            chartOptions.series[0].data = [10,5,2,10,5,2,10];
            chart = new Highcharts.Chart(chartOptions);
        });
    });

回答2:

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.

回答3:

This might help:

var mychart = $("#mychart").highcharts();     
var height = mychart.renderTo.clientHeight; 
var width = mychart.renderTo.clientWidth; 
mychart.setSize(width, height);

to update all charts

$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height); 
  });