기둥 차트 애니메이션의 하이 차트 문제

Question

Highcharts를 사용하고 있으며 데이터가 변경 될 때 멋진 애니메이션이있는 세로 형 차트를 만들고 싶습니다. 애니메이션은 기존의 기둥이 높이를 변경해야합니다.

방법 3이 원하는 애니메이션을 수행하지만 많은 열 (애니메이션 대신 깜박임)이있는 경우 작동하지 않는 바이올린 (http://jsfiddle.net/Martinsos/Z2L6b/)을 만들었습니다.

<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,000 포인트 이상이 있고 여러 시리즈에서 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] 
     }); 
}); 

은 간단 exmaple 참조 : 괜찮 http://jsfiddle.net/2CdVr/