# 前端显示
## 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)
