데이터베이스의 데이터가있는 Chart.js 동적 업데이트

Question

SOF 및 Chart.js 입문. 이 라인 차트 코드로 작업하기 : [Link] [1] linegraph.js는 그 데이터를 가져 와서 차트에 데이터를 추가합니다.

나는 그래프에서 "이벤트"값을 동적으로 업데이트하기 위해 setInterval 함수를 설정해 보았습니다. 그래프가 렌더링되고 초기 이벤트 값이 추가됩니다. 그러나 이벤트 데이터를 업데이트하기 위해 setInterval을 실행하면 오류가 발생합니다. "잡히지 않은 TypeError : 속성 9 '(정의되지 않음)을 읽을 수 없음"(내 배열의 행 43 - 10 개 항목)

함수를 올바르게 사용하여 배열에서 모든 값을 가져온 다음 그래프를 업데이트하십시오. 도와주세요!

업데이트 코드 V2 :

$(document).ready(function(){ 
    $.ajax({ 
    url: "http://localhost/data.php", 
    method: "GET", 
    success: function(data) { 
     console.log(data); 
     var source = []; 
     var event = []; 

     for(var i in data) { 
      source.push("Source" + data[i].source); 
      event.push(data[i].events); 
     } 

     var chartdata = { 
      labels: source, 
      datasets : [ 
       { 
        label: 'events', 
        backgroundColor: 'rgba(200, 200, 200, 0.75)', 
        borderColor: 'rgba(200, 200, 200, 0.75)', 
        hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
        hoverBorderColor: 'rgba(200, 200, 200, 1)', 
        data: event 
       } 
      ] 
     }; 

     var ctx = $("#mycanvas"); 

     var barGraph = new Chart(ctx, { 
      type: 'bar', 
      data: chartdata 
     }); 


     var updateChart = function() { 
      $.getJSON("data.php", function(data) { 
     barGraph.destroy();       <--------- Issue 
      for(var i in data) { 
      source.push("Source" + data[i].source); 
      event.push(data[i].events); 
      } 
     barGraph.update(); 

      }); 
     }   

     setInterval(function(){updateChart();},3000); 
    }, 
    error: function(data) { 
     console.log(data); 
    } 

}); 

});

새로운 코드 업데이트 4.17

 <div id="chart-container" style="width:40%"> 
           <canvas id="mycanvas"></canvas> 
          </div> 

      <script> 
      var randomScalingFactor = function() { 
            return Math.round(Math.random() * 100); 
           }; 


      // create initial chart 
       var ctx_live = document.getElementById("mycanvas"); 
       var myChart = new Chart(ctx_live, { 
        type: 'doughnut', 
        data: { 
        labels: ['BPM','REMAIN'], 
        datasets: [{ 
         data: [80,20], 
         borderWidth: 1, 
         backgroundColor:['#FF6384','#ffffff'], 
         label: 'BPMs', 
        }] 
        }, 
        options: { 
        responsive: true, 
        title: { 
         display: true, 
         text: "Chart.js - Dynamically Update Chart Via Ajax Requests", 
        }, 
        legend: { 
         display: false 
        }, 

        } 
       }); 

       // logic to get new data 
       var getData = function() { 
        $.ajax({ 
        url: 'http://localhost/data.php', 
        success: function(data) { 
         // process your data to pull out what you plan to use to update the chart 
         console.log(data); 
          var bpms = []; 
          var remain = []; 
          for(var i in data) { 
           bpms.push(data[i].bpm); 
           remain.push(data[i].left); 
          } 
         // e.g. new label and a new data point 

         // add new label and data point to chart's underlying data structures 

        // myChart.data.labels.push("BPM"); 
        // myChart.data.labels.push("REMAIN"); 
        // myChart.data.datasets[0].data.push([bpms]); 
        //myChart.data.datasets[0].data.push([remain]); 


            myChart.data.datasets.forEach(function(dataset) { 
              dataset.data = dataset.data.map(function() { 
               return randomScalingFactor();  <-------------------------------------- Issue Here 

              }); 


             }); 

         myChart.update(); 

        } 
        }); 
       }; 


       // get new data every 3 seconds 
       setInterval(getData, 3000); 

      </script> 

Answer 1

에 오신 것을 환영합니다 SO 및 chart.js!

코드에 따르면 차트 데이터를 올바르게 업데이트하지 않은 것처럼 보입니다. 또한 .render() 대신 .update() 함수를 사용해야합니다. 다음은 작동해야하는 코드의 업데이트 된 버전입니다.

주, 나는에서 어떤 형식 result 잘 모르겠지만, 당신은 그것을 반복하고이 예제를 사용하기 전에 (먼저 차트를 만들 때 그랬던 것처럼) 먼저 새 데이터 배열을 구축해야 할 수도 있습니다.

var updateChart = function() { 
    $.getJSON("data.php", function (result) { 
    //barGraph.data.labels = newLabelArray; 
    barGraph.data.datasets[0].data = result; 
    barGraph.update(); 
    }); 
} 

데이터를 업데이트하는 경우 일반적으로 레이블을 업데이트해야 할 가능성이 있습니다. 나는 그것을 수행하는 방법을 보여주는 위의 줄을 주석 처리했습니다. result 객체를 가져 와서 초기 차트 설정에서와 같이 레이블을 만들어야 할 것입니다.

최근 코드 및 설명에 따르면이 코드를 작동 시키려면 코드를 구성하는 데 문제가있는 것처럼 보입니다. 문제를 해결하기 위해 구축 할 수있는 example입니다.