データベースからのデータを含むChart.js動的更新

Question

SOFとChart.jsの新機能です。この線グラフコードを使って作業する：[Link] [1] linegraph.jsはそのデータをプルして、そのデータをグラフに追加します。

グラフの「イベント」値を動的に更新するsetInterval関数を設定しようとしました。グラフがレンダリングされ、初期イベント値が追加されます。しかし、イベントデータを更新するためにsetIntervalを実行するとエラーが発生します。 "Uncaught 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がここにあります。