Highcharts簡介
Highcharts:功能強大、開源、美觀、圖表豐富、兼容絕大多數瀏覽器的純js圖表庫
Highcharts是一款純javascript編寫的圖表庫，能夠很簡單便捷的在Web網站或Web應用中添加交互性的圖表，Highcharts目前支持直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同類型的圖表，可以滿足你對Web圖表的任何需求 ！
由於其功能強大、簡單易用、開源免費等優點，Highcharts在國內外越來越受歡迎。下面詳細說明Highcharts的優勢
Highcharts優勢
兼容性
Highcharts支持目前所有的現代瀏覽器，包括IE6 +、iPhone/iPad、Android。Highcharts在標准（W3C標准）瀏覽器中使用SVG技術渲染圖形，在遺留的IE瀏覽器中使用VML技術來繪圖。
開源免費
針對個人用戶及非商業用途免費，並提供源代碼下載，你可以任意的修改它。商業用途需要購買許可，個人及非商業用途須遵循CC BY-NC 3.0協議
純Javascript
Highcharts完全基於本地瀏覽器技術，不需要任何插件（例如Flash、java），不需要安裝任何服務器環境或動態語言庫支持，只需要兩個js文件即可運行。
圖表類型豐富
Highcharts目前支持直線圖、曲線圖、面積圖、曲線面積圖、面積范圍圖、曲線面積范圍圖、柱狀圖、柱狀范圍圖、條形圖、餅圖、散點圖、箱線圖、氣泡圖、誤差線圖、漏斗圖、儀表圖、瀑布圖、雷達圖，共18種類型圖表，其中很多圖表可以集成在同一個圖形中形成綜合圖。
動態性
提供豐富的API接口，方便在創建圖表后對圖表的任意點、線和文字等進行增加、刪除和修改操作。支持眾多的Javascript事件，結合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口，可以實時地從服務器取得數據並實時刷新圖表。
多軸支持
對於需要比較的數據，Highcharts提供多軸支持。並且可以針對每個軸設置其位置、文字和樣式等屬性。
動態提示框
當鼠標懸停在圖表上的數據點時，Highcharts會顯示信息提示框，當然，顯示的內容和樣式可以自己指定和設置。
圖表導出和打印功能
你可以將Highcharts圖表導出為PNG、JPG、PDF和SVG格式文件或直接在網頁上打印出來。
圖表縮放
可以設置圖表的縮放，讓你更方便查看圖表數據。
支持外部數據加載
Highcharts支持多種數據形式，可以是Javascript數組、json文件、json對象和表格數據等，這些數據來源可以是本地、不同頁面，甚至是不同網站。
Highcharts下載與使用
下載即可運行，看例子代碼就可以入門
下載
- 中文網下載中心：http://www.hcharts.cn/product/download.php
- 官方下載：http://www.highcharts.com/download
- Github 開源項目：https://github.com/highslide-software/highcharts.com
- 中文網開放CDN ： http://cdn.hcharts.cn
- 官方 CDN 服務 ： http://code.highcharts.com
解壓下載得到的壓縮包，進入相應的目錄查看所有包含文件，Highcharts 提供的文件目錄如下圖所示：
目錄結構說明：
|-- examples 例子目錄
|-- exporting-server 導出服務器目錄
|-- gfx 圖片資源目錄
|-- graphics 圖片資源目錄
|-- js 所有 js 文件源碼代碼（帶 .src 的文件為未壓縮版源代碼）
|-- index.htm 例子入口文件 建議初學者從官方提供的例子代碼入手，Highcharts 提供的豐富例子可以讓你輕松入門。
使用方法：只需要引用兩個 JS 文件即可運行
Highcharts 的運行需要兩個 JS 文件， highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一個。
1：只需要引入下面2個文件就行。其他礦展看說明。
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>2：創建div容器
在頁面的 body 部分創建一個div，並指定div 的 id，高度和寬度，代碼如下
<div id="container" style="min-width:800px;height:400px"></div>
3、編寫Highcharts代碼
編寫Highcharts必須的代碼，用<script></script>包裹，代碼可以放在頁面的任意地方，一個最簡單的圖表實例代碼如下
$(function () {
$('#container').highcharts({ //圖表展示容器，與div的id保持一致
chart: {
type: 'column' //指定圖表的類型，默認是折線圖（line）
},
title: {
text: 'My first Highcharts chart' //指定圖表標題
},
xAxis: {
categories: ['my', 'first', 'chart'] //指定x軸分組
},
yAxis: {
title: {
text: 'something' //指定y軸的標題
}
},
series: [{ //指定數據列
name: 'Jane', //數據列名
data: [1, 0, 4] //數據
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
完成上述兩個步驟后，保存文件並用瀏覽器打開，運行結果如下圖所示
參考文檔：
http://www.hcharts.cn/docs/index.php?doc=start-helloworld
2016年4月22號 由於工作中用到了這個也曾在百度中需找這個功能，找了很多資料；為了幫助其他需要的人，寫了這篇文檔給那些需要的人！感謝您的支持
---賴忠標