Highcharts 配置選項詳細說明

Highcharts 提供大量的設定選項參數，您可以輕鬆自訂符合使用者要求的圖表，本章節為大家詳細介紹Highcharts 設定選項使用說明：

##參數配置(屬性+事件)

chart.events.addSeries：將數列新增到圖表中。
chart.events.click：整個圖表的繪圖區上所發生的點擊事件。
chart.events.load：圖表載入事件。
chart.events.redraw：圖表重畫事件，當點擊圖註顯示和隱藏繪圖時可以觸發。
chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操作時，可以觸發該事件。
chart.height：所繪製圖表的高度值。
chart.inverted：圖表中的x，y軸對換。
chart.polar：是否為極性圖表。
chart.reflow：當視窗大小改變時，圖表寬度自適應視窗大小會改變。
chart.renderTo：圖表載入的位置，是頁面上的一個DOM物件。
chart.showAxes：在空白圖表中，是否顯示座標軸。
chart.type：圖表的類型，預設為line，還有bar/column/pie…
chart.width：圖表繪圖區的寬度，預設為自適應。
chart.zoomType：圖表中資料報表的放大類型，可以以X軸放大，或是以Y軸放大，也可以以XY軸同時放大。
colors：圖表中多數列時，各數列之間的顏色。是一個數組，一般不動。
credits.enabled：是否允許顯示版權資訊。
credits.href：版權所有的連結。
credits.text：版權資訊顯示文字。
exporting.buttons.exportButton.enabled：是否允許顯示匯出按鈕。
exporting.buttons.exportButton.menuItems：匯出按鈕的選單選項。
exporting.buttons.exportButton.onclick：匯出按鈕被點擊的事件，不是內部的選單。
exporting.buttons.printButton.enabled：是否允許列印按鈕。
exporting.buttons.printButton.onclick：列印按鈕的點擊事件。
exporting.enabled：列印和匯出按鈕是否被允許。
exporting.filename：被匯出檔案的檔案名稱。
exporting.type：預設匯出圖片的檔案格式。
exporting.url：SVG圖表轉換並匯出的介面處理位址。
exporing.width：預設匯出圖片的寬度。
labels：標籤，可以載入到圖表的任何位置，裡面有items，style。
lang：語言參數配置，與匯出按鈕選單有關的配置，時間名稱的配置等。
legend.enabled：是否允許圖註。
navigation.buttonOptions.enabled：圖表中所有導覽中的按鈕是否可點選。
plotOptions.area.allowPointSelect：是否允許資料點的點擊。
plotOptions.area.color：繪圖的顏色。
plotOptions.area.dataLabels.enabled：是否允許資料標籤。
plotOptions.area.enableMouseTracking：是否允許資料圖表中，資料點的滑鼠追蹤氣泡顯示。
plotOptions.area.events.checkboxClick：資料圖表中圖註中複選框的點擊事件。
plotOptions.area.events.click：資料圖表中，資料點的點擊事件。
plotOptions.area.events.hide：資料圖表中，某一資料序列隱藏時的事件。
plotOptions.area.events.show：資料圖表中，某一資料序列顯示時的事件。
plotOptions.area.events.legendItemClick：資料圖表中，圖註中的項目被點擊時的事件，直接賦值false，則不可點選。
plotOptions.area.events.mouseOut：資料點的滑鼠移出事件。
plotOptions.area.events.mouseOver：資料點的滑鼠經過事件。
plotOptions.area.marker.enabled：圖表中繪圖中是否顯示點的標記符。
plotOptions.area.marker.states.hover.enabled：是否允許標記符號的滑鼠經過狀態。
plotOptions.area.marker.states.select.enabled：是否允許標記符的選擇狀態。
plotOptions.area.point.events.click：圖表中每一個單獨的點點擊事件。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
#plotOptions.area.point.events.remove：刪除圖表中的點時的事件。
plotOptions.area.point.events.select：圖表中點選擇事件。
plotOptions.area.point.events.unselect：圖表中點取消選擇時的事件。
plotOptions.area.point.events.update：圖表中資料發生更新時的事件。
plotOptions.area.visible：載入時，資料序列預設為顯示還是隱藏。
plotOptions.area.zIndex：在多序列的情況下，調整每個序列的層疊順序。
以上的point.events同樣也適用於其他面積類別圖表（arearange、areaspline、areasplinerange），其他的長條圖（bar、column）及所有圖表。
plotOptions.area.showInLegend：是否顯示在圖註中。
plotOptions.area.stacking：是以值堆疊，還是以百分比堆疊。
plotOptions.area.states.hover.enabled：滑鼠放上的狀態是否允許。
plotOptions.area.stickyTracking：滑鼠黏性追蹤資料點。
plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange類別同於plotOptions.area
#plotOptions.bar.groupPadding：對於長條圖分組，每個分組之間的間隔。
plotOptions.bar.grouping：是否將資料分組。
plotOptions.bar.minPointLength:：定義當point值為零時，點的最小長度為多少
plotOptions.bar.showInLegend：是否在圖註中顯示。
plotOptions.bar.stacking：是以值堆疊，還是以百分比堆疊（normal/percent）。
plotOptions.column，plotOptions.columnrange類別同於plotOptions.bar
plotOptions.line的相關設定類似於plotOptions.area配置。
plotOptions.pie.ignoreHiddenPoint：在餅狀圖中，某一個序列經過圖註點擊隱藏後，整個餅狀圖是重新以100%分配，還是只在原圖基礎上隱藏，呈現一個缺口。
plotOptions.pie.innerSize：繪製餅狀圖時，餅狀圖的圓心預留多大的空白。
plotOptions.pie.slicedOffset：與allowPointSelect結合使用，當點被點擊時，對應的扇區剝離，這個參數即配置離開的距離。
plotOptions.pie的其他常用設定參數類別同於plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相關設定類似於plotOptions.area設定。
series：是一個陣列。
series.data.color：某一個資料的顏色。
series.data.dataLabels：序列中某一個資料的資料標籤。
series.data.events類別同於plotOptions.area.point.events的相關配置。
series.data.marker類別同於plotOptions.area.marker的相關設定。
series.data.name：配置資料點的名稱。
series.data.sliced：配置在圓餅圖中，扇區的分離距離大小。
series.data.x：點的x值。
series.data.y：點的y值。
series.name：資料序列的名稱。
series.stack：堆疊的分組索引。
series.type：資料序列的展示類型。
series.xAxis，series.yAxis：當使用多座標軸時，指定某個數列對應哪個座標軸。
subtitle：配置圖表的子標題。
title：配置圖表的標題。
tooltip：設定圖表中資料的氣泡提示。
tooltip.valueDecimals：允許的小數點位數。
tooltip.percentageDecimals：允許百分比的小數點後位數。
xAxis，yAxis配置設定座標軸
#allowDecimals：座標軸上是否允許小數。
categories：是一個數組，座標軸的分類。
plotLines：繪製主線。
tickColor：刻度顏色。
tickInterval：刻度的步進值。
labels.rotation：刻度標籤旋轉度數

