Highcharts官網地址：https://www.hcharts.cn/products/highcharts
首先需要引入jQuery框架，然后包含Highcharts框架需要使用到的js文件，最新版本5.0.7的js是在code目錄下，其中highcharts.js文件是必需的，其他文件根據需要使用的圖表需要引入，如果需要使用圖表的打印功能的話，需要引入modules/exporting.js文件。
基本使用方法：
在html頁面為某個容器元素（如：div）定義一個id，然后在渲染頁面的js中調用highcharts框架的方法：
Highcharts.chart(id, option);
其中id是頁面某個元素的id，即我們希望圖表在頁面上展示的位置，option則是圖表的一個配置對象變量，下面主要針對圖表的這個配置變量進行講解。
Highcharts.chart(id, {
chart: {//圖表配置
type: 'line', //圖表默認類型，默認：line(pie：餅圖，column，柱狀圖；line，折線圖，funnel：漏斗圖...)。
height: null, //圖表高度，默認：null，根據容器元素高度計算。
width: null, //圖表寬度，默認：null，根據容器元素寬度計算。
backgroundColor: '#FFFFFF', //圖表區背景顏色，默認：#FFFFFF。
borderColor: '#335cad', //圖表邊框顏色，默認：#335cad。
borderWidth: 0, //圖表邊框寬度，默認：0，需要設置圖表邊框顏色的話需要將其設置大於0。
borderRadius: 0, //圖表邊框的圓角半徑，默認：0。
margin: [0,0,0,0], //圖表外邊緣和繪圖區域之間的邊距，默認：[0,0,0,0](順序：上右下左)。
polar: false //默認：false。當設置為true時，直線圖、曲線圖、面積圖、柱狀圖等笛卡爾圖會轉成極地圖,
//例如，蜘蛛圖就需要將其設置為true。極地圖需要額外的引入highcharts-more.js才能使用。
},
title: {//標題配置
text: 'Chart title', //圖表標題文字，默認：Chart title。若不想顯示標題可設置為null。
align: 'center', //圖表標題水平對齊方式，默認：center，可選：left、center、right。
floating: false, //默認：false，如果設置為true，標題將不占用圖表區的位置。
style: { //標題樣式配置
color: '#000000',
fontWeight: 'bold',
fontSize: '20px'
}
},
exporting: {//導出配置
enabled:true //是否啟用導出模塊，默認：true。若想去除圖表右上角導出按鈕則設置為false。
},
credits: {//版權配置
enabled:true //是否顯示版權信息，默認：true。若想去除圖表右下角highcharts官網鏈接則設置為false。
text：'Highcharts.com', //版權信息顯示內容，默認：Highcharts.com。
href: '' //版權信息鏈接地址，默認：http://www.highcharts.com。
},
tooltip: {//數據提示框配置
enabled: true, //是否啟用數據提示框，默認：true。
shared: true, //數據提示框共享（一個x軸值對應有多個y軸值時，多個y軸值共享提示框）
backgroundColor: '', //數據提示框背景色，默認：rgba(247,247,247,0.85)。
borderColor: null, //數據提示框邊框顏色，默認：null，使用該數據列或該點的顏色。
borderWidth: 1, //數據提示框邊框寬度，默認：1。
borderRadius: 3, //數據提示框圓角半徑，默認：3。
pointFormat: '', //數據提示框中該點的html代碼。變量使用花括號括起來。
pointFormatter: function(){}, //回調函數，返回格式化提示框中該點的html代碼。
},
xAxis: {//x軸配置
max: null, //坐標軸最大值，當設置為null時，將會自動計算。
//當endOnTick參數值為true時，max值將會向上取整。
min: null, //坐標軸最小值，當設置為null時，將會自動計算。注意：對數軸最小值不能為0，否則會出錯。
//如果設置了startOnTick為true時，最小值可能會進行向下取整。
opposite: false, //是否將坐標軸顯示在對立面，默認：false。
//默認情況下x軸在圖表下方，y軸在左邊，設置為true后，x軸將在上方顯示，y軸在右邊顯示。
type: linear, //坐標軸類型，默認：linear。
//可選：linear(線性軸)、logarithmic(對數軸)、datetime(時間軸)、category(分類軸)
categories: null, //分類坐標軸中的分類，定義x軸刻度顯示內容，默認：null。
tickInterval: //間隔多少顯示刻度
tickmarkPlacement: 'on', //本參數只對分類軸有效。當值為on時刻度線將在分類上方顯示，當值為between時刻度線將
//在兩個分類中間顯示。當tickInterval為1時，默認是between，其他情況默認是on。
labels: {//坐標軸標簽配置
enabled: true, //是否顯示坐標刻度值，若不想顯示則設置為false。
rotation: -45, //x軸刻度標題旋轉一定角度
formatter: function(){}, //回調函數，返回在刻度位置顯示的格式化內容。
},
//十字准星線配置
crosshair: true, //若是柱狀圖直接配置true
crosshair : { //其他圖表類型需要配置樣式
width: 1,
color: 'gray',
dashStyle: 'Solid'
},
visible: true //是否顯示坐標軸，默認：true。包含坐標軸、坐標軸標題、坐標軸軸線、坐標軸標簽等。
},
yAxis: {//y軸配置
//配置參數和x軸相同...
},
scrollbar : {//滾動條配置
enabled:true //啟用滾動條
},
series: {//數據列配置
cursor: 'pointer', //鼠標在數據列上的形狀，默認是箭頭，可設置為pointer(手型)。
name: '', //數據列名稱，用於在legend(圖例)、tooltip(數據提示框)中顯示。
data: [{ //數據列數據配置，不同類型的圖表數據列配置有所差異，這里示例的是柱狀圖數據列配置。
x: 1,
y: 5,
name: '',
color: ''
}]
},
legend: {//圖例配置
enabled: true, //圖例開關，默認：true。
align: 'center', //圖例在圖表區中的水平對齊方式，默認：center。可選：left、center、right。
backgroundColor: '' //背景顏色
},
plotOptions: {
series: {
marker: {
enabled: true //是否顯示折線圖上的點（折線圖配置）
},
dataLabels: {
enabled: true, //是否在圖表上各個數據點顯示對應數據
color: '#a3a3a3',
formatter: function() { //格式化
return this.y;
}
}
},
column: {
colorByPoint: true //給柱狀圖每個點分配顏色（柱狀圖配置）
}
}
});
問題與方案：
如果數據提示框中需要顯示額外的信息，而且這個信息對於不同數據點是不同的，該怎么設置？？
可以在設置圖表數據的data中的每個數據點對象添加額外屬性，然后使用pointFormatter在回調函數中即可訪問到這個額外的屬性。
拿我做過的一個實例來說：
熱力圖表heatmap的data中每個數據點對象原本的格式為：{x:x軸位置, y:y軸位置, value:對應點的值}，我可以在里面加多一個
屬性來為每個數據點存放額外的信息，如：tip: 數據點提示語，那么在pointFormatter回調函數中即可使用this.point.tip來訪問這個屬性了。
特別注意：
1.要確保x軸值和對應y軸值的正確對應，永遠不要相信js的數組下標，js使用push方法添加數組元素之后數組中的元素並不是按push的先后順序來排序的。
2.x軸的min和max表示的是有滾動條的時候一屏顯示多少數據，y軸的min和max表示的才是最大最小值。
3.設置全局的scrollbar配置之后，只會在x軸開啟滾動條，若想在y軸啟用滾動條，需要在yAxis參數下添加配置：
scrollbar: {
enabled: true,
showFull: false
}
4. 大坑：一定要注意series中的data數組里面的元素都必須是數字類型，若是字符串則會一直得不到圖表顯示。。而且數組的下標一定要從0開始，否則也會無法顯示圖表。。。