Highcharts配置

1、基礎使用

<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、功能模塊的使用

　　功能模塊是在 Highcharts 主要功能的基礎作的擴展，是由官方發佈的功能包，經常使用功能模塊有：

• • 更多圖表類型擴展模塊（highcharts-more.js）
  • 3D 圖表模塊 （highcharts-3d.js）
  • 導出功能模塊（modules/exporting.js）
  • 金字塔圖表類型（modules/funnel.js）
  • 鑽取功能模塊（modules/drilldown.js）
  • 數據加載功能模塊（modules/data.js）

　　更多模塊能夠在下載的資源包的 modules 目錄找到。

　　使用方法：

　　<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

3、產品間的混合模式使用

　　一、三款產品簡介：

• • Highcharts 基礎圖表
  • Highstock 股票及大數據量時間軸圖表
  • Highmaps 地圖

　　二、產品間的關係：

　　　　Highstock 是徹底包含 Highcharts 的，是在 Highcharts 的基礎上增長了更多高級功能；

　　　　Highmaps 則徹底獨立，不過官方提供了地圖功能模塊 map.js （在 Highmaps 資源包的 modules 目錄）供 Highcharts 或 Highstock 調用。

　　三、混合使用方法：

• • Highcharts + Highstock 時只須要引入 highstock.js
  • Highcharts + Highmaps 混合使用是須要 引入 highcharts.js + map.js
  • Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用時需引入 highstock.js + map.js

　　　　注意： Highstock 是徹底包含 Highcharts 的，若是在同一個頁面重複引用的話就會報 #16 號錯誤。

4、主題

　　官方提供圖表更換主題功能，引入想應用的主題 JS 文件便可改變圖表樣式。除默認主題樣式外，還提供了多款主題，另外也能夠根據須要本身設計圖表主題。

　　主題文件放置在資源包的 theme 目錄下，能夠按需引用。

　　相關示例：

　　給圖表加上灰色（Gray）主題時須要引用的文件以下：

　　<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script>