#Chart：圖表區選項

Chart圖表區選項用於設置圖表區相關屬性。

##圖表放置的容器，一般在html中放置一個DIV，取得DIV的id屬性值null#defaultSeriesType預設圖表類型line, spline, area, areaspline, column, bar , pie , scatter0width圖表寬度，預設根據圖表容器自適應寬度null#height圖表高度，預設根據圖表容器自適應高度nullmargin設定圖表與其他元素之間的間距，數組，如[0,0,0,0][null]plotBackgroundColor#主圖表區背景色，即X軸與Y軸圍成的區域的背景色nullplotBorderColor主圖表區邊框的顏色，即X軸與Y軸圍成的區域的邊框顏色nullplotBorderWidth主圖表區邊框的寬度0shadow是否設定陰影，需要設定背景色backgroundColor。 falsereflow是否自使用圖表區域高度和寬度，如果沒有設定width和height時，會自適應大小。 truezoomType拖曳滑鼠進行縮放，沿著x軸或y軸進行縮放，可以設定為：'x',' y','xy'''events#事件回調，支援addSeries方法，click方法，load方法，selection方法等的回調函數。

參數	描述	預設值
backgroundColor	設定圖表區背景色	#FFFFFF
borderWidth	設定圖表邊框寬度	0
borderRadius	設定圖表邊框圓角角度	5
#renderTo

