天天看點

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圖表區選項用于設定圖表區相關屬性。

參數

描述

預設值

backgroundColor

設定圖表區背景色

#FFFFFF

borderWidth

設定圖表邊框寬度

borderRadius

設定圖表邊框圓角角度

5

renderTo

圖表放置的容器,一般在html中放置一個DIV,擷取DIV的id屬性值

null

defaultSeriesType

預設圖表類型line, spline, area, areaspline, column, bar, pie , scatter

width

圖表寬度,預設根據圖表容器自适應寬度

height

圖表高度,預設根據圖表容器自适應高度

margin

設定圖表與其他元素之間的間距,數組,如[0,0,0,0]

[null]

plotBackgroundColor

主圖表區背景色,即X軸與Y軸圍成的區域的背景色

plotBorderColor

主圖表區邊框的顔色,即X軸與Y軸圍成的區域的邊框顔色

plotBorderWidth

主圖表區邊框的寬度

shadow

是否設定陰影,需要設定背景色backgroundColor。

false

reflow

是否自使用圖表區域高度和寬度,如果沒有設定width和height時,會自适應大小。

true

zoomType

拖動滑鼠進行縮放,沿x軸或y軸進行縮放,可以設定為:'x','y','xy'

''

events

事件回調,支援addSeries方法,click方法,load方法,selection方法等的回調函數。

Color顔色選項用于設定圖表的顔色方案。

color

用于展示圖表,折線/柱狀/餅狀等圖的顔色,數組形式。

array

Highcharts已經預設提供了多種顔色方案,當要顯示的圖形多于顔色種類時,多出的圖形會自動從第一種顔色方案開始選取。自定義顔色方案的方法:

Title标題選項用于設定圖表的标題相關屬性。

text

标題文本内容。

Chart title

align

水準對齊方式。

center

verticalAlign

垂直對齊方式。

top

标題與副标題之間或者主圖表區間的間距。

15

floating

是否浮動,如果為true,則标題可以偏離主圖表區,可配合x,y屬性使用。

style

設定CSS樣式。

{color: '#3E576F',

fontSize: '16px'}

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

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

categories

設定X軸分類名稱,數組,例如:categories: ['Apples', 'Bananas', 'Oranges']

[]

title

X軸名稱,支援text、enabled、align、rotation、style等屬性

labels

設定X軸各分類名稱的樣式style,格式formatter,角度rotation等。

max

X軸最大值(categories為空時),如果為null,則最大值會根據X軸資料自動比對一個最大值。

min

X軸最小值(categories為空時),如果為null,則最小值會根據X軸資料自動比對一個最小值。

gridLineColor

網格(豎線)顔色

#C0C0C0

gridLineWidth

網格(豎線)寬度

1

lineColor

基線顔色

#C0D0E0

lineWidth

基線寬度

Y軸選項與上述xAxis選項基本一緻,請參照上表中的參數設定,不再單獨列出。

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

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根據各種圖表類型,其屬性設定略微有些差異,現将常用選項列出來。

enabled

是否在資料點上直接顯示資料

allowPointSelect

是否允許使用滑鼠選中資料點

formatter

回調函數,格式化資料顯示内容

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

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

是否顯示提示框

設定提示框的背景色

rgba(255, 255, 255, .85)

borderColor

提示框邊框顔色,預設自動比對資料列的顔色

auto

提示框圓角度

是否顯示提示框陰影

設定提示框内容樣式,如字型顔色等

color:'#333'

回調函數,用于格式化輸出提示框的顯示内容。傳回的内容支援html标簽如:<b>, <strong>, <i>, <em>, <br/>, <span>

2

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

layout

顯示形式,支援水準horizontal和垂直vertical

horizontal

對齊方式。

圖例背景色。

圖例邊框顔色。

#909090

圖例邊框角度

是否顯示圖例

是否可以浮動,配合x,y屬性。

是否顯示陰影

設定圖例内容樣式

更多詳細資訊請參照highcharts官網英文文檔:http://api.highcharts.com/highcharts