# Highcharts 配置選項詳細說明
Highcharts 提供大量的配置選項參數,您可以輕松定制符合用戶要求的圖表,本章節為大家詳細介紹Highcharts 配置選項使用說明:
## 參數配置(屬性+事件)
1. chart.events.addSeries:添加數列到圖表中。
2. chart.events.click:整個圖表的繪圖區上所發生的點擊事件。
3. chart.events.load:圖表加載事件。
4. chart.events.redraw:圖表重畫事件,當點擊圖注顯示和隱藏繪圖時可以觸發。
5. chart.events.selection:當圖表曲線可選擇放大時,當選擇圖表操作時,可以觸發該事件。
6. chart.height:所繪制圖表的高度值。
7. chart.inverted:圖表中的x,y軸對換。
8. chart.polar:是否為極性圖表。
9. chart.reflow:當窗口大小改變時,圖表寬度自適應窗口大小改變。
10. chart.renderTo:圖表加載的位置,是頁面上的一個DOM對象。
11. chart.showAxes:在空白圖表中,是否顯示坐標軸。
12. chart.type:圖表的類型,默認為line,還有bar/column/pie……
13. chart.width:圖表繪圖區的寬度,默認為自適應。
14. chart.zoomType:圖表中數據報表的放大類型,可以以X軸放大,或是以Y軸放大,還可以以XY軸同時放大。
15. colors:圖表中多數列時,各數列之間的顏色。是一個數組,一般不動。
16. credits.enabled:是否允許顯示版權信息。
17. credits.href:版權所有的鏈接。
18. credits.text:版權信息顯示文字。
19. exporting.buttons.exportButton.enabled:是否允許顯示導出按鈕。
20. exporting.buttons.exportButton.menuItems:導出按鈕的菜單選項。
21. exporting.buttons.exportButton.onclick:導出按鈕被點擊的事件,不是內部的菜單。
22. exporting.buttons.printButton.enabled:是否允許打印按鈕。
23. exporting.buttons.printButton.onclick:打印按鈕的點擊事件。
24. exporting.enabled:打印和導出按鈕是否被允許。
25. exporting.filename:被導出文件的文件名。
26. exporting.type:默認導出圖片的文件格式。
27. exporting.url:SVG圖表轉換并導出的接口處理地址。
28. exporing.width:默認導出圖片的寬度。
29. labels:標簽,可以加載到圖表的任何位置,里面有items,style。
30. lang:語言參數配置,與導出按鈕菜單有關的配置,時間名稱的配置等。
31. legend.enabled:是否允許圖注。
32. navigation.buttonOptions.enabled:圖表中所有導航中的按鈕是否可被點擊。
33. plotOptions.area.allowPointSelect:是否允許數據點的點擊。
34. plotOptions.area.color:繪圖的顏色。
35. plotOptions.area.dataLabels.enabled:是否允許數據標簽。
36. plotOptions.area.enableMouseTracking:是否允許數據圖表中,數據點的鼠標跟蹤氣泡顯示。
37. plotOptions.area.events.checkboxClick:數據圖表中圖注中復選框的點擊事件。
38. plotOptions.area.events.click:數據圖表中,數據點的點擊事件。
39. plotOptions.area.events.hide:數據圖表中,某一數據序列隱藏時的事件。
40. plotOptions.area.events.show:數據圖表中,某一數據序列顯示時的事件。
41. plotOptions.area.events.legendItemClick:數據圖表中,圖注中的項目被點擊時的事件,直接賦值false,則不可點擊。
42. plotOptions.area.events.mouseOut:數據點的鼠標移出事件。
43. plotOptions.area.events.mouseOver:數據點的鼠標經過事件。
44. plotOptions.area.marker.enabled:圖表中繪圖中是否顯示點的標記符。
45. plotOptions.area.marker.states.hover.enabled:是否允許標記符的鼠標經過狀態。
46. plotOptions.area.marker.states.select.enabled:是否允許標記符的選擇狀態。
47. plotOptions.area.point.events.click:圖表中每一個單獨的點點擊事件。
48. plotOptions.area.point.events.mouseOut
49. plotOptions.area.point.events..mouseOver
50. plotOptions.area.point.events.remove:刪除圖表中的點時的事件。
51. plotOptions.area.point.events.select:圖表中點選擇事件。
52. plotOptions.area.point.events.unselect:圖表中點取消選擇時的事件。
53. plotOptions.area.point.events.update:圖表中數據發生更新時的事件。
54. plotOptions.area.visible:加載時,數據序列默認是顯示還是隱藏。
55. plotOptions.area.zIndex:在多序列的情況下,調整每一個序列的層疊順序。
56. 以上的point.events同樣還適用于其他面積類圖表(arearange、areaspline、areasplinerange),其他的柱狀圖(bar、column)及所有圖表。
57. plotOptions.area.showInLegend:是否在圖注中顯示。
58. plotOptions.area.stacking:是以值堆疊,還是以百分比堆疊。
59. plotOptions.area.states.hover.enabled:鼠標放上的狀態是否允許。
60. plotOptions.area.stickyTracking:鼠標粘性跟蹤數據點。
61. plotOptions.arearange,plotOptions.areaspline,plotOptions.areasplinerange類同于plotOptions.area
62. plotOptions.bar.groupPadding:對于柱狀圖分組,每個分組之間的間隔。
63. plotOptions.bar.grouping:是否對數據進行分組。
64. plotOptions.bar.minPointLength::定義當point值為零時,點的最小長度為多少
65. plotOptions.bar.showInLegend:是否在圖注中顯示。
66. plotOptions.bar.stacking:是以值堆疊,還是以百分比堆疊(normal/percent)。
67. plotOptions.column,plotOptions.columnrange類同于plotOptions.bar
68. plotOptions.line的相關配置類似于plotOptions.area配置。
69. plotOptions.pie.ignoreHiddenPoint:在餅狀圖中,某一個序列經圖注點擊隱藏后,整個餅狀圖是重新以100%分配,還是只在原圖基礎上隱藏,呈現一個缺口。
70. plotOptions.pie.innerSize:繪制餅狀圖時,餅狀圖的圓心預留多大的空白。
71. plotOptions.pie.slicedOffset:與allowPointSelect結合使用,當點被點擊時,對應的扇區剝離,這個參數即配置離開的距離。
72. plotOptions.pie的其他常用配置參數類同于plotOptions.area,plotOptions.scatter,plotOptions.series,plotOptions.spline的相關配置類似于plotOptions.area配置。
73. series:是一個數組。
74. series.data.color:某一個數據的顏色。
75. series.data.dataLabels:序列中某一個數據的數據標簽。
76. series.data.events類同于plotOptions.area.point.events的相關配置。
77. series.data.marker類同于plotOptions.area.marker的相關配置。
78. series.data.name:配置數據點的名稱。
79. series.data.sliced:配置在餅圖中,扇區的分離距離大小。
80. series.data.x:點的x值。
81. series.data.y:點的y值。
82. series.name:數據序列的名稱。
83. series.stack:堆疊的分組索引。
84. series.type:數據序列的展示類型。
85. series.xAxis,series.yAxis:當使用多坐標軸時,指定某個數列對應哪個坐標軸。
86. subtitle:配置圖表的子標題。
87. title:配置圖表的標題。
88. tooltip:配置圖表中數據的氣泡提示。
89. tooltip.valueDecimals:允許的小數點位數。
90. tooltip.percentageDecimals:允許百分比的小數點后位數。
91. xAxis,yAxis配置設置坐標軸
92. allowDecimals:坐標軸上是否允許小數。
93. categories:是一個數組,坐標軸的分類。
94. plotLines:繪制主線。
95. tickColor:刻度顏色。
96. tickInterval:刻度的步進值。
97. labels.rotation:刻度標簽旋轉度數
## Chart:圖表區選項
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方法等的回調函數。 |
## Color:顏色選項
Color顏色選項用于設置圖表的顏色方案。
| 參數 | 描述 | 默認值 |
| --- | --- | --- |
| color | 用于展示圖表,折線/柱狀/餅狀等圖的顏色,數組形式。 | array |
Highcharts已經默認提供了多種顏色方案,當要顯示的圖形多于顏色種類時,多出的圖形會自動從第一種顏色方案開始選取。自定義顏色方案的方法:
```
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});
```
## Title:標題選項
Title標題選項用于設置圖表的標題相關屬性。
| 參數 | 描述 | 默認值 |
| --- | --- | --- |
| text | 標題文本內容。 | Chart title |
| align | 水平對齊方式。 | center |
| verticalAlign | 垂直對齊方式。 | top |
| margin | 標題與副標題之間或者主圖表區間的間距。 | 15 |
| floating | 是否浮動,如果為true,則標題可以偏離主圖表區,可配合x,y屬性使用。 | false |
| style | 設置CSS樣式。 | {color: '#3E576F',
fontSize: '16px'} |
## Subtitle:副標題選項
副標題提供的屬性選項與標題title大致相同,可參照上述標題選項,值得一提的是副標題的text選項默認為'',即空的,所以默認情況下副標題不顯示。
## xAxis:X軸選項
X軸選項用于設置圖表X軸相關屬性。
| 參數 | 描述 | 默認值 |
| --- | --- | --- |
| categories | 設置X軸分類名稱,數組,例如:categories: ['Apples', 'Bananas', 'Oranges'] | [] |
| title | X軸名稱,支持text、enabled、align、rotation、style等屬性 |
| labels | 設置X軸各分類名稱的樣式style,格式formatter,角度rotation等。 | array |
| max | X軸最大值(categories為空時),如果為null,則最大值會根據X軸數據自動匹配一個最大值。 | null |
| min | X軸最小值(categories為空時),如果為null,則最小值會根據X軸數據自動匹配一個最小值。 | array |
| gridLineColor | 網格(豎線)顏色 | #C0C0C0 |
| gridLineWidth | 網格(豎線)寬度 | 1 |
| lineColor | 基線顏色 | #C0D0E0 |
| lineWidth | 基線寬度 | 0 |
## yAxis:Y軸選項
Y軸選項與上述xAxis選項基本一致,請參照上表中的參數設置,不再單獨列出。
## 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 or spline | line |
## plotOptions:數據點選項
plotOptions用于設置圖表中的數據點相關屬性。plotOptions根據各種圖表類型,其屬性設置略微有些差異,現將常用選項列出來。
| 參數 | 描述 | 默認值 |
| --- | --- | --- |
| enabled | 是否在數據點上直接顯示數據 | false |
| allowPointSelect | 是否允許使用鼠標選中數據點 | false |
| formatter | 回調函數,格式化數據顯示內容 | formatter: function() {return this.y;} |
## Tooltip:數據點提示框
Tooltip用于設置當鼠標滑向數據點時顯示的提示框信息。
| 參數 | 描述 | 默認值 |
| --- | --- | --- |
| enabled | 是否顯示提示框 | true |
| backgroundColor | 設置提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框邊框顏色,默認自動匹配數據列的顏色 | auto |
| borderRadius | 提示框圓角度 | 5 |
| shadow | 是否顯示提示框陰影 | true |
| style | 設置提示框內容樣式,如字體顏色等 | color:'#333' |
| formatter | 回調函數,用于格式化輸出提示框的顯示內容。返回的內容支持html標簽如:<b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
## Legend:圖例選項
legend用于設置圖例相關屬性。
| 參數 | 描述 | 默認值 |
| --- | --- | --- |
| layout | 顯示形式,支持水平horizontal和垂直vertical | horizontal |
| align | 對齊方式。 | center |
| backgroundColor | 圖例背景色。 | null |
| borderColor | 圖例邊框顏色。 | #909090 |
| borderRadius | 圖例邊框角度 | 5 |
| enabled | 是否顯示圖例 | true |
| floating | 是否可以浮動,配合x,y屬性。 | false |
| shadow | 是否顯示陰影 | false |
| style | 設置圖例內容樣式 | '' |
更多詳細信息請參照highcharts官網英文文檔:[http://api.highcharts.com/highcharts](http://api.highcharts.com/highcharts)
- Highcharts 簡介
- Highcharts 環境配置
- Highcharts 配置語法
- Highcharts 配置選項詳細說明
- Highcharts 曲線圖
- Highcharts 基本曲線圖
- Highcharts 帶有數據標簽曲線圖表
- Highcharts 異步加載數據曲線圖表
- Highcharts 時間序列,可縮放的圖表
- Highcharts X 軸翻轉曲線圖
- Highcharts 帶標記曲線圖
- Highcharts 標示區曲線圖
- Highcharts 時間間隔圖表
- Highcharts 對數圖表
- Highcharts 區域圖
- Highcharts 基本區域圖
- Highcharts 使用負數區域圖
- Highcharts 堆疊區域圖
- Highcharts 百分比堆疊區域圖
- Highcharts 丟失值區域圖
- Highcharts 反轉x軸與y軸
- Highcharts 曲線區域圖
- Highcharts 區間區域圖
- Highcharts 使用區間和線的區域圖
- Highcharts 條形圖
- Highcharts 基本條形圖
- Highcharts 堆疊條形圖
- Highcharts 反向條形圖
- Highcharts 柱形圖
- Highcharts 基本柱形圖
- Highcharts 使用負值的反向柱形圖
- Highcharts 堆疊柱形圖
- Highcharts 堆疊組柱形圖
- Highcharts 使用百分比的堆疊柱形圖
- Highcharts 標簽旋轉柱形圖
- Highcharts 堆疊組柱形圖
- Highcharts 固定布局柱形圖
- Highcharts 使用 HTML 表格數據的柱形圖
- Highcharts 區間柱形圖
- Highcharts 餅圖
- Highcharts 基本餅圖
- Highcharts 顯示圖例餅圖
- Highcharts 圓環圖
- Highcharts 半圈圓環圖
- Highcharts 向下鉆取餅圖
- Highcharts 漸變餅圖
- Highcharts 單色餅圖
- Highcharts 散點圖
- Highcharts 氣泡圖
- Highcharts 動態圖
- Highcharts 組合圖
- Highcharts 柱形圖,線條圖,餅圖組合
- Highcharts 雙Y軸, 柱形圖,線條圖組合
- Highcharts 多Y軸組合
- Highcharts 散點圖上添加回歸線
- Highcharts 3D圖
- Highcharts 3D柱形圖
- Highcharts 帶空值(null)和0的3D柱形圖
- Highcharts 堆疊3D柱形圖
- Highcharts 3D餅圖
- Highcharts 3D圓環圖
- Highcharts 測量圖
- Highcharts 測量圖
- Highcharts 圓形進度條式測量圖
- Highcharts 時鐘
- Highcharts 雙軸車速表
- Highcharts 音量表(VU Meter)
- Highcharts 樹狀圖(Treemap)