基于Highcharts的乡镇精细化预报开发与实现

万小雁　陈尊界　董大治　陈乃调　戴美弹

摘 要：Highcharts是一个应用于WEB的界面漂亮的纯Javascript图表库。本文介绍了Highcharts的主要功能以及应用方法，并通过应用Highcharts来实现乡镇精细预报的图示化过程，给出相应的方法和代码。

关键词：Highcharts 气象要素 动态显示

中图分类号：P42 文献标识码：A 文章编号：1003-9082（2018）10-00-01

引言

苍南是严重气象灾害多发的地区，近年来基本上都有台风、暴雨、洪涝、雷击、高温等灾害性天气发生。为了减少这些灾害性天气对社会及公众经济财产的损失和人员的伤亡，我们气象部门因此提前做好预报服务以及提升预报的精确率显得非常重要。近年来，气象部门加大了气象人才的培养和气象技术的研发，通过精细化预报技术的创新发展和气象“大数据”的综合运用，已经初步建立了十五天无缝隙精细化格点监测预报产品体系。通过这个体系，可以为社会公众提供十五天的精度可以达到1公里且每10分钟就能更新一次的精细化预报服务。

气象数据对广大公众来说是深奥和抽象的，如果更直观、更简单的形式让公众接受，那便是将气象数据图形化展示了。Highcharts图表控件是目前应用最为广泛的图表控件，能将气象数据直观地展示出来。

一、Highcharts图表控件简介

Highcharts是一个非常流行，界面美观的纯Javascript图表库。Highcharts可以为您的网站或Web应用程序提供直观，良好的动态交互图表。

1.主要特性

兼容性好：HighCharts采用纯JavaScript编写，兼容主流的浏览器；

支持大部分的图表类型：直线图，曲线图、区域曲线图、柱状图、饼状图、散布图等；

不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户及非商业应用免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。

提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。

2.主要属性

title，标题设置； subtitle，设置图表副标题

xAxis，设置图表横轴内容

yAxis，设置图表纵轴内容

tooltip，数据点提示框，当鼠标滑过某点时，以框的形式提示改点的数据，比如该点的值，数据单位等

legend，图例，用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列

series，数据列，图表上一个或多个数据系列，比如图表中的一条曲线，一个柱形

二、精细化预报显示平台开发设计

1.平台的架构

由于平台主要是对实时数据的变化趋势的显示，因此可以设计成常用的三层模式：显示层、逻辑层、数据层。如下图所示：

显示层就是将气象数据以网页的图形化方式直观展示，这层主要是前台代码由ASP.Net、JS、CSS等文件构成，通过常用的浏览器来运行，就能直观地看到气象数据动态变化曲线图。 逻辑层中将获取的数据层数据进行数据逻辑变换，转换为前台所需要的数据格式，也就是对数据进行格式化处理。 数据层则显示层提供数据，可以是数据库数据或是中间数据格式，如XML，JSON等，对于一个实时显示平台，数据层显得十分重要，要保证数据的及时性及安全性。

2.开发步骤

2.1引用JS文件

使用jQuery作为基本框架，需要在页面头部同时引用jQuery和Hightcharts两个文件。

2.2加載ashx传递数据

ashx是用于写web handler的，一般用来处理生成动态数据等不需要回传处理的任务。通过编写ashx代码，并其返回JSON数据格式。

2.3前台载入数据

2.4加载曲线数据

要在图表中显示降水、温度、风向、风速等多种气象要素，主要通过设置series，是一个数组结构。

2.5在页面中添加一个DIV元素，作为放置Highcharts图表的容器。需要为其设置ID值。

。

3.效果展示

将代码部署到服务端后，通过IE访问后，效果如图2所示（图2为运行后的曲线图）。

三、结语

通过Hightcharts实现的气象预报精细化的动态显示图已用于苍南气象网，用于展示苍南各乡镇的逐三小时的精细化预报。Hightcharts具体应用简单，部署方便等优点，应用Hightcharts，还可以开发出天气实况、气候变化的动态过程。

参考文献

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

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