Web的前端开发中，常常会对数据做出统计，进而要求绘制出相应的统计图以便查看数据的走向和趋势 。本文通过对基于Jquery的绘图插件Highcharts的结构分析，完成了对Highcharts的简介、文件结构和配置以及高级功能的介绍 。
在前端开发中，能完成图表的绘制功能的插件有很多，例如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：//www.highcharts.com/）下载得到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绘图插件的基本情况进行了一个较为全面的介绍，由于该插件的资料几乎都以英文为主，本文把该插件的概念、安装和高级功能进行梳理，希望对其他程序员有所启发 。
【绘图插件Highcharts你了解多少】
