前端显示
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();
});