Javascript 使用数据库数据实时刷新我的Highcharts图表

目前我的Highcharts有问题。现在，我正在通过下面的values.php文件恢复数据库中的数据：

$bdd = new PDO('mysql:host=localhost;dbname=didatec;charset=utf8', 'root', ''); //Connexion

$sql = "SELECT DISTINCT date, temperature, consommation FROM acquisition, caisson, experience "; //Requête SQL 

foreach  ($bdd->query($sql) as $row) {
echo $row['date'] . "/" . $row['temperature']. "/" . $row['consommation']. "/"  ; //Récupère "time" et "degres" dans la base

}
?>

数据以以下形式恢复：

时间/温度/消耗

因此，我在values.php页面上得到以下形式的结果：

2018-06-06 08:21:31/45/6/2018-06-07 00:00:00/89/24/2018-06-06 09:41:51/64/20/2018-06-08 10:19:46/20/6/2018-06-08 11:25:12/30/2/2018-06-08 13:38:08/60/8/2018-06-08 14:11:49/25/12/2018-06-08 15:09:00/59/15/

为了达到以下目的：

然后用斜线切割数据，这样我就可以将它们整合到图形中。我现在有一个不同的图表，它可以很好地工作。我想做几乎相同的事情，但在现实生活中。也就是说，对于数据库中的每个新数据，图形每秒刷新一次，并在图形上向我显示数据。目前，我的图表每秒刷新一次，但谁知道从哪里恢复数据。这是我的data.js文件，其中是我的实时图（如下）。我尝试了一些事情，但没有得到任何令人信服的结果。所以我需要一点帮助，因为我已经做了一个星期了。我相信这也是一个愚蠢的错误。谢谢你

我的文件data.js:

$(function() {

var date = []; //time
var C1_Temp = [];   //degres
var C1_Deci =[];
var switch1 = true;
$.get('values.php', function(data) { //Récupère les données extraites de la base de données

    data = data.split('/');

    for (var i = 0; i < data.length; i += 3) {
      date.push(data[i]);
      C1_Temp.push(parseFloat(data[i + 1]));
      C1_Deci.push(parseFloat(data[i + 2]));
    }

    date.pop();

    $('#chartLive').highcharts({ //Déclaration du graphique avec sa configuration

        chart : {
            animation: Highcharts.svg, // don't animate in IE < IE 10.
            type : 'spline', //Type de courbe 
            events:{
                load: function (){

                var chart = this;

                var series = this.series[0];
                var series1 = this.series[1];


                setInterval(function (){

                    // var x = (new Date()).getTime();

                    for (var i = 0; i < data.length; i += 3) {
                        date.push(data[i]);
                        var y = C1_Temp.push(parseFloat(data[i + 1]));
                        var z = C1_Deci.push(parseFloat(data[i + 2]));
                     }


                    series.addPoint([y], true);
                    series.addPoint([z], true);

                }, 3000);

                // chart.redraw(data);

                }
            }
        },
        title : {
            text : 'Graphique en différé' //Titre du graphique
        },
        subtitle : {
            text : 'Températures et décibels' //Texte en haut hors graph
        },
        xAxis : { //Axe horizontal
            title : {
                text : 'Date'
            },
            categories : date,
            // max: 5,
            // min: 0,
        },
        yAxis : { //Axe vertical
            title : {
                text : 'Températures et décibels', //Texte à gauche hors graph
            },
        },
        tooltip : {
            crosshairs : true,
            shared : true,
            valueSuffix : ''
        },
        plotOptions : {
            spline : {
                marker : {
                    radius : 4,
                    lineColor : '#666666',
                    lineWidth : 1
                }
            }
        },
        credits: {
            enabled: false //permet de cacher le lien du graph en bas à droite
        },
        series : [{

            name : 'Températures', //Ajout de la courbe pour la température
            data : C1_Temp
        },{

            name : 'Décibels',
            data : C1_Deci

        }]
    });


    }); 
}); 

$（函数（）{
var date=[]；//时间
变量C1_Temp=[]；//度
var C1_Deci=[]；
var开关1=真；
$.get（'values.php'，函数（数据）{//Récupère les données extracite de la base de données
data=data.split（'/'）；
对于（变量i=0；i

如果这方面的专家能够帮助我，那就太好了。似乎您只从php文件（

getJSON

）获取了一次数据。然后启动始终在同一数据集上运行的

setInterval

。因此，基本上每3秒添加相同的数据。下面是一个使用承诺处理

setInterval

中的ajax调用的示例-您可以尝试这种方法：谢谢@KamilKulig。我唯一不明白的是数据和等待。从来没有用过，我想现在对我来说会很复杂。如果你有一个基于我的示例代码给我看，我就是一个接受者。谢谢你！下面是一个简化的演示：

$(function() {

var date = []; //time
var C1_Temp = [];   //degres
var C1_Deci =[];
var switch1 = true;
$.get('values.php', function(data) { //Récupère les données extraites de la base de données

    data = data.split('/');

    for (var i = 0; i < data.length; i += 3) {
      date.push(data[i]);
      C1_Temp.push(parseFloat(data[i + 1]));
      C1_Deci.push(parseFloat(data[i + 2]));
    }

    date.pop();

    $('#chartLive').highcharts({ //Déclaration du graphique avec sa configuration

        chart : {
            animation: Highcharts.svg, // don't animate in IE < IE 10.
            type : 'spline', //Type de courbe 
            events:{
                load: function (){

                var chart = this;

                var series = this.series[0];
                var series1 = this.series[1];


                setInterval(function (){

                    // var x = (new Date()).getTime();

                    for (var i = 0; i < data.length; i += 3) {
                        date.push(data[i]);
                        var y = C1_Temp.push(parseFloat(data[i + 1]));
                        var z = C1_Deci.push(parseFloat(data[i + 2]));
                     }


                    series.addPoint([y], true);
                    series.addPoint([z], true);

                }, 3000);

                // chart.redraw(data);

                }
            }
        },
        title : {
            text : 'Graphique en différé' //Titre du graphique
        },
        subtitle : {
            text : 'Températures et décibels' //Texte en haut hors graph
        },
        xAxis : { //Axe horizontal
            title : {
                text : 'Date'
            },
            categories : date,
            // max: 5,
            // min: 0,
        },
        yAxis : { //Axe vertical
            title : {
                text : 'Températures et décibels', //Texte à gauche hors graph
            },
        },
        tooltip : {
            crosshairs : true,
            shared : true,
            valueSuffix : ''
        },
        plotOptions : {
            spline : {
                marker : {
                    radius : 4,
                    lineColor : '#666666',
                    lineWidth : 1
                }
            }
        },
        credits: {
            enabled: false //permet de cacher le lien du graph en bas à droite
        },
        series : [{

            name : 'Températures', //Ajout de la courbe pour la température
            data : C1_Temp
        },{

            name : 'Décibels',
            data : C1_Deci

        }]
    });


    }); 
});