Html網(wǎng)頁(yè)展示污染物趨勢(shì)曲線一種實(shí)現(xiàn)

安太興

摘 要：本文介紹了利用html canvas，jQuery展示污染物排放實(shí)時(shí)數(shù)據(jù)的一種方法。目前網(wǎng)頁(yè)上顯示曲線主要有更換圖片的方式、利用Adobeflash插件顯示的方式和基于html canvas的方式。更換圖片的方式，實(shí)時(shí)性不好，適合時(shí)間間隔比較大的情況。Adobeflash插件方式，實(shí)時(shí)性好，有很好的用戶體驗(yàn)，但容易給系統(tǒng)帶來(lái)安全隱患，也可能遭到用戶拒絕安裝，而canvas繪圖方式實(shí)時(shí)性好，而且相對(duì)安全。隨著html標(biāo)準(zhǔn)的發(fā)展，canvas得到更多的瀏覽器廠商支持，成為網(wǎng)頁(yè)開(kāi)發(fā)不錯(cuò)的選擇。

關(guān)鍵詞：html5;canvas;jQuery趨勢(shì)曲線

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1671-2064（2019）06-0049-02

0 前言

環(huán)境監(jiān)控系統(tǒng)中，不僅要顯示污染物排放的實(shí)時(shí)數(shù)據(jù)，還要查看歷史數(shù)據(jù)，以及數(shù)據(jù)的連續(xù)變化趨勢(shì)。本文介紹了在網(wǎng)頁(yè)中顯示趨勢(shì)曲線的一種方法。以前在網(wǎng)頁(yè)中顯示動(dòng)畫(huà)，基本上都是使用AdobeFlash插件。但是瀏覽器開(kāi)發(fā)商看插件不順眼，逐漸不再提供支持。而Html5提供了flash的替代方案，與之前版本最大的變化之一是添加了canvas 元素。canvas提供了一個(gè)通用的繪圖平面，開(kāi)發(fā)人員可以用它完成一些通用常用Adobeflash來(lái)完成的任務(wù)。它使瀏覽器可以直接處理原來(lái)要由Adobeflash插件來(lái)處理的內(nèi)容。

1 界面設(shè)計(jì)

如圖1界面草圖，界面分為趨勢(shì)曲線控制區(qū)和曲線顯示區(qū)?？刂茀^(qū)顯示曲線的名稱，當(dāng)前值、單位可以設(shè)置曲線顯示的顏色、寬度、類型、上限值、下限值，可以根據(jù)上下限值調(diào)整曲線的顯示比例。趨勢(shì)顯示區(qū)顯示曲線的圖像，圖例顯示區(qū)顯示曲線的圖例最大值最小值。時(shí)間刻度顯示區(qū)顯示x時(shí)間軸及時(shí)間刻度。

2 對(duì)象設(shè)計(jì)

本系統(tǒng)設(shè)計(jì)9個(gè)對(duì)象，如圖2類圖草圖所示，TrendGroup用于設(shè)置全局屬性。TrendController負(fù)責(zé)控制區(qū)的顯示及設(shè)置。TrendCanvas負(fù)責(zé)曲線的繪制，包括幾個(gè)對(duì)象。PanelBorder負(fù)責(zé)canvas邊框的繪制。PanelBackground負(fù)責(zé)背景圖案的繪制，GridLine負(fù)責(zé)繪制背景的網(wǎng)格線，XAxis負(fù)責(zé)繪制時(shí)間軸及時(shí)間刻度。Legend負(fù)責(zé)繪制圖例。TrendCurve負(fù)責(zé)繪制曲線。

幾個(gè)對(duì)象都實(shí)現(xiàn)了painting接口，為了避免看起里圖形混亂，在圖中沒(méi)有畫(huà)出。

3 幾個(gè)主要的方法

（1）$.ajax（options）。此函數(shù)用于向后臺(tái)發(fā)起ajax請(qǐng)求。參數(shù)options是一個(gè)對(duì)象實(shí)例，對(duì)象的屬性定義了這個(gè)操作的參數(shù)。返回值是XHR的實(shí)例。Options的主要的屬性有：

url，字符串型，是請(qǐng)求的url地址。

type，字符串型，是將要使用的http方法，默認(rèn)為GET。

dataType，字符串型，用來(lái)標(biāo)識(shí)請(qǐng)求響應(yīng)返回的數(shù)據(jù)的類型。這個(gè)值決定在把數(shù)據(jù)傳遞給回調(diào)函數(shù)之前進(jìn)行什么后續(xù)處理。有效值為：xml，html，json，script，text。

timeout，數(shù)值型，設(shè)置ajax請(qǐng)求的超時(shí)值。

success，函數(shù)型，請(qǐng)求成功時(shí)的回調(diào)函數(shù)。

error，函數(shù)型，請(qǐng)求響應(yīng)為錯(cuò)誤時(shí)的回調(diào)函數(shù)。

complete，函數(shù)型，在請(qǐng)求完成時(shí)的回調(diào)函數(shù)。

async，布爾值，如果設(shè)置為false，則為同步請(qǐng)求，在默認(rèn)情況下，為異步請(qǐng)求。

本文用來(lái)獲取服務(wù)器數(shù)據(jù)。

（2）$.getJSON（url，parameter，callback）。利用指定的url、使用parameters所帶的參數(shù)發(fā)起GET請(qǐng)求。響應(yīng)解析為JSON字符串。結(jié)果傳遞給callback。函數(shù)返回XHR實(shí)例。

參數(shù)介紹如下：

url，字符串，請(qǐng)求的url地址。

parameters，一個(gè)對(duì)象，其屬性用于構(gòu)造查詢字符串，并追加到url。

callback，函數(shù)型，回調(diào)函數(shù)，用于處理響應(yīng)。

本文用于訪問(wèn)服務(wù)器數(shù)據(jù)，獲取曲線的參數(shù)和時(shí)間數(shù)據(jù)。

（3）$.（selector）.append（content）。用來(lái)向指定元素末尾添加內(nèi)容。本文中用于向趨勢(shì)控制區(qū)添加控件。

（4）canvas.getContext（“2d”）。返回用于繪圖的context。為了能使用canvas元素繪圖，需要獲得一個(gè)上下文對(duì)象，這個(gè)對(duì)象開(kāi)放針對(duì)特定圖形的繪制函數(shù)。

（5）Context.fillRect（x，y，width，height）。此函數(shù)用于繪制一個(gè)實(shí)心的矩形，x，y是矩形的左上角坐標(biāo)，width，height分別指出繪制的寬度和高度。

（6）Context.clearRect（x，y，width，height）。此函數(shù)清除一個(gè)矩形區(qū)域，用于重繪窗口。x，y指出矩形區(qū)域的左上角，width和height指出矩形寬度和高度。

（7）Context.strokeRect（x，y，width，height）。繪制一個(gè)空心的矩形，用于繪制矩形的邊框。X，y，指出矩形區(qū)域的左上角，width和height指出矩形的寬度和高度。

（8）Context.save（）。通過(guò)把當(dāng)前狀態(tài)壓到繪圖狀態(tài)棧上，保存canvas的繪制狀態(tài)屬性的值。繪制狀態(tài)包括：當(dāng)前的轉(zhuǎn)換矩陣，當(dāng)前的剪切區(qū)域，當(dāng)前的虛線列表，以下屬性的當(dāng)前值：strokeStyle，fillStyle，globalAlpha， lineWidth， lineCap，lineJoin，miterLimit，lineDashOffset， shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor， globalCompositeOperation，font，textAlign，textBaseline， direction，imageSmoothingEnabled.

（9）Context.restore（）。通過(guò)在繪圖狀態(tài)棧中彈出頂端的狀態(tài)，將canvas的繪圖狀態(tài)恢復(fù)到保存狀態(tài)時(shí)。如果沒(méi)有保存過(guò)狀態(tài)，此方法不做改變。

（10）Context.moveTo（x，y）。此函數(shù)將一個(gè)新的子路徑的起始點(diǎn)移動(dòng)到（x，y）坐標(biāo)

（11）Context.lineTo（x，y）。此函數(shù)使用直線連接子路徑的終點(diǎn)到（x，y），并不真正地繪圖。

（12）Context.stroke（）。使用非零環(huán)繞規(guī)則，根據(jù)當(dāng)前的畫(huà)線樣式，繪制當(dāng)前或已經(jīng)存在的路徑。

（13）Context.fillText（text，x，y[，width]）。此函數(shù)在（x， y）位置填充文本。如果選項(xiàng)的第四個(gè)參數(shù)提供了最大寬度，文本會(huì)進(jìn)行縮放以適應(yīng)最大寬度。

（14）Context.strokeText（text，x，y[，width]）。此函數(shù)在給定的（x，y）位置繪制空心文本。如果提供了表示最大值的第四個(gè)參數(shù)，文本將會(huì)縮放適應(yīng)寬度。

4 程序?qū)崿F(xiàn)

本程序趨勢(shì)曲線控制區(qū)由一個(gè)div元素構(gòu)成，div元素子div元素和一個(gè)table元素。子div元素包含輸入框，按鈕等元素，用于輸入開(kāi)始結(jié)束時(shí)間，查詢按鈕等。table中列出了曲線的名稱，顏色，當(dāng)前值，描述，限值等。但添加曲線時(shí)，通過(guò)jQuery的方法append，向表table中動(dòng)態(tài)添加的行元素。

趨勢(shì)顯示區(qū)由canvas元素構(gòu)成，也由上面介紹的方法繪制。

軟件效果如圖3完成圖所示。

5 結(jié)語(yǔ)

本文介紹了一種使用canvas和jQuery完成網(wǎng)頁(yè)繪制曲線的方式，限于篇幅沒(méi)有粘貼代碼，不過(guò)文中介紹了關(guān)鍵方法的用法說(shuō)明，讀者可以參考。

參考文獻(xiàn)

[1] （美）弗里曼（Freeman，A.）著;謝廷晟，牛化成，劉美英譯.HTML5權(quán)威指南[M].北京：人民郵電出版社，2014.1：5-6.