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你了解多少】
