基于Highcharts的鄉(xiāng)鎮(zhèn)精細(xì)化預(yù)報(bào)開(kāi)發(fā)與實(shí)現(xiàn)

萬(wàn)小雁　陳尊界　董大治　陳乃調(diào)　戴美彈

摘 要：Highcharts是一個(gè)應(yīng)用于WEB的界面漂亮的純Javascript圖表庫(kù)。本文介紹了Highcharts的主要功能以及應(yīng)用方法，并通過(guò)應(yīng)用Highcharts來(lái)實(shí)現(xiàn)鄉(xiāng)鎮(zhèn)精細(xì)預(yù)報(bào)的圖示化過(guò)程，給出相應(yīng)的方法和代碼。

關(guān)鍵詞：Highcharts 氣象要素 動(dòng)態(tài)顯示

中圖分類號(hào)：P42 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1003-9082（2018）10-00-01

引言

蒼南是嚴(yán)重氣象災(zāi)害多發(fā)的地區(qū)，近年來(lái)基本上都有臺(tái)風(fēng)、暴雨、洪澇、雷擊、高溫等災(zāi)害性天氣發(fā)生。為了減少這些災(zāi)害性天氣對(duì)社會(huì)及公眾經(jīng)濟(jì)財(cái)產(chǎn)的損失和人員的傷亡，我們氣象部門(mén)因此提前做好預(yù)報(bào)服務(wù)以及提升預(yù)報(bào)的精確率顯得非常重要。近年來(lái)，氣象部門(mén)加大了氣象人才的培養(yǎng)和氣象技術(shù)的研發(fā)，通過(guò)精細(xì)化預(yù)報(bào)技術(shù)的創(chuàng)新發(fā)展和氣象“大數(shù)據(jù)”的綜合運(yùn)用，已經(jīng)初步建立了十五天無(wú)縫隙精細(xì)化格點(diǎn)監(jiān)測(cè)預(yù)報(bào)產(chǎn)品體系。通過(guò)這個(gè)體系，可以為社會(huì)公眾提供十五天的精度可以達(dá)到1公里且每10分鐘就能更新一次的精細(xì)化預(yù)報(bào)服務(wù)。

氣象數(shù)據(jù)對(duì)廣大公眾來(lái)說(shuō)是深?yuàn)W和抽象的，如果更直觀、更簡(jiǎn)單的形式讓公眾接受，那便是將氣象數(shù)據(jù)圖形化展示了。Highcharts圖表控件是目前應(yīng)用最為廣泛的圖表控件，能將氣象數(shù)據(jù)直觀地展示出來(lái)。

一、Highcharts圖表控件簡(jiǎn)介

Highcharts是一個(gè)非常流行，界面美觀的純Javascript圖表庫(kù)。Highcharts可以為您的網(wǎng)站或Web應(yīng)用程序提供直觀，良好的動(dòng)態(tài)交互圖表。

1.主要特性

兼容性好：HighCharts采用純JavaScript編寫(xiě)，兼容主流的瀏覽器；

支持大部分的圖表類型：直線圖，曲線圖、區(qū)域曲線圖、柱狀圖、餅狀圖、散布圖等；

不受語(yǔ)言約束：HighCharts可以在大多數(shù)的WEB開(kāi)發(fā)中使用，并且對(duì)個(gè)人用戶及非商業(yè)應(yīng)用免費(fèi)，支持ASP，PHP，JAVA，.NET等多種語(yǔ)言中使用。

提示功能：HighCharts生成的圖表中，可以設(shè)置在數(shù)據(jù)點(diǎn)上顯示提示效果，即將鼠標(biāo)移動(dòng)到某個(gè)數(shù)據(jù)點(diǎn)上，可以顯示該點(diǎn)的詳細(xì)數(shù)據(jù)，并且可以對(duì)顯示效果進(jìn)行設(shè)置。

2.主要屬性

title，標(biāo)題設(shè)置； subtitle，設(shè)置圖表副標(biāo)題

xAxis，設(shè)置圖表橫軸內(nèi)容

yAxis，設(shè)置圖表縱軸內(nèi)容

tooltip，數(shù)據(jù)點(diǎn)提示框，當(dāng)鼠標(biāo)滑過(guò)某點(diǎn)時(shí)，以框的形式提示改點(diǎn)的數(shù)據(jù)，比如該點(diǎn)的值，數(shù)據(jù)單位等

legend，圖例，用不同形狀、顏色、文字等 標(biāo)示不同數(shù)據(jù)列，通過(guò)點(diǎn)擊標(biāo)示可以顯示或隱藏該數(shù)據(jù)列

series，數(shù)據(jù)列，圖表上一個(gè)或多個(gè)數(shù)據(jù)系列，比如圖表中的一條曲線，一個(gè)柱形

二、精細(xì)化預(yù)報(bào)顯示平臺(tái)開(kāi)發(fā)設(shè)計(jì)

1.平臺(tái)的架構(gòu)

由于平臺(tái)主要是對(duì)實(shí)時(shí)數(shù)據(jù)的變化趨勢(shì)的顯示，因此可以設(shè)計(jì)成常用的三層模式：顯示層、邏輯層、數(shù)據(jù)層。如下圖所示：

顯示層就是將氣象數(shù)據(jù)以網(wǎng)頁(yè)的圖形化方式直觀展示，這層主要是前臺(tái)代碼由ASP.Net、JS、CSS等文件構(gòu)成，通過(guò)常用的瀏覽器來(lái)運(yùn)行，就能直觀地看到氣象數(shù)據(jù)動(dòng)態(tài)變化曲線圖。 邏輯層中將獲取的數(shù)據(jù)層數(shù)據(jù)進(jìn)行數(shù)據(jù)邏輯變換，轉(zhuǎn)換為前臺(tái)所需要的數(shù)據(jù)格式，也就是對(duì)數(shù)據(jù)進(jìn)行格式化處理。 數(shù)據(jù)層則顯示層提供數(shù)據(jù)，可以是數(shù)據(jù)庫(kù)數(shù)據(jù)或是中間數(shù)據(jù)格式，如XML，JSON等，對(duì)于一個(gè)實(shí)時(shí)顯示平臺(tái)，數(shù)據(jù)層顯得十分重要，要保證數(shù)據(jù)的及時(shí)性及安全性。

2.開(kāi)發(fā)步驟

2.1引用JS文件

使用jQuery作為基本框架，需要在頁(yè)面頭部同時(shí)引用jQuery和Hightcharts兩個(gè)文件。

2.2加載ashx傳遞數(shù)據(jù)

ashx是用于寫(xiě)web handler的，一般用來(lái)處理生成動(dòng)態(tài)數(shù)據(jù)等不需要回傳處理的任務(wù)。通過(guò)編寫(xiě)ashx代碼，并其返回JSON數(shù)據(jù)格式。

2.3前臺(tái)載入數(shù)據(jù)

2.4加載曲線數(shù)據(jù)

要在圖表中顯示降水、溫度、風(fēng)向、風(fēng)速等多種氣象要素，主要通過(guò)設(shè)置series，是一個(gè)數(shù)組結(jié)構(gòu)。

2.5在頁(yè)面中添加一個(gè)DIV元素，作為放置Highcharts圖表的容器。需要為其設(shè)置ID值。

3.效果展示

將代碼部署到服務(wù)端后，通過(guò)IE訪問(wèn)后，效果如圖2所示（圖2為運(yùn)行后的曲線圖）。

三、結(jié)語(yǔ)

通過(guò)Hightcharts實(shí)現(xiàn)的氣象預(yù)報(bào)精細(xì)化的動(dòng)態(tài)顯示圖已用于蒼南氣象網(wǎng)，用于展示蒼南各鄉(xiāng)鎮(zhèn)的逐三小時(shí)的精細(xì)化預(yù)報(bào)。Hightcharts具體應(yīng)用簡(jiǎn)單，部署方便等優(yōu)點(diǎn)，應(yīng)用Hightcharts，還可以開(kāi)發(fā)出天氣實(shí)況、氣候變化的動(dòng)態(tài)過(guò)程。

參考文獻(xiàn)

[1]http：//www.highcharts.com

[2]https：//www.hcharts.cn/demo/highcharts