Maison  >  Article  >  développement back-end  >  javascript - PHP读取MySQL中一列数据,并在JS中动态显示

javascript - PHP读取MySQL中一列数据,并在JS中动态显示

WBOY
WBOYoriginal
2016-08-04 09:20:371067parcourir

如果有会的大神,可以加我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);

?>



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


  <div id="container" style="min-width:400px;height:300px"></div>

</code>

代码无错误提示。只是无法显示!预期动态图如图3javascript - PHP读取MySQL中一列数据,并在JS中动态显示
javascript - PHP读取MySQL中一列数据,并在JS中动态显示
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);

?>



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


  <div id="container" style="min-width:400px;height:300px"></div>

</code>

代码无错误提示。只是无法显示!预期动态图如图3javascript - PHP读取MySQL中一列数据,并在JS中动态显示
javascript - PHP读取MySQL中一列数据,并在JS中动态显示
javascript - PHP读取MySQL中一列数据,并在JS中动态显示

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn