Question

我已经收到这段代码，用于根据从“ data.php”中提取的数据生成图表。该图表呈现良好，没有任何问题。我似乎无法让它每5秒更新一次。

我尝试自动刷新整个页面，但这似乎没有效果，因为您将不得不向下滚动到图表。

$(document).ready(function () {

    /**
     * call the data.php file to fetch the result from db table.
     */
    $.ajax({
        url: "http://xx.xx.xx.xx/link/going2/data.php",
        type: "GET",
        success: function (data) {
            console.log(data);

            var VALUE = {
                iface1: [],
                iface2: [],
                iface3: [],
                iface4: [],
                iface5: [],
                iface6: []
            };

            var len = data.length;

            for (var i = 0; i < len; i++) {
                if (data[i].INTERFACE == "iface1") {
                    VALUE.iface1.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface2") {
                    VALUE.iface2.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface3") {
                    VALUE.iface3.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface4") {
                    VALUE.iface4.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface5") {
                    VALUE.iface5.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface6") {
                    VALUE.iface6.push(data[i].VALUE);
                }
            }

            //get canvas
            var t = new Date();
            var ctx = $("#line-chartcanvas");
            var data = {
                labels: [ (Removed to make code shorter)],
                datasets: [{
                    label: "cable-upstream 1/0.0",
                    data: VALUE.iface1,
                    backgroundColor: 'rgba(0, 0, 255, 1.0)',
                    borderColor: 'rgba(0, 0, 255, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/1.0",
                    data: VALUE.iface2,
                    backgroundColor: 'rgba(0, 128, 0, 1.0)',
                    borderColor: 'rgba(0, 128, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/2.0",
                    data: VALUE.iface3,
                    backgroundColor: 'rgba(255, 0, 0, 1.0)',
                    borderColor: 'rgba(255, 0, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/12.0",
                    data: VALUE.iface4,
                    backgroundColor: 'rgba(128, 0, 0, 1.0)',
                    borderColor: 'rgba(128, 0, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/13.0",
                    data: VALUE.iface5,
                    backgroundColor: 'rgba(0, 0, 0, 1.0)',
                    borderColor: 'rgba(0, 0, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/14.0",
                    data: VALUE.iface6,
                    backgroundColor: 'rgba(128, 0, 128, 1.0)',
                    borderColor: 'rgba(128, 0, 128, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, ]
            };

            var options = {
                animation: false,
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Service Group 1",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom"
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            max: 30,
                            min: 15,
                            stepSize: 0.5,
                            callback: function (value, index, values) {
                                return value + " dBmV";
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Signal to Noise'
                        }
                    }]
                }
            };

            var chart = new Chart(ctx, {
                type: "line",
                data: data,
                options: options
            });
        },
        error: function (data) {
            console.log(data);
        }
    });
});

我希望这张图表每5秒刷新一次（而不是刷新整个页面）

Answer 1

我认为您想每5秒钟刷新一次图表。所以使用此代码：

window.setInterval(function(){

///在这里调用函数 }，5000）；

要停止循环，您可以使用

clearInterval()

请检查此链接reference

自动更新此ChartJS脚本

1 个答案: