Question

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

我尝试过设置setInterval函数来动态更新＆＃34;事件＆＃34;我的图表上的值。渲染图形并添加初始事件值。但是当setInterval运行以更新事件数据时，我收到错误：＆＃34;未捕获的TypeError：无法读取属性＆＃39; 9＆＃39;未定义＆＃34; （第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对象并像初始图表设置一样构建标签。

根据您的最新代码和评论，您似乎无法构建代码以使其正常工作。这是一个example，你应该能够构建来解决你的问题。

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

1 个答案: