自动更新Highchart折线图

编程问答 2022-08-22

问题描述

我正在尝试制作一个高线图折线图，该折线图显示最近24小时内的数据，并显示每10秒从传感器添加到数据库中的新数据。到目前为止，我已经能够绘制一个图表，该图表从data.PHP获取数据，并制作了应提供实时数据的live.PHP文件，而chart向该图表添加了新的点。 这是我到目前为止的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

  var chart;
 $(document).ready(function() {

        Highcharts.setoptions({
            time: {
                //timezoneOffset: 3 * 60
            }
        });

     var options = {
        chart: {
          renderTo: 'container',type: 'line',zoomType: 'x',events: {
            load: function requestData() {

                $.ajax({
                    url: 'live.PHP',success: function(points) {
                        var series = chart.series,shift;

                        $.each(series,function(i,s) {
                            shift = s.data.length > 1;
                            s.addPoint(points[i],true,true);
                        });
                        setTimeout(requestData,1000);   
                        chart.redraw(); 
                    },cache: false
                });

            }
            }
        },tooltip: {
                    crosshairs: [true],shared: true
                 },title: {
        },xAxis: {
           type: 'datetime'
        },yAxis: [
            {
                title: {
                    //Flow Rate
                    text: '',style: {
                      color: '#7cb5ec'
                            }
                },labels: {
                    style: {
                        color: '#7cb5ec'
                            }
                        }
            },{
                title: {
                    //Product purity
                    text: ''
                },opposite:true
            }
        ],series: [{
           name: 'Flow Rate',data: []
       },{
           name: 'Product purity',data: [],yAxis: 1
        }]
     }; 
     $.getJSON('data.PHP',function(json) {
        data1 = [];
        data2 = [];
        $.each(json,function(key,value) {
        data1.push([value[0],value[1]]);
        data2.push([value[0],value[2]]);
        });

        options.series[0].data = data1;
        options.series[1].data = data2;
        chart = new Highcharts.Chart(options);
     });
  });
</script>

<body>
 <div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>

</body>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

这是data.PHP 

<?PHP

// PHP code to Insert data into MysqL database from input text

//    $hostname = "localhost";
    //$username = "********";
  //  $password = "********";
//    $databaseName = "********";
?>    


<?PHP

    $dbhost = 'localhost';
    $dbname = '*******';  
    $dbuser = '*******';                  
    $dbpass = '*******'; 

    try{

        $dbcon = new PDO("MysqL:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
        $dbcon->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

    }catch(PDOException $ex){
    
        die($ex->getMessage());
    }

    $stmt=$dbcon->prepare("SELECT * FROM FlowRate WHERE timeStamp BETWEEN DATE_SUB(DATE_ADD(Now(),INTERVAL 2 HOUR),INTERVAL 1 DAY) AND DATE_ADD(Now(),INTERVAL 2 HOUR) ORDER BY timeStamp ASC");
    $stmt->execute();
    $json = [];
    while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row);
        $json[]= [strtotime($timeStamp)*1000,(double)$flow,(double)$Productpurity];
    }
    echo json_encode($json);
?>

这是我的live.PHP文件：


<?PHP

// PHP code to Insert data into MysqL database from input text

//    $hostname = "localhost";
    //$username = "********";
  //  $password = "********";
//    $databaseName = "********";
?> 

<?PHP
header("Content-type: text/json");

    $dbhost = 'localhost';
    $dbname = '*********';  
    $dbuser = '*********';                  
    $dbpass = '*********'; 


    try{

        $dbcon = new PDO("MysqL:host={$dbhost};dbname={$dbname}",PDO::ERRMODE_EXCEPTION);

    }catch(PDOException $ex){

        die($ex->getMessage());
    }

    $stmt=$dbcon->prepare("SELECT * FROM FlowRate");
    $stmt->execute();
    $json = [];
    while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row);
            }
        $json[]= [strtotime($timeStamp)*1000,(float)$flow];
        $json[]= [strtotime($timeStamp)*1000,(float)$Productpurity];

    echo json_encode($json);
?>

现在绘制了图表，但是当将新数据添加到数据库中的表中时，它并不会每10秒更新一次。

感谢帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

highchartshtmljavascriptjquery