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

最近单位做了一个简单的数据采集程序，用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: []
                    }]
                });
            });

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