Question

我目前的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/208-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 /

按顺序给出：

2018-06-06 08:21:31 //Time
45 //Temperature
6 //Consumption

然后用斜线剪切数据，允许我将它们集成到我的图表上。我目前有一个不同的图表，可以很好地工作。我想在现实生活中做几乎相同的事情。也就是说，对于基础中的每个新数据，图形每秒刷新一次并在图形上向我显示数据。目前，我的图表每秒刷新一次，但从谁知道在哪里恢复数据。这是我的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

        }]
    });


    }); 
});

使用数据库数据

0 个答案: