Highcharts在实践教学场所预约登记系统中的应用

张福转+王伟

摘要：Highcharts是目前在web应用程序中使用最广泛的图表控件之一，结合系统统计模块的功能需求将其引用过来，较好地解决了系统数据统计表格不直观的缺陷。分析Highcharts特点以及属性配置方法，依据系统架构给出了关键技术及部分代码。最后对统计模块的运用作了总结。

关键词：Highcharts图表；ASP；jQuery；系统应用

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）10-0111-02

1 背景

基于B/S模式实践场所预约登记系统能够满足院校教员在教学场所空闲情况下预约申请完成实践教学，该系统使用方便、快捷，教学预约登统计及时准确，在我院教学实践保障中起到重要作用。而教学保障统计模块是该系统重要组成部分，由于实践教学场所复杂，预约授课教员多，使用各类统计表格形式存在很多缺点，需要将这些数据需要图表形式直观反映出来。本文重点介绍Highcharts图表库在实践场所预约登记系统统计模块中的应用和实现方法。

2 Highcharts简介

2.1什么是Highcharts

它是一个用纯javascipt编写的图表库，能够很简单便捷的在web网站或是web应用程序中添加交互性各式图表。由于使用纯javascript脚本编写，所以不需要像Flash和Java那样需要插件才可以运行，采用SVG（Scalable Vector Graphics）可缩放矢量图形技术开发，提高了渲染速度提升了用户体验。

2.2 Highcharts的特点

首先Highcharts不受编程语言约束：它可以在大多数的web程序中开发和使用，并且对个人用户而言，支持asp、php、java、.net等多种语言使用；其次Highcharts具有提示和图表缩放功能：由其生成的图表中可以设置在数据上显示提示效果。还可以在大数量数据显示时放大某部分图形，有了图表的缩放，用户能够更方便查看图表数据；再次Highcharts支持外部数据加载和数据动态性：支持多种数据形式，可以是javascript数组，json文件，json对象和表格数据等，数据的来源可以是本地，不同系统页面甚至是不同网站。结合Jquery，Prototype等javascript框架提供的Ajax接口，可以实时地从服务器取得数据并实时刷新图表。

3 Highcharts在实践场所预约登记系统中应用

3.1 系统结构和文件代码

实践教学场所预约登记系统是基于Browser/Server模式设计，后台服务器文件采用asp语言开发，服务器数据库为Access。数据统计模块是该系统重要模块之一，在模块中嵌入了Highcharts图表库，能够方便直观地查看各类实践场所使用量。数据库统计模块表名为“tongji”，如表1所示：

后台服务器统计数据文件json.asp 文件放在系统根目录下。运行该文件时能够自动读取数据库统计表“tongji”产生json数据，以备Highcharts图表加载。由于Highcharts采用utf-8标准编写，为避免发生错误冲突，在json.asp中使用CODEPAGE="65001"。部分代码如下：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

…

<% dim a

a=true

response.write "["

sqltext="select * from tongji"

setrs=conn.execute（sqltext）

do while not rs.eof

if a=true then

response.write"["""&rs（"changsuo"）&"""，"&rs（"xueshi"）&"]"

else response.write"，["""&rs（"changsuo"）&"""，"&rs（"xueshi"）&"]"

end if

a=false

rs.movenext

loop

response.write "]"

%>

3.2 Highcharts应用方法

首先在网站http：//www.highcharts.com/免费下载Highcharts，解压后Highcharts图表库下包括example、gfx、js、graphics、exporting-server五个文件夹。该系统统计模块使用jQuery作为基本框架处理javascript任务，可将jquery、Highcharts库文件夹都放在系统根目录下，在使用Highcharts前，需要在页面头部引用这些脚本文件，Highcharts图表代码可放在head或body中。依据设置的属性先生成一个名为chart、类型为clumn-rotated-labels图表，并把图表渲染到div层id为“container”中。使用jQuery库的getJSON（）方法加载系统内json.asp文件，把json数据赋值给Highchart图表chart。统计功能文件代码如下：

4运行演示

系统成功运行统计模块后的实践教学场所保障统计column-rotated-labels表2如下：

5结束语

本文利用Highcharts图表库结合jQuery技术在系统中创建了直观的数据统计图，能够方便教学保障人员及机关领导浏览查看统计数据，对实践场所教学保障和建设有具指导意义。这里只是简单表述了Highcharts加载外部json数据生成图表，功能简单还不够完善，后期可以进行更改和添加日期控件，进行多条件复合查询，满足任何不同用户的多种需求。随着Highchart本身技术的发展，相信读者通过不断深入研究，一定能够创造出更加实用精美的图表。

参考文献：

[1] Highcharts Demo[EB/OL].http：//www.highcharts.com/.

[2] 张固，汪晓平.ASP网络应用系统典型模块开发实例解析[M].北京：人民邮电出版社，2004.

[3] 比伯奥特，卡茨. jQuery实战[M]. 陈宁，译.北京： 人民邮电出版社，2009.