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

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

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

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

引言

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

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

一、Highcharts圖表控件簡介

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

1.主要特性

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

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

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

提示功能：HighCharts生成的圖表中，可以設(shè)置在數(shù)據(jù)點(diǎn)上顯示提示效果，即將鼠標(biāo)移動到某個數(shù)據(jù)點(diǎn)上，可以顯示該點(diǎn)的詳細(xì)數(shù)據(jù)，并且可以對顯示效果進(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)滑過某點(diǎn)時，以框的形式提示改點(diǎn)的數(shù)據(jù)，比如該點(diǎn)的值，數(shù)據(jù)單位等

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

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

二、精細(xì)化預(yù)報顯示平臺開發(fā)設(shè)計

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

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

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

2.開發(fā)步驟

2.1引用JS文件

使用jQuery作為基本框架，需要在頁面頭部同時引用jQuery和Hightcharts兩個文件。

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

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

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

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

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

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

3.效果展示

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

三、結(jié)語

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

參考文獻(xiàn)

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

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