# Highcharts配置
> 只需要引用兩個 JS 文件即可運行
Highcharts 的運行需要兩個 JS 文件, `highcharts.js` 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一個。
引入 JS 文件可以是引入本地文件和在線文件,針對不同的 JS 框架需要引入的文件有所不同,下面詳細說明。
### 一、引入在線資源
#### 1、jQuery
jQuery 是目前使用最廣泛的 JS 框架,無特殊說明,本教程所用的環境及所有例子都是基于 jQuery 的。
```
<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 Standalone Framework
jQuery 目前用的最廣泛,但是其體積過大(100K 以上),在移動端網絡帶寬有限的情況下,并不是最優選擇,如果你的頁面沒有其他地方需要用到 jQuery,jQuery 僅僅用于 highcharts,這種情況可以考慮使用 `Highcharts Standalone Framework` ,Highcharts Standalone Framework 壓縮后的大小只有 `2k` 哦。
```
<script src="http://cdn.hcharts.cn/highcharts/adapters/standalone-framework.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js" ></script>
```
關于使用 Highcharts Standalone Framework 的實例及注意事項見:[http://highcharts.me/article/19](http://highcharts.me/article/19)
#### 3、MooTool 或 Prototype
使用 MooTools 或 Prototype 需要額外的引入 Highcharts 提供的適配器。 使用 MooTools 需要引入的文件如下:
```
<script src="http://cdn.hcharts.cn/mootools/MooTools-Core-1.5.1.js"></script>
<script src="http://code.highcharts.com/adapters/mootools-adapter.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
```
使用 Prototype 需要引入的文件如下:
```
<script src="http://cdn.hcharts.cn/prototype/prototype-1.7.2.js"></script>
<script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
```
### 二、引入本地文件
上節說到 Highcharts 所有 JS 文件都可以通過下載獲得,如果你不想引入在線資源,可以直接引入本地文件。
本地引入文件同在線引入,這里拿 jQuery 來舉例說明
```
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
```
### 三、高級功能
Highcharts 提供了圖表導出、圖表主題等其他額外功能,這些功能的實現,需要額外引入相關 JS 文件。
#### 1、圖表導出功能
導出功能是將圖表導出下載為常見圖片文件或 PDF 文檔的功能,想要使用這個功能,額外引入 `exporting.js` 即可
```
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js" type="text/javascript"></script>
```

#### 2、圖表主題
Highcharts 提供圖表更換主題功能,引入想應的主題 JS 文件即可改變圖表樣式。除默認主題樣式外,Highcharts 官方提供多款主圖,你也可以根據需要自己設計圖表主題。
Highcharts 提供的主題文件放置在 `/js/themes/` 目錄下,給圖表添加灰色(Gray)主題的代碼是:
```
<script src="http://cdn.hcharts.cn/highcharts/themes/gray.js" type="text/javascript"></script>
```
* * *
(正文完,最后更新時間:2015-12-04 12:08:04)
- Highcharts中文教程
- Highcharts入門(100%)
- Highcharts簡介
- Highcharts下載與使用
- Highcharts配置
- Hello World程序
- Highcharts兼容性
- Highcharts使用許可
- Highcharts基礎教程(67%)
- Highcharts主要組成
- 圖表配置(Chart)
- 標題(Title)
- 坐標軸(Axis)
- 數據列(Series)
- 顏色(colors)
- 數據提示框(Tooltip)
- 圖例(Legend)
- 版權信息(credits)
- HTML標簽(labels)
- 標示線(plotLines)
- 標示區(plotBands)
- 圖表縮放(Zoom)
- 語言文字(lang)
- 標簽及字符串格式化(Format)