绘图插件Highcharts浅析

【摘 要】Web的前端开发中，常常会对数据做出统计，进而要求绘制出相应的统计图以便查看数据的走向和趋势。本文通过对基于Jquery的绘图插件Highcharts的结构分析，完成了对Highcharts的简介、文件结构和配置以及高级功能的介绍。

【关键词】Highcharts；Jquery；前端开发

0 引言

在前端开发中，能完成图表的绘制功能的插件有很多，例如Cubism、RGraph、Cytoscape Web gvChart和Highcharts等。这些插件都是以Js为基础开发而成，其中，Highcharts是目前较为流行且功能强大的一款图表插件，几乎可以满足Web图表的任何需求。本文介绍了Highcharts插件的基本概念、文件结构、配置方法和高级功能。

1 Highcharts简介

1.1 Highcharts概念

Highcharts是一个用纯HTML5/JavaScript一个图表库，提供直观的，交互式的图表到你的网站或Web应用程序。 Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表。

1.2 Highcharts的兼容性

它适用于所有的主流浏览器，如：IE、Firefox、Chrome、Safari，甚至包括括iPhone/ iPad和android等移动设备上的浏览器。并且，在iOS和Android，多点触控支持提供无缝的用户体验。标准浏览器使用SVG的图形渲染。在较为老旧的Internet Explorer中的图形使用VML绘制。

1.3 免费用于非商业场景

对个人用户及非商业用途而言，Highcharts是免费的，并且开放源代码的下载。而商业用途的话，需要购买软件许可。

2 Highcharts文件结构

本文以Highcharts 3.0.9版本为例，介绍Highcharts的文件结构。

在官方网站（http：///）下载得到Hightcharts的压缩包以后解压会得到5个文件夹（example，exporting-server，gfx，graphic和js）和一个index.htm的实例入口页面。这5个文件夹的作用分别是：

example：例子代码目录

exporting-server：导出服务器目录

gfx、graphics：示例代码所需要的图片文件

js：所有的js文件

3 Hightcharts配置

Highcharts运行需要两个js文件，Highcharts.js及jQuery、MooTools、Prototype、Highcharts Standalone Framework 中的一个框架文件。

在html文件引入js文件有在线引入和本地引入两种方式，针对不同的js框架需要引入的js文件不同。

3.1 在线引入js文件

jQuery是目前使用最多的js框架，Highcharts就是基于jQuery的一款绘图插件。

如果页面只有highcharts用到jquery功能（也就是jQuery没有进行其他的dom操作），可以考虑使用Highcharts Standalone Framework。Highcharts Standalone Framework 压缩后只有 2k，相对jQuery 100多k的体积，Highcharts Standalone Framework无疑会减少很多网络带宽。

3.2 引入本地js文件

Highcharts所有js文件都可以通过下载获得，在实际项目中，更多的是引入本地文件。

3.3 高级功能

Highcharts提供图表导出、更换图表主题等功能，要实现这些功能需要额外引入js文件

Highcharts提供将图表导出（或下载）为常见图片文件及打印图表功能。想要使用该功能，只需要引入exporting.js即可。

Highcharts提供图表更换主题功能，只需要引入主题js文件即可更换主题。除默认主题样式外，Highcharts官方提供5款可选主题，当然你也可以设计自己的图表主题。

4 结束语

本文在对基于Jquery的Highcharts绘图插件的基本情况进行了一个较为全面的介绍，由于该插件的资料几乎都以英文为主，本文把该插件的概念、安装和高级功能进行梳理，希望对其他程序员有所启发。

【参考文献】

[1]Highcharts http：///，2014，4，20[OL].

[2]麦冬，岑贤生，孔令文.开源图形库Highcharts与jQuery的整合应用[J].轻工科技，2013（3）.

[4]李鸣亚，邹晓峰.浅谈插件化软件开发[J].广西轻工业，2009（8）.