Rumah >pembangunan bahagian belakang >tutorial php >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>
代码无错误提示。只是无法显示!预期动态图如图3
如果有会的大神,可以加我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>
代码无错误提示。只是无法显示!预期动态图如图3