前端顯示

16.1　庫(kù)與車輪子

在多數(shù)的情況下我們都沒有理由也沒有必要去重新發(fā)明我們的車輪，在這時(shí)使用庫(kù)會(huì)是一個(gè)比較好的做法。

16.2　庫(kù)

16.2.1　jQuery Mobile

jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。jQuery Mobile開發(fā)團(tuán)隊(duì)說：能開發(fā)這個(gè)項(xiàng)目，我們非常興奮。移動(dòng)Web太需要一個(gè)跨瀏覽器的框架，讓開發(fā)人員開發(fā)出真正的移動(dòng)Web網(wǎng)站。

16.3　網(wǎng)站前臺(tái)顯示

16.3.1　Highcharts

Highcharts有以下的特點(diǎn)

• 兼容性：兼容當(dāng)今所有的瀏覽器，包括 iPhone、IE 和火狐等等；
• 對(duì)個(gè)人用戶完全免費(fèi)；
• 純JS，無(wú)BS；
• 支持大部分的圖表類型：直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅裝圖、散布圖；
• 跨語(yǔ)言：不管是 PHP、Asp.net 還是 Java 都可以使用，它只需要三個(gè)文件：一個(gè)是Highcharts 的核心文件 highcharts.js，還有 a canvas emulator for IE 和 Jquery類庫(kù)或者 MooTools 類庫(kù)；
• 提示功能：鼠標(biāo)移動(dòng)到圖表的某一點(diǎn)上有提示信息；
• 放大功能：選中圖表部分放大，近距離觀察圖表；
• 易用性：無(wú)需要特殊的開發(fā)技能，只需要設(shè)置一下選項(xiàng)就可以制作適合自己的圖表；
• 時(shí)間軸：可以精確到毫秒;

在這里只需將需要處理的數(shù)據(jù)存儲(chǔ)到數(shù)組中，便可以將其渲染成為圖形，下面的溫度走勢(shì)圖便是基于Highcharts的結(jié)果: