javascript - PHP는 MySQL에서 데이터 열을 읽고 이를 JS에 동적으로 표시합니다.-PHP 튜토리얼-php.cn

javascript - PHP는 MySQL에서 데이터 열을 읽고 이를 JS에 동적으로 표시합니다.

WBOY

풀어 주다： 2016-08-04 09:20:37

원래의

1138명이 탐색했습니다.

아시는 마스터님 계시다면 QQ:276294051에 저를 추가해 주시면 됩니다. 도움이 되셨다면 리워드를 요청하시면 됩니다!
PHP는 데이터를 읽어 배열에 할당할 수 있지만 JS 이미지에는 표시할 수 없습니다.
코드는 다음과 같습니다

<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>

로그인 후 복사

코드에 오류 메시지가 없습니다. 단순히 표시할 수는 없습니다. 예상되는 동적 그림은 그림 3 javascript - PHP는 MySQL에서 데이터 열을 읽고 이를 JS에 동적으로 표시합니다.

에 나와 있습니다.

답글 내용:

훌륭한 스승님이 계시다면 QQ: 276294051에 저를 추가해 주시면 됩니다. 도움이 되셨다면 보상을 받으실 수 있습니다!
PHP는 데이터를 읽어 배열에 할당할 수 있지만 JS 이미지에는 표시할 수 없습니다.
코드는 다음과 같습니다

<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>

로그인 후 복사

에 나와 있습니다.