Chart.js 使用数据库中的数据进行动态更新

Question

SOF 和 Chart.js 的新手。使用此折线图代码：[链接][1] linegraph.js 提取该数据并将数据添加到图表中。

我尝试设置一个 setInterval 函数来动态更新图表上的“事件”值。渲染图形并添加初始事件值。但是当 setInterval 运行以更新事件数据时出现错误：“Uncaught TypeError: Cannot read property '9' of undefined”（第 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！

根据您的代码，您似乎没有完全正确地更新图表数据。此外，您将需要使用.update() 函数而不是.render()。这是您的代码的更新版本，应该可以工作。

注意，我不确定result 的格式是什么，但在使用此示例之前，您可能必须先对其进行迭代并构建一个新的数据数组（就像您第一次创建图表时所做的那样）。

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

要记住的一点是，如果您要更新数据，那么您通常也需要更新标签。我已经注释掉了上面的一行，它演示了如何做到这一点。您可能还需要使用您的 result 对象并像在初始图表设置中那样构建标签。

根据您的最新代码和 cmets，您似乎在构建代码以使其正常工作时遇到问题。这是一个example，您应该能够构建它来解决您的问题。