javascript - PHP reads a column of data in MySQL and displays it dynamically in JS-PHP Tutorial-php.cn

javascript - PHP reads a column of data in MySQL and displays it dynamically in JS

WBOY

Release： 2016-08-04 09:20:37

Original

1140 people have browsed it

If there is a master who knows it, you can add me on QQ: 276294051. If it is helpful, you can ask for a reward!
PHP can read data and assign it to an array, but it cannot be displayed in the JS image
The code is as follows:

<code><?php
include_once('comn.php');                                //引入数据库连接文件
// test为数据表名称，有time、now两个字段
$sql = "SELECT * FROM test";
$results = mysql_query($sql, $conn);   //执行上面的sql语句，然后将结果赋给 $results

$data = array();
$i=0;
while ($row = mysql_fetch_array($results)) {
    $i++;
    $data[]=array('x'=>$row['time'], 'y'=>$row['now']); //time为 yyyy-mm-dd hh:mm:ss 格式
    
    $dataJson=json_encode($data);

}
//print_r($data);

?>
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
  <script>
  
    //下面Javascript代码

$(function () {                                                                     
    $(document).ready(function() {                                                  
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
                                                                                    
        var chart;                                                                  
        $('#container').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg, // don't animate in old IE               
                marginRight: 10,                                                    
                events: {                                                           
                    load: function() {                                              
                                                                                    
                        // set up the updating of the chart each second             
                        var series = this.series[0];                               
                        setInterval(function() {                                    
                            var x = (new Date()).getTime(), // current time         
                                y = $date[i];                                  
                            series.addPoint([x, y], true, true);
                                i=i+1;                   
                        }, 500);                                                   
                    }                                                               
                }                                                                   
            },                                                                      
            title: {                                                                
                text: '温度动态刷新'                                            
            },                                                                      
            xAxis: {
                title: {                                                            
                    text: '时间(t)'                                                   
                },                                                                 
                type: 'datetime',
                lineColor: "red",                                                     
                tickPixelInterval: 150                                              
            },                                                                      
            yAxis: {                                                                
                title: {                                                            
                    text: '温度(℃)'                                                   
                },                                                                  
                plotLines: [{                                                       
                    value: 1,                                                       
                    width: 1,                                                       
                    color: '#808080'                                                
                }]                                                                  
            },                                                                      
            tooltip: {                                                              
                formatter: function() {                                             
                        return '<b>'+ this.series.name +'</b><br/>'+                
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);                         
                }                                                                   
            },                                                                      
            legend: {                                                               
                enabled: false                                                      
            },                                                                      
            exporting: {                                                            
                enabled: false                                                      
            },                                                                      
            series: [{                                                              
                name: '实时温度数据',                                                
                data: <?php echo json_encode($date)?>,                                                                
            }]                                                                      
        });                                                                         
    });                                                                             
                                                                                    
});
  </script>
</head>
<body>
  <div id="container" style="min-width:400px;height:300px"></div>
</body>
</html></code>

Copy after login

The code has no error prompts. It just can’t be displayed! The expected dynamic picture is as shown in Figure 3 javascript - PHP reads a column of data in MySQL and displays it dynamically in JS

Reply content:

<code><?php
include_once('comn.php');                                //引入数据库连接文件
// test为数据表名称，有time、now两个字段
$sql = "SELECT * FROM test";
$results = mysql_query($sql, $conn);   //执行上面的sql语句，然后将结果赋给 $results

$data = array();
$i=0;
while ($row = mysql_fetch_array($results)) {
    $i++;
    $data[]=array('x'=>$row['time'], 'y'=>$row['now']); //time为 yyyy-mm-dd hh:mm:ss 格式
    
    $dataJson=json_encode($data);

}
//print_r($data);

?>
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
  <script>
  
    //下面Javascript代码

$(function () {                                                                     
    $(document).ready(function() {                                                  
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
                                                                                    
        var chart;                                                                  
        $('#container').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg, // don't animate in old IE               
                marginRight: 10,                                                    
                events: {                                                           
                    load: function() {                                              
                                                                                    
                        // set up the updating of the chart each second             
                        var series = this.series[0];                               
                        setInterval(function() {                                    
                            var x = (new Date()).getTime(), // current time         
                                y = $date[i];                                  
                            series.addPoint([x, y], true, true);
                                i=i+1;                   
                        }, 500);                                                   
                    }                                                               
                }                                                                   
            },                                                                      
            title: {                                                                
                text: '温度动态刷新'                                            
            },                                                                      
            xAxis: {
                title: {                                                            
                    text: '时间(t)'                                                   
                },                                                                 
                type: 'datetime',
                lineColor: "red",                                                     
                tickPixelInterval: 150                                              
            },                                                                      
            yAxis: {                                                                
                title: {                                                            
                    text: '温度(℃)'                                                   
                },                                                                  
                plotLines: [{                                                       
                    value: 1,                                                       
                    width: 1,                                                       
                    color: '#808080'                                                
                }]                                                                  
            },                                                                      
            tooltip: {                                                              
                formatter: function() {                                             
                        return '<b>'+ this.series.name +'</b><br/>'+                
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);                         
                }                                                                   
            },                                                                      
            legend: {                                                               
                enabled: false                                                      
            },                                                                      
            exporting: {                                                            
                enabled: false                                                      
            },                                                                      
            series: [{                                                              
                name: '实时温度数据',                                                
                data: <?php echo json_encode($date)?>,                                                                
            }]                                                                      
        });                                                                         
    });                                                                             
                                                                                    
});
  </script>
</head>
<body>
  <div id="container" style="min-width:400px;height:300px"></div>
</body>
</html></code>

Copy after login

The code has no error prompts. It just cannot be displayed! The expected dynamic picture is as shown in Figure 3 javascript - PHP reads a column of data in MySQL and displays it dynamically in JS