Highcharts在动态数据监测系统中的开发与应用

摘要：为解决传统数据监测系统中数据不直观的问题，提出将开源的Web图表组件Highcharts应用到原有的系统中来，快速实现数据以图表呈现，且有相应的数据交互。分析了Highcharts的基本组成及应用过程，重点研究了其获取外部动态数据的呈现过程，给出了一个快速开发到原数据监测系统中的方法，并将其应用在一个温湿度环境监测系统中，实现了用户不仅很直观地看出数据的变化，也可以动态地查看每个时间节点温湿度的数据值。结果表明，用户对监控的感知体验较好，可提高生产的水平和效率。

关键词：环境监测；图表；Highcharts；数据交互

中图分类号：TP311文献标志码：A文章编号：1008-1739（2018）16-69-3

Development and Application of Highcharts in the Dynamic Data Monitoring System

ZHAO Jianxun

（Information Center， Xi爷an University， Xi爷an Shaanxi 710068， China）

0引言

随着信息技术对社会生产力的不断推进，特别是大数据和云计算技术的发展，人类生产的决策越来越依赖于生产目标的数据，因此，准确且直观的数据监测技术具有非常重大的现实意义。环境数据是一种基于时间序列的数据，它是各环境要素在一段时间内动态记录的数据集合，随着时间的推移，这些数据量将变得繁杂[1]。传统的数据监测系统的结果主要以报表的形式呈现，这种形式很难为管理员提供直观的数据变化过程，当数据量非常大时，无序的报表会让管理员对生产过程失去控制。

为了能把握生产过程，对各要素数据进行直观清晰的了解，需要选择一种基于Web、可动态交互的图表组件来完成对数据监测系统的开发和应用。由于Highcharts组件的兼容性、性能和交互性在同类组件中处于领先地位，因此本文用Highcharts来实现对数据监测系统数据呈现部分的开发[2]。

1 Highcharts

Highcharts是用JavaScript语言写的一个HTML5图表库，能很简捷地在Web网站或Web应用程序添加有互动性的图表，个人和非商业用途可以免费使用其开放性源码。Highcharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表[2]。

Highcharts纯粹使用Web客户端脚本语言的特性，使其不仅支持静态页面开发，也支持ASP、JSP及PHP等动态Web的开发。Highcharts一开始就遵循HTML5的开发标准，使其支持IE6以上、Firefox及Chrome等多种浏览器，也支持iOS和Android等多平台应用。服务器端不需要其他插件或服务端支持，仅仅引用2个JavaScript的文件就可以开始相关开发。Highcharts的数据可以是JavaScript数组、JSON文件及表格等多种形式，结合Ajax技术，可以实现数据图表的动态更新。

Highcharts图表显示由多种要素组成，其中最常用的基本要素有标题、坐标轴、数据列、数据提示框及图例等部分，依据这些要素会将散列的数据在浏览器上以曲线、折线、梯形图及饼图等多种样式动态呈现。

2 Highcharts的应用过程

在Web页面上实现Highcharts图表功能，主要需要2步：第一步引入各类Highcharts的JS源码文件，其中最基础的文件是“highcharts.js”文件；第二步对Highcharts圖表各个要素的值的初始化。

2.1 JS源码引入

Highcharts的JS源码文件是整个应用的基础，在HTML页面可以本地或在线方式引入，以下分别是本地和在线方式引用highcharts.js文件：

2.2要素初始化

①在HTML页面的body部分为创建一个定义显示图表大小的容器div，如下：

<？php while （$row = mysql_fetch_array（$result）） {//PHP里用SQL引擎

$data[] = $row[value]； } ？>//获得数据生成字符串

var chart = new Highcharts.Chart（{

series： [{ data： [<？php echo join（$data， ，） ？>]--，//将所有字符串输出到数据列中

3.2从外部文件的读取

外部数据（如CSV、HTML表格及Google在线表）是可以用Highcharts的内置数据处理模块直接处理，该模块会对以上3种格式解析生成虚拟的表格，并且默认将该表第一行的数据解析成图例，列数据解析成轴的值和数据列的值，开发者也可根据行和列进行自行编程并输出到图表上[4]。

4 Highcharts在温湿度监测的动态数据刷新

温湿度数据的监测是环境监测系统的重要组成部分，本文用Highcharts的内置数据处理模块实现原监测系统中温湿度数据的图表展示。在原监测系统中[5]，上位机程序对下位机中变化的温湿度数据已经写入到数据库中，首先实现Web服务器端用ASP语言连接ACCESS数据库[6]，其次生成查询后的HTML表格，最后使用数据模块转换成为曲线图表展示，具体步骤如下：

（1）先用ASP语言实现数据库的连接与查询

<%Setconn=Server.CreateObject（"ADODB. Connection"）

conn.Open "* ＼1.mdb"

sql = "select * from com order by id ASC" ---%>

（2）引入Highcharts各个组件

//基础组件

//数据处理模块

（3）在HTML页面先指定Highcharts图表容器container

（4）HTML页面生成查询所得表格

（5）指定Highcharts数据模块中的数据来源位datatable，并对表数据其他项进行配置：

$（function （） {

$（#container）.highcharts（{

data： { table： datatable }，---

对数据库进行连接后以图表页面显示，如图1所示，不僅显示了某个时刻的温湿度具体数值，也体现了整体数据的变动趋势。

5结束语

研究并总结软件生命周期中影响软件可靠性的因素，即软件开发过程中软件产品度量和软件开发过程度量的度量指标，可靠性度量参数均从不同角度进行软件可靠性度量，参数之间并不是孤立的，且参数之间彼此都有一定的关系，有很多参数是进行软件可靠性评估或建立软件可靠性模型的必要参数，研究和收集可靠性度量参数对于提高软件质量和软件可靠性有重要意义。

参考文献

[1]曾宇，宋永端，王弼堃.基于Proteus和Keil软件的温室环境监测系统开发[J].农业工程学报，2012，28（14）：177-183.

[2] HighCharts.[EB/OL].（2017-10-8）.https：//www.highcharts.com.

[3]吴孟春，丁岚.HighCharts组件在气象业务中的开发和应用[J].计算机与网络，2014，40（12）：65-68.

[4] Highcharts.[EB/OL].（2017-10-7）.https：//www.hcharts. cn/demo/highcharts.

[5]赵建勋.Proteus下SHT11数据监测系统的研究与设计[J].电子设计工程，2016，24（7）：58-62.

[6]李峻屹.ASP与ASP.NET技术的比对测试与分析[J].宝鸡文理学院学报（自然科学版），2013，33（1）：39-42.