基于Extjs与Highcharts的Web监测数据播放器设计与实现

李泽良

【摘 要】为了实现Web页面的快速开发，提升开发人员的工作效率。通过了解前台页面开发人员使用的编程语言，分析当前网络应用程序的开发现状，研究了Extjs框架和Highcharts图表库结合使用的方法，设计并实现了一种基于Web的监测数据播放器。实验证实了使用JavaScript框架与图表库能帮助开发人员快速创建Web图表页面，极大地减少了开发工作量。

【关键词】Highcharts Extjs 播放器

1 引言

随着网络技术的普及，桌面应用程序正逐步向网络应用程序转变，很多编写桌面应用程序的开发人员受之影响，也逐步向开发B/S架构的网络应用程序的方向发展。因为大部分开发人员没有美工基础，对Html语言也不太熟悉，需要编写大量的代码才能实现Web程序的页面与各种图表，而且页面也不太美观。但借助现有的JavaScript框架（如Extjs、EasyUI、Bootstrap等），开发人员只需要编写少量代码，就可以绘制出美观且风格统一的Web页面。本文提出了一种利用Highcharts图表库实现Web监测数据显示的方法，该方法可快速实现Web图表页面，大大提高了开发效率。

2 Extjs简介

Extjs可以用来开发RIA，即富客户端的AJAX应用，它是用JavaScript编写的，主要用于创建前端用户界面，是一个与后台技术无关的前端AJAX框架。因此，可以把Extjs用在.Net、Java、Php等各种开发语言开发的应用中。Extjs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，还是到数据解析上的异常处理，都可以算是一款不可多得的JavaScript客户端技术精品。

3 Highcharts介绍

Highcharts是一个用纯JavaScript编写的图表库，它能够很简单便捷地在Web网站或是Web应用程序添加有交互性的图表，并且可以免费供个人和非商业用途使用。Highcharts支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等20种，其中很多图表可以集成在同一个图形中形成混合图。

3.1 图表主要组成

一般情况下，Highcharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（DataLabels）等，具体如图1所示。

3.2 准备工作

Highcharts需要下載相应的插件，可以从Highcharts官网上下载，具体地址如下：http：//www.highcharts.com/download。

3.3 Highcharts配置

4 监测数据播放器的设计实现

4.1 播放器主要功能

监测数据播放器的主要功能包括：

（1）查询：可查询指定时间范围内的监测数据；

（2）播放：按照时间顺序，在播放器中连续显示监测数据；

（3）暂停：暂停播放；

（4）停止：停止播放监测数据；

（5）快进：加快监测数据的显示速度。

4.2 播放器主页面

使用Extjs的MVC模式，MVC（Model-View-Controller）即软件项目设计模式，M指的是模型（Model），V指的是视图（View），C指的是控制器（Controller），在View中创建播放器的主页面，代码如下：

4.3 监测数据的播放

监测数据的播放是通过定时刷新Highcharts图表实现的。启动播放时，设置一个定时器，每秒向后台请求监测数据，并刷新图表，以达到连续播放的效果，最终效果图如图2所示。通过停止定时器和修改定时器间隔实现停止及快进功能。

5 结束语

本文主要对Highcharts图表库进行基本介绍，并使用Extjs框架与Highcharts搭建播放器的Web页面，对于不是美工出身的JavaScript程序员，通过使用JavaScript框架与图表库能快速创建各种Web页面，既可以减轻工作量，又可以设计出非常美观的Web页面。

参考文献：

[1] 徐会生，何启伟，康爱媛. 深入浅出Ext JS[M]. 北京： 人民邮电出版社， 2009.

[2] 赵俊昌，祝红涛，吴越人. 精通JS脚本之ExtJS框架[M]. 北京： 化学工业出版社， 2011.

[3] 卫军，夏慧军，孟腊春. ExtJS Web应用程序开发指南[M]. 北京： 机械工业出版社， 2009.

[4] 顼宇峰. Highcharts网页图表制作实例详解[M]. 北京： 清华大学出版社， 2016.

[5] 比伯奥特，卡茨. jQuery实战[M]. 2版. 北京： 人民邮电出版社， 2012.

[6] 李刚. 疯狂Ajax讲义[M]. 北京： 电子工业出版社， 2013.

[7] 常倬林. Java Web从入门到精通[M]. 北京： 机械工业出版社， 2011.

[8] 弗兰纳根. JavaScript权威指南[M]. 北京： 机械工业出版社， 2012.

[9] Nicholas C Zakas. JavaScript高级程序设计[M]. 3版. 北京： 人民邮电出版社， 2012.

[10] 卡斯特罗，希斯洛普. HTML5与CSS3基础教程[M]. 北京： 人民邮电出版社， 2014.

[11] 邢太北，许瑞建. CSS+DIV网页布局技术详解[M]. 北京： 清华大学出版社， 2014.