動態傳感器數據展現平臺代碼及截圖

時間 2020-05-25

標籤動態傳感器數據展現平臺代碼截圖简体版

原文原文鏈接

　　這是咱們上PHP課老師讓咱們完成的內容，在這裏儲存一下，方便之後觀看，另外也能夠給須要的小夥伴提供一些思路，代碼什麼的都是完整可運行的哦~php

html部分的代碼：html

test001.htmljquery

 1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 2 <script src="./js/jquery-2.0.3.min.js"></script>
 3 <script src="./js/highstock.js"></script>
 4 <script src="./test001.js"></script>
 5 
 6 
 7 <center>
 8 <h1>傳感器數據展現平臺</h1>
 9 
10 <hr>
11 <div>
12     數據選擇：
13     <select id="usb_data_id" name="usb_data_id" style="height: 30px;">
14     <option value="1">01</option>
15     <option value="2">02</option>
16     <option value="3">03</option>
17     <option value="4">04</option>
18     <option value="5">05</option>
19     <option value="6">06</option>
20     <option value="7">07</option>
21     <option value="8">08</option>
22     <option value="9">09</option>
23     <option value="10">10</option>
24     <option value="11">11</option>
25     <option value="12">12</option>
26     <option value="13">13</option>
27     <option value="14">14</option>
28     <option value="15">15</option>
29     <option value="16">16</option>
30     <option value="17">17</option>
31     <option value="18">18</option>
32     <option value="19" selected="true" //表明該項被選中>19</option>
33     <option value="20">20</option>
34     <option value="21">21</option>
35     <option value="22">22</option>
36     <option value="23">23</option>
37     <option value="24">24</option>
38     <option value="25">25</option>
39     <option value="26">26</option>
40     <option value="27">27</option>
41     <option value="28">28</option>
42     <option value="29">29</option>
43     <option value="30">30</option>
44     <option value="31">31</option>
45     <option value="32">32</option>
46     <option value="33">33</option>
47     <option value="34">34</option>
48     <option value="35">35</option>
49     
74     </select>
75     <button id="usb_data_show">顯示數據</button>
76 </div>
77 <br>
78 <div id="container" style="min-width:400px;height:400px"></div>
79 
80 
81 
82 
83 </center>
84 
85 test001.html

js部分的代碼：ajax

test001.jsjson

  1 $(document).ready(
  2     function () {
  3 
  4         var usb_data_all = [];  //全局變量，存儲全局數據
  5 
  6         $("#usb_data_show").click(
  7             function () {
  8                 // $(this).hide();//將對應按鈕內容單擊後隱藏
  9                 // alert("我是一個按鈕");//點擊對應按鈕後彈出提示框
 10                 //從後臺獲取數據
 11                 usb_data_all=getSingleUsbData();//是分號 不是逗號
 12                 //alert(usb_data_all);//顯示數據
 13                
 14 
 15             }
 16         );
 17 
 18 
 19         //*************
 20         //圖表數據獲取函數
 21         //*************
 22         function getSingleUsbData() {
 23             var usb_data;
 24             $.ajax({
 25                 type: "post",  //是逗號，不是分號 
 26                 dataType: "json",
 27                 cache: false,//布爾值，表示瀏覽器是否緩存被請求頁面。默認是 true
 28                 async: false,//是否異步
 29                 url: "test001.php",//跳轉到test001.php界面
 30                 data: {
 31                     usb_data_id: $('#usb_data_id').val()  //usb_data_id name屬性
 32                 },
 33                 success : function (data, textStatus) {
 34                     usb_data = data;                   
 35                 },
 36                 error : function (jqXHR, textStatus,
 37                      errorThrown) {
 38                         //alert("data");
 39                 },
 40             });
 41         return usb_data;
 42         
 43             }
 44 
 45 ////////////////////////////////////////////////
 46 Highcharts.setOptions({
 47     global : {
 48         useUTC : false
 49     }
 50 });
 51 // Create the chart
 52 Highcharts.stockChart('container', {
 53     chart : {
 54         events : {
 55             load : function () {
 56                 // set up the updating of the chart each second
 57                 var series = this.series[0];
 58                 //每幾秒鐘彈出什麼內容
 59                 setInterval(function () {
 60                     if(usb_data_all.length>0){
 61                         var x = (new Date()).getTime(), // current time
 62                         y = parseInt(usb_data_all[0]);//Math.round(Math.random() * 100);//後臺獲取的數據
 63                         series.addPoint([x, y], true, false);
 64                         usb_data_all.shift();  //把數組第一個元素刪除，並返回第一個元素的值
 65 
 66                     }
 67                     
 68                 }, 0.0001);
 69             }
 70         }
 71     },
 72     rangeSelector: {
 73         buttons: [{
 74             type: 'all',
 75             text: 'All'
 76         }],
 77         inputEnabled: false,
 78         selected: 0
 79     },
 80     title : {
 81         text : '傳感器數據展現'
 82     },
 83     //數據提示框
 84     tooltip: {
 85         split: false
 86     },
 87     //是否導出
 88     exporting: {
 89         enabled: false
 90     },
 91     //圖表區域的內容
 92     series : [{
 93         name : '傳感器數據',
 94         data : []
 95     }]
 96 });
 97 
 98 /////////////////////////////////////////////////
 99 
100     }
101 );
102 
103 test001.js

php部分的代碼：數組

test001.php瀏覽器

 1 <?php
 2     //文件名稱
 3     $file = './msg_usb_data.csv';//圖表文件
 4     //判斷文件是否存在
 5     if (!is_file($file)){
 6         exit("沒有文件");
 7     }
 8     //打開文件
 9     $handle = fopen($file,'r');
10     //判斷文件是否可讀取
11     if (!$handle){
12         exit("讀取文件失敗");
13     }
14 
15     $usb_data_id = $_POST["usb_data_id"];//本身學號後兩位
16     //這裏的 POST 與前臺type類型一致
17     $usb_data = "";//須要圖標顯示的數據
18     $i = 1;
19     while (($data = fgetcsv($handle)) !== false){
20         //下面這行代碼能夠解決中文亂碼問題
21         //$data[0] = iconv('gbk','utf-8','$data[0]');
22 
23         // //跳過第一行標題
24         if ($data[0] == 'name'){
25              continue;
26         }
27         //判斷是否爲本身的學號
28         if ($i == $usb_data_id){
29             //data爲每行數據，這裏轉化成一維數組
30             $usb_data = explode(",",$data[0]);
31             break;
32         }
33         $i++;
34     }
35 
36     fclose($handle);
37     echo json_encode($usb_data);
38     
39 
40     //若是內容是純php文件，能夠去掉
41 ?>
42 
43 test001.php