Highcharts, PHP制作实时更新的动态线性图

来源：互联网发布：基坑监测数据处理软件编辑：程序博客网时间：2024/06/11 14:04

最近单位做了一个简单的数据采集程序，用PLC采集数据并用KepServer采集到数据库中，大概每10秒钟采集一次，我用PHP做了一个页面提供查询，能够将指定时间段的数据查询出来，并转存到Excel中查看分析。我觉得有些麻烦，就想用Highcharts直接动态的显示到页面中，每10秒钟自动更新一次。经过几天的努力，终于实现了基本的功能，现在总结一下，以便以后参考。

首先我用的环境是MS SQL + PHP + Highcharts（一个javascript图形库，如果不知道，网上自行查。）中间用Json传递数据。数据库中只有一个表（rz),有两列分别是时间和数值（rzTime,rzValue)。

后台PHP程序一个文件用来输出Json文件：

<?php       /* 用 PDO_SQLSRV 链接 SQL server . */      $serverName = "YourServerName";      $database = "DatabaseName";      //从文件中读取用户名和密码.      $uid = file_get_contents("..\uid.txt");      $pwd = file_get_contents("..\pwd.txt");      try{          $conn = new PDO( "sqlsrv:server=$serverName;Database = $database",$uid,$pwd);          $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );      }        catch(PDOException $e){        die("Error connection to SQL Server");    }

//每次只需要读出一个最新的数据    $query = "select top 1 rzTime,rzValue from rz order by rzTime DESC";    $stmt = $conn->query($query);    $row = $stmt->fetch();    $rzTime = strtotime($row['rzTime']);        $rzH = strftime('%H',$rzTime);    $rzM = strftime('%M',$rzTime);    $rzS = strftime('%S',$rzTime);    $rzmonth = strftime('%m',$rzTime);    $rzD = strftime('%d',$rzTime);    $rzY = strftime('%Y',$rzTime);    //将时间转换为时间戳    $jsonArray = array(mktime($rzH,$rzM,$rzS,$rzmonth,$rzD,$rzY)*10000,round($row['rzValue'],3));    $stmt->closeCursor();    $stmt = null;    $conn = null;    //文件输出为设置为 JSON    header('Content-type: text/json');    echo json_encode($jsonArray);?>

单独访问这个文件，会返回一个jsong数据：

[1.4806018e+12,1743.056]

前台程序，首先需要引入jQuery和Highcharts库文件：

<script type="text/javascript" src="../Charts/js/jquery-1.7.2.min.js"></script>    <script src="../Charts/js/highcharts.js"></script>    <script src="../Charts/js/modules/exporting.js"></script>

用jQuery调用数据文件，每10秒调用一次。

function requestData(){                $.ajax({                    url: 'chartData.php',                    success: function(point){                        var series = chart.series[0],                            shift = series.data.length > 20; // 图中显示20个数据点                                               chart.series[0].addPoint(eval(point),true,shift);                        setTimeout(requestData,10000); //每10秒调用一次                    },                    cache: false                });            }

设置Highcharts属性：

$(document).ready(function(){              chart = new Highcharts.Chart({                    chart: {                        renderTo: 'container',                        defaultSeriesType: 'spline',                        events: {                            load: requestData                        }                    },                    title:{                        text: '实时数据',                        x:-20                    },                    xAxis: {                        type: 'datetime',                        tickPixelInterval: 150,                        maxZoom: 20 * 1000                    },                    yAxis: {                        minPadding: 0.2,                        maxPadding: 0.2,                        title: {                            text: '数值',                            margin: 80                        }                    },                    tooltip: {                        formatter: function(){                            return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '数值是：' + this.y;                        }                    },                    //本来下面是版权信息，我将它改成下载浏览器了，因为这个在XP下IE7，8无法运行                    credits:{                        enabled:true,                        text:'XP系统请点击这里下载浏览器',                        href:'../../谷歌浏览器 XP版.exe',                        style:{                            color:'#FF0000',                            fontSize:'14px'                        }                    },                    series: [{                        name: 'XXX值',                        data: []                    }]                });            });

在服务器中运行就会出现和数据库同步更新的线性图了。祝好运！

0 0