# 前端顯示
## 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的結果:
~~~
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)
