chart.js를 사용하는 라이브 차트

Question

저는 다양한 웹 사이트에서 정보를 얻은 라이브 차트를 만들기 위해 높은 차트를 사용했으며 chart.js를 사용하여 동일한 작업을 수행 할 수 있는지 궁금합니다. 나중에 차트 차트를 업로드 할 예정입니다. 시스템에 대한 액세스

Answer 1

Chart.js 홈페이지 http://www.chartjs.org/에 라이브 차트 예제가 있습니다. 여기에 관련 코드가 있지만 해당 페이지의 전체 작동 예제를 복사 할 수 있습니다.

for (var i = barsCount - 1; i >= 0; i--) { 
    data.push(Math.round(Math.random() * 100)); 
}; 
new Chart($id('hero-bar').getContext('2d')).Bar({ 
    labels : labels, 
    datasets : [{ 
     fillColor : '#2B303B', 
     data : data 
    }] 
},{ 
    showScale : false, 
    barShowStroke : false, 
    barValueSpacing: 1, 
    showTooltips : false, 
    onAnimationComplete : function(){ 
     // Get scope of the hero chart during updates 
     var heroChart = this, 
      timeout; 
     // Stop this running every time the update is fired 
     this.options.onAnimationComplete = randomUpdate; 

     this.options.animationEasing = 'easeOutQuint'; 

     randomUpdate(); 

     function randomUpdate(){ 
      heroChart.stop(); 
      clearTimeout(timeout); 
      // Get a random bar 
      timeout = setTimeout(function(){ 
       var randomNumberOfBars = Math.floor(Math.random() * barsCount), 
        i; 
       for (i = randomNumberOfBars - 1; i >= 0; i--) { 
        heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100); 
       }; 
       heroChart.update(); 
      },Math.random() * updateDelayMax); 
     }; 
    } 
});