最近單位做了一個簡單的資料採集程式，用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: []
                    }]
                });
            });

在伺服器中執行就會出現和資料庫同步更新的線性圖了。祝好運！