一、HighCharts開發說明：
HighCharts開發實際上配置HighCharts每個部分，比如配置標題（title），副標題（subtitle）等，其中每個部分又有更細的參數配置，比如標題下有對齊方式（align），標題文字（text）等。下圖爲整個圖表的每個部分位置說明（請對照下面HighCharts整體結構）
二、HighCharts整體結構：
通過查看API文檔我們知道HighCharts結構如下：（API文檔在文章後面提供下載）
var chart = new Highcharts.Chart({
chart: {…} // 配置chart圖表區
colors: [{...}] // 配置主體顯示顏色（多個線條和柱體的顏色順序的）
credits: {…} // 配置右下角版權鏈接
exporting: {…} // 配置導出及打印
global: {…} // Highcharts.SetOptions方法調用
labels: {…} // HTML標籤，可以放置在繪圖的任何位置
lang: {…} // 語言對象屬性配置
legend: {…} // 配置圖例選項
loading: {…} // 配置圖表加載選項
navigation: {…} // 配置導出按鈕屬性
pane: {…} // 僅適用於極性圖表和角儀表
plotOptions: {…} // 配置數據點選項
series: [{...}] // 配置數據列選項
subtitle: {…} // 配置副標題
title: {…} // 配置標題
tooltip: {…} // 配置數據點提示框
xAxis: {…} // 配置x軸選項
yAxis: {…} // 配置y軸選項
})
上面紅色部分是圖標完整性及美觀必須自己配置的選項，其他選項無特殊需要默認就行，也就是不用配置，所以開發HighCharts是不是很簡單，只需要配置簡單的幾個選項就行，下面詳細講解每個選項的配置。
三、HighCharts每部分詳細配置：
1、chart ：圖表區選項
主要設置圖表的類型，圖表裝載容器名，背景，高度，寬度等圖表的整體屬性。
| 參數 | 描述 | 默認值 |
| backgroundColor | 設置圖表區背景色 | #FFFFFF |
| borderWidth | 設置圖表邊框寬度 | 0 |
| borderRadius | 設置圖表邊框圓角角度 | 5 |
| renderTo | 圖表放置的容器，一般在html中放置一個DIV，獲取DIV的id屬性值 | null |
| defaultSeriesType | 默認圖表類型line, spline, area, areaspline, column, bar, pie , scatter |
0 |
| width | 圖表寬度，默認根據圖表容器自適應寬度 | null |
| height | 圖表高度，默認根據圖表容器自適應高度 | null |
| margin | 設置圖表與其他元素之間的間距，數組，如[0,0,0,0] | [null] |
| plotBackgroundColor | 主圖表區背景色，即X軸與Y軸圍成的區域的背景色 | null |
| plotBorderColor | 主圖表區邊框的顏色，即X軸與Y軸圍成的區域的邊框顏色 | null |
| plotBorderWidth | 主圖表區邊框的寬度 | 0 |
| shadow | 是否設置陰影，需要設置背景色backgroundColor | false |
| reflow | 是否自使用圖表區域高度和寬度，如果沒有設置width和height時，會自適應大小 | true |
| zoomType | 拖動鼠標進行縮放，沿x軸或y軸進行縮放，可以設置爲：‘x’,'y’,'xy’ | ” |
| events | 事件回調，支持addSeries方法，click方法，load方法，selection方法等的回調函數 |
、
2、colors ：數據列顏色選項
主要是數據列顏色設置，比如多條線條中的每個線條顏色。
| 參數 | 描述 | 默認 |
| color | 用於展示圖表，折線/柱狀/餅狀等圖的顏色，數組形式。 |
一組html顏色代碼 |
| colors: [ '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ] |
說明：1、顏色代碼爲html標準，可通過DW等複製想要的代碼 2、默認是從第一個數據列起調用第一個顏色代碼，有多少個數 據列調用相應數量的顏色 3、當數據列大於默認顏色數量時，重複從第一個顏色看是調用 |
3、credits ：版權鏈接選項
| 參數 | 描述 | 默認值 |
| enabled | 是否顯示版權及鏈接，布爾型，默認爲顯示 | true |
| position | 位置。可用align調整對齊方式，x，y設置距離。 | position: {align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5 } |
| href | 鏈接地址。String型，默認是highCharts官網 | www.highcharts.com |
| style | 名片CSS模式 |
itemStyle : { cursor: ‘pointer’,color: ‘#909090′, fontSize: ’10px’ } |
| text | 顯示名字。 | highcharts.com |
4、exporting ：導出及打印選項
| 參數 | 描述 | 默認值 |
| buttons | 打印和導出按鈕設置。其中兩個按鈕中又有很多樣式等設置，如有需要可詳細查看API文檔 | 默認按鈕樣式 |
| enableImages | 在導出的圖片中添加logo水印。布爾型，默認是false | false |
| enabled | 是否顯示按鈕（也就是啓用打印導出功能），布爾型，默認顯示 | true |
| filename | 導出圖片文件名，String型 | chart |
| type | 導出圖片的格式，有jpg和png可選，String型 | jpg/png |
| url | 轉換圖片的服務器url，默認是用highcharts服務器 | http://export.highcharts.com |
| width | 圖片大小，數字型 | 800 |
5、global ：Highcharts.SetOptions方法調用
全局選項,並不適用於每一個圖表。這些選項,如lang選項,必須設置使用Highcharts.setOptions方法。一般用不到，詳情請查看API文檔。
6、labels ：HTML標籤（可放置在圖表的任意地方）
| 參數 | 描述 | 默認值 |
| items | 包含兩個選項html和style，分別代表html語句及樣式 | iteml :{
html : “”,
style { } |
| style | css樣式 |
style:{ color : ‘#3E576F’} |
7、lang ：語言配置選項，主要配置符號、導出時顯示的語句、時間顯示語言等。和上面的global參數有關，即調用Highcharts.SetOptions方法。下表列舉常用的選項注意：lang選項其實就是配置一些顯示語言，API中都有詳細說明。
| 參數 | 描述 | 默認值 |
| decimalPoint | 小數點 | . |
| downloadJPEG | 導出顯示的文字，下面還有downloadPDF等，都一樣 | Download JPEG image等 |
| months | 月份，字符串數組形式 |
['January' 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
| numericSymbols | 數值單位，比如1000爲1k | ['k', 'M', 'G', 'T', 'P', 'E'] |
8、legend ：圖例選項，即數據類標示。
| 參數 | 描述 | 默認值 |
| layout | 顯示形式，支持水平horizontal和垂直vertical | horizontal |
| align | 對齊方式 | center |
| backgroundColor | 背景顏色 | nulll |
| borderColor | 圖例邊框顏色 | #909090 |
| borderRadius | 圖例邊框角度 | 5 |
| enabled | 是否顯示圖例 | true |
| floating | 是否可以浮動，配合x，y屬性 | false |
| shadow | 是否顯示陰影 | false |
| style | 圖例樣式 | 詳見API文檔 |
9、loading: 圖表加載選項
| 參數 | 描述 | 默認值 |
| hideDuration | 淡出效果持續時間，以毫秒爲單位 | 100 |
| labelStyle | 標籤樣式，css形式 | 詳見API文檔 |
| showDuration | 淡入效果持續時間，以毫秒爲單位 | 100 |
| style | 圖表加載樣式 | 詳見API文檔 |
10、navigation ： 導出按鈕選項，配置導出按鈕及打印樣式等，詳見API文檔。
11、pane ：極性圖表和角儀表選項配置（這兩種表是在新版本2.0.1新增加的選項）
12、plotOptions ：數據點選項。分不同圖表類型配置不同，下面就常用的選項及spline選項列表如下
| 參數 | 描述 | 默認值 |
| enable | 是否在數據點上直接顯示數據 | false |
| allowPointSelect | 是否允許使用鼠標選中數據點 | false |
| formatter | 回調函數，格式化數據顯示內容 | formatter: function() { return this.y; } |
| marker | 對某個點標記，多種樣式可選 |
13、series ：數據列選項
| 參數 | 描述 | 默認值 |
| data | 顯示在圖表中的數據列，可以爲數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] |
‘’ |
| name | 數據列名稱 | ‘’ |
| type | 數據列類型，支持 area, areaspline, bar, column, line, pie, scatter、spline | line |
14、subtitle ： 副標題選項。和title配置一樣，在title中詳細講解
15、title ： 標題選項
| 參數 | 描述 | 默認值 |
| text | 標題文本內容 | Chart title |
| align | 水平對齊方式 | center |
| verticalAlign | 垂直對齊方式 | top |
| margin | 標題與副標題之間或者主圖表區間的間距 | 15 |
| floating | 是否浮動，如果爲true，則標題可以偏離主圖表區，可配合x,y屬性使用 | false |
| style | css樣式 |
{ color: ‘#3E576F’, |
| x | 按照水平對齊方式的距離 | 0 |
| y | 按照垂直對齊方式的距離 | 15 |
16、tooltip ：數據點提示框選項
| 參數 | 描述 | 默認值 |
| enable | 是否顯示提示框 | true |
| backgroundColor | 設置提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框邊框顏色，默認自動匹配數據列的 | auto |
| borderRadius | 提示框圓角度 | 5 |
| shadow | 設置提示框內容樣式，如字體顏色等 | color:’#333′ |
| formatter |
回調函數，用於格式化輸出提示框的顯示內容。 返回的內容支持html標籤如：<b>, <strong>,<br/> |
|
17、xAxis ：x軸選項
| 參數 | 描述 | 默認 |
| categories |
設置X軸分類名稱，數組，例如： categories: ['Apples', 'Bananas', 'Oranges'] |
[] |
| title |
X軸名稱，支持text、enabled、align、rotation、style等屬性
|
|
| labels |
設置X軸各分類名稱的樣式style，格式formatter，角度rotation等 |
|
| max |
X軸最大值(categories爲空時)，如果爲null， 則最大值會根據X軸數據自動匹配一個最大值
|
null |
| min |
X軸最小值(categories爲空時)，如果爲null， 則最小值會根據X軸數據自動匹配一個最小值
|
null |
| gridLineColor |
網格（豎線）顏色
|
#C0C0C0 |
| gridLineWidth |
網格(豎線)寬度 |
1 |
| lineColor |
基線顏色 |
#C0D0E0 |
| lineWidth |
基線寬度 |
0 |
18、yAxis ：y軸選項
和x軸配置相同或類似。
注意：1、以上所有參數如果沒特殊要求，及爲默認是，可不用再代碼中配置
2、API中還有更多的配置選項，可通過閱讀API瞭解詳細
3、紅色部分爲主要配置內容
四、實例說明HighCharts開發步驟
1、要求
1）繪製一個顯示本站2012/9/22日訪問統計，包括瀏覽量（pv），IP數的折線圖。
2）x軸按每小時統計，y軸顯示對應的數量
3）折線圖上x軸對應的點顯示數量，當鼠標經過改點時，用提示框形式顯相關信息
4）要有圖例顯示每條折現代表什麼數據信息
5）圖表右下角加上“我愛物聯網”字樣並鏈接到www.52wulian.org
6）要有主標題和副標題
7）要能實現圖表打印及導出常見格式的圖片功能
2、開發步驟
1）新建一個文件夾名爲“HighCharts”，並在該文件夾內新建一個名爲“js”的文件夾，將所需的“highcharts.js”和“exporting.js”拷貝至“js”文件夾。
2）在“HighCharts”文件夾裏新建一個html文件，隨意命名，用文本編輯器寫入如下內容：（html代碼，相信大家都看的懂)
3）配置chart中每個選項的屬性，代碼如下
4）本例演示地址：http://www.52wulian.org/test/HighCharts/HighCharts.html
5）本例源文件下載：http://pan.baidu.com/share/link?shareid=66439&uk=3087605183
本站統一解壓密碼：www.52wulian.org
HighCharts API文檔下載：
本站下載：http://pan.baidu.com/share/link?shareid=63516&uk=3087605183
本站統一解壓密碼：www.52wulian.org
官方在線API：http://api.highcharts.com/highcharts