Highchart一些平時不常用到的屬性墨叛，偶爾想用時，查看API文檔不易找到伶跷，耗費時間蚓炬，本文只是為了讓自己能夠快速找到這些屬性而記錄的筆記尼斧。持續(xù)更新...
1.當圖表沒有數據時，圖表中會顯示相應的文字說明试吁。該功能需要額外的引入 http://cdn.hcharts.cn/highcharts/modules/no-data-to-display.js （require('highcharts/modules/no-data-to-display.js')(Highcharts)）
Highcharts.setOptions({
lang: {
noData: '暫無數據'
}
})
暫無數據
2.圖表未繪制前顯示loading棺棵。當數據需要從后臺獲取時，可以控制在圖形上暫時顯示Loading（"Loading"文本可在lang對象中修改）
var chart = Highcharts.chart('container', option) // option為highchart自定義參數
chart.showLoading() // 加載選項控制著圖表覆蓋區(qū)域載入畫面的顯示效果
chart.hideLoading() // 隱藏效果
loading.png
3.Highchart默認在圖表的右下角放置版權信息的標簽熄捍。若想取消版權信息顯示：
credits: {
enabled: false
}
credits.jpg
4.使圖層半透明以避免遮擋后面的圖層（特別是圖表類型為area）
plotOptions: {
series: { // 針對所有圖表有效的通用配置烛恤，若只針對area，series可改為area
fillOpacity: 0.5 // 設置半透明
}
}
圖層半透明以避免遮擋后面的圖層
5.Highstock中的dataGrouping余耽，表示是否將指定數量的數據合并展現為一個點
plotOptions: {
series: { // 針對所有圖表有效的通用配置
dataGrouping: { // 針對highstock,將指定數量的數據合并展現為一個點
enabled: false
}
}
同樣的數據缚柏，‘合并多個數據為一個點’ VS ‘每個點的數據都展示出來’
合并多個數據為一個點
每個點的數據都展示出來
6.Highstock初始化x軸的時間顯示區(qū)域
xAxis: {
min: time - 30 * 60 * 1000, // time為某個時間的時間戳
max: time
}
初始化控制x軸的時間顯示區(qū)域
7.給圖表里的線添加點擊click事件
series: {
// ...
events: {
click () { // 除了click事件，還可添加mouseOut碟贾、mouseOver等事件
// 點擊圖表后的回調函數
}
},
data: [{
events: {
click () {
// 點擊該數據區(qū)域后的回調函數
}
}
}]
}
8.添加網格
xAxis: {
gridLineWidth: 1
}币喧，
yAxis: {
gridLineWidth: 1
}
gridLine.png
9.改變網格密集情況，即改變刻度顯示間距
yAxis: {
gridLineWidth: 1,
tickPixelInterval: 10 // 默認70
}
tickPixelInterval.png
10.給Y軸坐標的刻度添加單位
yAxis: {
labels: {
format: '{value}M'
}
}
改變y軸刻度文案
11.改變鼠標移動上去時顯示的內容袱耽，例如給數據添加%
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
}
自定義顯示文案
12.改變圖例顯示的內容(如上圖)
legend: {
labelFormatter: function () { // 顯示極值
return '<span style="min-width: 65px;display:inline-block; text-align: right;">' + this.name + ':</span> ' + series[this.index].desc
}
}
13.部分曲線默認隱藏: 設置series屬性下的visible
series: [{
data: [……]
}, {
data: [……]
}, {
data: [……],
visible: false
}]
highcharts部分曲線默認隱藏
14.js設置曲線顯示或隱藏(如上圖)
var chart = Highcharts.stockChart('container', {<!-- option -->})
chart.series[2].visible = this.isVisible
if (this.isVisible) {
chart.series[2].show()
} else {
chart.series[2].hide()
}
原文：
Highchart屬性筆記
