[轉]推薦highcharts學習網址

標籤：

highcharts學習網址1:http://www.hcharts.cn/docs/index.php?doc=basic(百度highcharts中文教程即可)

highcharts學習網址2:http://www.helloweba.com/view-blog-156.html(Highcharts選項配置詳細說明文檔)

順便將網址2的內容分享過來:

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標籤如：<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://www.highcharts.com/ref/

[轉]推薦highcharts學習網址