<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # 前端顯示 ## 16.1 庫與車輪子 在多數的情況下我們都沒有理由也沒有必要去重新發明我們的車輪,在這時使用庫會是一個比較好的做法。 ## 16.2 庫 ### 16.2.1 jQuery Mobile > jQuery Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫,而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發團隊說:能開發這個項目,我們非常興奮。移動Web太需要一個跨瀏覽器的框架,讓開發人員開發出真正的移動Web網站。 ## 16.3 網站前臺顯示 ### 16.3.1 Highcharts Highcharts有以下的特點 * 兼容性:兼容當今所有的瀏覽器,包括 iPhone、IE 和火狐等等; * 對個人用戶完全免費; * 純JS,無BS; * 支持大部分的圖表類型:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖; * 跨語言:不管是 PHP、Asp.net 還是 Java 都可以使用,它只需要三個文件:一個是Highcharts 的核心文件 highcharts.js,還有 a canvas emulator for IE 和 Jquery類庫或者 MooTools 類庫; * 提示功能:鼠標移動到圖表的某一點上有提示信息; * 放大功能:選中圖表部分放大,近距離觀察圖表; * 易用性:無需要特殊的開發技能,只需要設置一下選項就可以制作適合自己的圖表; * 時間軸:可以精確到毫秒; 在這里只需將需要處理的數據存儲到數組中,便可以將其渲染成為圖形,下面的溫度走勢圖便是基于Highcharts的結果: ![圖像說明文字](https://box.kancloud.cn/2015-08-25_55dbfb801ae43.jpg) ~~~ var dataLength = []; function drawTemp() { var zero = []; $.getJSON('/athome/', function(json) { var items = []; dataLength.push(json.length); $.each(json, function(key, val) { zero.push(val.temperature); }); chart = new Highcharts.Chart({ color: { linearGradient: { x1: 0, x2: 0, y1: 0, y1: 1 }, stops: [ [0, '#003399'], [1, '#3366AA'] ] }, chart: { renderTo: 'Tchart', type: 'spline' }, title: { text: '本月溫度情況' }, subtitle: { text: '' }, xAxis: { categories: [], title: { text: '' } }, yAxis: { title: { text: '溫度 (°C)' } }, tooltip: { backgroundColor: '#FCFFC5', borderColor: 'black', borderRadius: 10, borderWidth: 1, enabled: true, formatter: function() { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, series: [{ name: '本月', data: zero }, { name: '對比', data: [26.0] }] }); }); }; function showTemper() { var length = dataLength[0]; $.ajax({ url: '/athome/' + length, type: 'GET', dataType: 'json', async: true, timeout: 1000, error: function() {}, success: function(sdata) { $('.temperStatus').empty(); $('.temperStatus').append(sdata.temperature); } }); }; $(document).ready(function() { setInterval("drawTemp();", 5000); setInterval("showTemper();", 800); drawTemp(); showTemper(); }); ~~~ * [**一步步搭建物聯網系統**](http://www.ituring.com.cn/book/1580) * [前言](http://www.ituring.com.cn/tupubarticle/3778) * [第一部分](http://www.ituring.com.cn/tupubarticle/3801) * [1 無處不在的HTML](http://www.ituring.com.cn/tupubarticle/3779) * [2 無處不在的Javascript](http://www.ituring.com.cn/tupubarticle/3780) * [3 無處不在的CSS](http://www.ituring.com.cn/tupubarticle/3781) * [4 無處不在的三劍客](http://www.ituring.com.cn/tupubarticle/3782) * [5 GNU/Linux 強大且Free](http://www.ituring.com.cn/tupubarticle/3783) * [6 Arduino 極客的玩具](http://www.ituring.com.cn/tupubarticle/3784) * [7 Python 代碼如散文](http://www.ituring.com.cn/tupubarticle/3785) * [8 Raspberry Pi 極客的盛宴](http://www.ituring.com.cn/tupubarticle/3786) * [9 Server 一切皆為服務](http://www.ituring.com.cn/tupubarticle/3787) * [10 Web服務](http://www.ituring.com.cn/tupubarticle/3788) * [11 HTTP 熟悉&陌生](http://www.ituring.com.cn/tupubarticle/3789) * [12 設計RESTful API](http://www.ituring.com.cn/tupubarticle/3790) * [第二部分](http://www.ituring.com.cn/tupubarticle/3802) * [13 環境準備](http://www.ituring.com.cn/tupubarticle/3791) * [14 創建REST服務](http://www.ituring.com.cn/tupubarticle/3792) * [15 REST與不同語言](http://www.ituring.com.cn/tupubarticle/3793) * [?16 前端顯示](http://www.ituring.com.cn/tupubarticle/3794) * [17 RESTful的CoAP協議](http://www.ituring.com.cn/tupubarticle/3795) * [第三部分](http://www.ituring.com.cn/tupubarticle/3803) * [18 簡單物聯網](http://www.ituring.com.cn/tupubarticle/3797) * [19 Android簡單示例](http://www.ituring.com.cn/tupubarticle/3798) * [尾聲](http://www.ituring.com.cn/tupubarticle/3799)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看