柱狀圖動畫Highcharts問題

Question

我正在使用Highcharts並希望在數據更改時製作具有良好動畫的柱狀圖。動畫必須是現有的列改變其高度。

我創建了一個小提琴（http://jsfiddle.net/Martinsos/Z2L6b/），其中方法3執行我想要的動畫，但在有許多列（它們只是閃爍而不是動畫）時不起作用。

<script src="http://code.highcharts.com/highcharts.js"></script> 

<div id="container" style="height: 400px"></div> 
<button id="button1">Method 1</button> 
<button id="button2">Method 2</button> 
<button id="button3">Method 3</button> 

_

$(function() { 
    var getRandomData = function(size, addition) { 
     if (!addition) addition = 5; 
     var data = []; 
     var len = Math.random() * size + addition; 
     var i; 
     for (i = 0; i < len; i++) { 
      data.push(Math.random() * 50); 
     } 
     return data; 
    }; 

    $('#container').highcharts({ 
     chart: { 
       type: 'column', 
      }, 
     series: [{ 
      data: getRandomData(100) 
     }] 
    }); 

    $('#button1').click(function() { 
     var chart = $('#container').highcharts(); 

     chart.series[0].setData(getRandomData(100), false); // No animation happens 

     chart.redraw(); 
    }); 

    $('#button2').click(function() { 
     var chart = $('#container').highcharts(); 

     chart.series[0].remove(); 
     chart.addSeries({data: getRandomData(100)}); // Animation happens, but not the kind  I want 

     chart.redraw(); 
    }); 

    var method3 = function(chart, size, addition) { 
     var series = chart.series[0]; 
     var data = getRandomData(size, addition); 
     var seriesLen = series.data.length; 
     $.each(data, function(index, newPoint) { 
      if (index < seriesLen) { 
       series.data[index].update(newPoint, false); 
      } else { 
       series.addPoint([index, newPoint], false); 
      } 
     }); 
     while (seriesLen > data.length) { 
      series.data[seriesLen-1].remove(false); 
      seriesLen--; 
     } 

     chart.redraw(); 
    }; 

    $('#button3').click(function() { // Works as I want it 
     var chart = $('#container').highcharts(); 
     method3(chart, 100); 
     chart.redraw(); 
    }); 

    $('#button4').click(function() { // Fails for large chart 
     var chart = $('#container').highcharts(); 
     method3(chart, 100, 500); 
     chart.redraw(); 
    }); 
}); 

我怎麼能作出這樣的動畫作品始終，即使是大量的列？ 我也有與折線圖類似的問題：如果他們有更多然後約200個百分點，我做setData多個系列，然後重繪，他們有時只是閃爍，而不是動畫。我該如何解決這個問題？

謝謝

Answer 1

Unfortunaltey使用setData沒有這種動畫的，但你可以摧毀系列，並添加新的。

$('#update').click(function() { 

     chart.series[0].remove(); 
     chart.addSeries({ 
      data: [5, 4, 2, 2, 14, 5, 3, 2, 1, 2] 
     }); 
}); 

見簡單〔實施例： http://jsfiddle.net/2CdVr/