1. 程式人生 > >Highcharts製作圖片表設定線條顏色…

Highcharts製作圖片表設定線條顏色…

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 設定圖例內容樣式 ''

來源於helloweba.com