这是我们上PHP课老师让我们完成的内容，在这里储存一下，方便以后观看，另外也可以给需要的小伙伴提供一些思路，代码什么的都是完整可运行的哦
html部分的代码：
test001.html
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 <option value="36">36</option> 50 <option value="37">37</option> 51 <option value="38">38</option> 52 <option value="39">39</option> 53 <option value="40">40</option> 54 <option value="41">41</option> 55 <option value="42">42</option> 56 <option value="43">43</option> 57 <option value="44">44</option> 58 <option value="45">45</option> 59 <option value="46">46</option> 60 <option value="47">47</option> 61 <option value="48">48</option> 62 <option value="49">49</option> 63 <option value="50">50</option> 64 <option value="51">51</option> 65 <option value="52">52</option> 66 <option value="53">53</option> 67 <option value="54">54</option> 68 <option value="55">55</option> 69 <option value="56">56</option> 70 <option value="57">57</option> 71 <option value="58">58</option> 72 <option value="59">59</option> 73 <option value="60">60</option> 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>
js部分的代码：
test001.js
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 );
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 ?>
这是两个js文件：js.zip
这是效果图：（此效果图为动态展示）