Color：顏色選項

Color顏色選項用於設定圖表的顏色方案。

參數描述預設值##color

Highcharts已經預設提供了多種顏色方案，當要顯示的圖形多於顏色種類時，多出的圖形會自動從第一種顏色方案開始選取。自訂顏色方案的方法：

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Title：標題選項

Title標題選項用於設定圖表的標題相關屬性。


#用於展示圖表，折線/柱狀/餅狀等圖的顏色，數組形式。	array

##text#標題文字內容。 Chart titlealign水平對齊方式。 centerverticalAlign垂直對準方式。 topmargin標題與副標題之間或主圖表區間的間距。 15floating是否浮動，如果為true，則標題可以偏離主圖表區，可配合x,y屬性使用。 falsestyle設定CSS樣式。 {color: '#3E576F',

參數	描述	預設值





		fontSize: '16px'}

Subtitle：副標題選項

副標題提供的屬性選項與標題title大致相同，可參考上述標題選項，值得一提的是副標題的text選項預設為''，即空的，所以預設情況下副標題不顯示。

xAxis：X軸選項

X軸選項用於設定圖表X軸相關屬性。

參數描述預設值##categoriestitlelabelsmaxmingridLineColor#gridLineWidth#lineColor ##C0D0E0


設定X軸分類名稱，數組，例如：categories: ['Apples', 'Bananas', 'Oranges']	[]
X軸名稱，支援text、enabled、align、rotation、style等屬性
設定X軸各分類名稱的樣式style，格式formatter，角度rotation等。	array
X軸最大值(categories為空時)，如果為null，最大值會根據X軸資料自動匹配一個最大值。	null
X軸最小值(categories為空時)，如果為null，則最小值會根據X軸資料自動匹配一個最小值。	array
#網格（豎線）顏色	#C0C0C0
網格(豎線)寬度	1
基線顏色

######lineWidth######基線寬度#####0############

yAxis：Y軸選項

Y軸選項與上述xAxis選項基本一致，請參考上表中的參數設置，不再單獨列出。

Series：資料列選項

資料列選項用於設定圖表中要顯示的資料相關的屬性。

##data#顯示在圖表中的資料列，可以為數組或JSON格式的資料。如：data:[0, 5, 3, 5]，或''##name type

參數	描述	預設值
	data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
顯示資料列的名稱。	''
資料列類型，支援area, areaspline, bar, column, line, pie, scatter or spline	line

plotOptions：資料點選項

plotOptions用於設定圖表中的資料點相關屬性。 plotOptions根據各種圖表類型，其屬性設定略微有些差異，現將常用選項列出來。

參數##enabled是否在資料點上直接顯示資料falseallowPointSelect是否允許使用滑鼠選取資料點回呼函數，格式化資料顯示內容

描述

預設值

##false

formatter

formatter: function() {return this.y;}

Tooltip：資料點提示框

Tooltip用於設定當滑鼠滑向資料點時顯示的提示框資訊。

##enabled是否顯示提示框truebackgroundColor設定提示框的背景色rgba(255, 255, 255, .85)borderColor提示框邊框顏色，預設自動符合資料列的顏色autoborderRadius提示方塊圓角度5#shadow是否顯示提示方塊陰影truestyle設定提示框內容樣式，如字體顏色等color:'#333'formatter回呼函數，用於格式化輸出提示方塊的顯示內容。回傳的內容支援html標籤如：, , , , , 2

參數	描述	預設值

Legend：圖例選項

legend用於設定圖例相關屬性。

參數描述預設值##layout#alignbackgroundColorborderColorborderRadiusenabled floatingshadowstyle#更多詳細資訊請參考highcharts官網英文文件：http://api.highcharts .com/highcharts


#顯示形式，支援水平horizontal和垂直vertical	horizontal
對齊方式。	center
圖例背景色。	null
圖例邊框顏色。	#909090
圖示邊框角度	5
是否顯示圖例	true
是否可以浮動，配合x，y屬性。	false
是否顯示陰影	false
設定圖例內容樣式	''

← Highcharts 配置語法

Highcharts 曲線圖 →

提交