Highcharts 配置選項詳細說明 · W3School Highcharts 教程

# 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標簽如：, , , , , | 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)