Highcharts中文API

HighCharts 中文api很少，并且零散不全，嗨網線上 現将Highcharts常用的api參數選項配置集中整理，當然，Highcharts中文教程提供大量的選項配置參數，具體可參照Highcharts中文API，還可以參照Highcharts示範，絕對可以輕松定制符合使用者要求的圖表。

Highcharts中文API 之Chart：圖表區選項

Chart圖表區選項用于設定圖表區相關屬性。Chart是HighCharts圖表中主要屬性，包括了圖表區域的顔色、線條、高度、寬度、對齊、圖表類型等諸多屬性，也是HighCharts圖表中必須配置的屬性之一。 配置chart屬性，你可以輕松改變你的圖表的樣式、外觀。

參數	描述	預設值
backgroundColor	設定圖表區背景色	#FFFFFF
borderWidth	設定圖表邊框寬度
borderRadius	設定圖表邊框圓角角度	5
renderTo	圖表放置的容器，一般在html中放置一個DIV，擷取DIV的id屬性值	null
defaultSeriesType	預設圖表類型line, spline, area, areaspline, column, bar, pie , scatter
width	圖表寬度，預設根據圖表容器自适應寬度	null
height	圖表高度，預設根據圖表容器自适應高度	null
margin	設定圖表與其他元素之間的間距，數組，如[0,0,0,0]	[null]
plotBackgroundColor	主圖表區背景色，即X軸與Y軸圍成的區域的背景色	null
plotBorderColor	主圖表區邊框的顔色，即X軸與Y軸圍成的區域的邊框顔色	null
plotBorderWidth	主圖表區邊框的寬度
shadow	是否設定陰影，需要設定背景色backgroundColor。	false
reflow	是否自使用圖表區域高度和寬度，如果沒有設定width和height時，會自适應大小。	true
zoomType	拖動滑鼠進行縮放，沿x軸或y軸進行縮放，可以設定為：'x','y','xy'	''
events	事件回調，支援addSeries方法，click方法，load方法，selection方法等的回調函數。

Highcharts中文教程Color：顔色選項

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

參數	描述	預設值
color	用于展示圖表，折線/柱狀/餅狀等圖的顔色，數組形式。	array

配置Colors，可以自定義資料列的顔色。 Highcharts已經預設提供了多種顔色方案，當要顯示的圖形多于顔色種類時，多出的圖形會自動從第一種顔色方案開始選取。預設下colors就包含一系列顔色，在個性化或需要調整顔色的順序下，我們可以配置該屬性。 自定義顔色方案的方法：

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

Highcharts中文API 之Title：标題選項

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

參數	描述	預設值
text	标題文本内容。	Chart title
align	水準對齊方式。	center
verticalAlign	垂直對齊方式。	top
margin	标題與副标題之間或者主圖表區間的間距。	15
floating	是否浮動，如果為true，則标題可以偏離主圖表區，可配合x,y屬性使用。	false
style	設定CSS樣式。	{color: '#3E576F', fontSize: '16px'}

Highcharts中文API 之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	基線寬度

Highcharts中文教程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

Highcharts中文教程plotOptions：資料點選項

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

參數	描述	預設值
enabled	是否在資料點上直接顯示資料	false
allowPointSelect	是否允許使用滑鼠選中資料點	false
formatter	回調函數，格式化資料顯示内容	formatter: function() {return this.y;}

Highcharts 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

Highcharts Legend：圖例選項

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

參數	描述	預設值
layout	顯示形式，支援水準horizontal和垂直vertical	horizontal
align	對齊方式。	center
backgroundColor	圖例背景色。	null
borderColor	圖例邊框顔色。	#909090
borderRadius	圖例邊框角度	5
enabled	是否顯示圖例	true
floating	是否可以浮動，配合x，y屬性。	false
shadow	是否顯示陰影	false
style	設定圖例内容樣式	' '

Highcharts Credits：版權資訊

Credits隻是類似版權資訊。通過配置Credits屬性，你可以去除或修改HighCharts版權資訊。

參數	說明	預設值
enable	是否顯示版權資訊	true，也就是預設會顯示
href	連結位址	http://www.higrid.net
position	版權文字的位置	position: { align: ‘right’, x: -10, verticalAlign: ‘bottom’, y: -5 }
style	版權文字的樣式	itemStyle: { cursor: ‘pointer’,color: ‘#909090′,fontSize: ’10px’ }
text	版權文字	higrid.net

chart、color、title等屬性下還有更多不常用的配置，可以參考API文檔進行詳細設定。 本文未列出來的選項設定請參照highcharts官網英文文檔：http://www.highcharts.com/ref/嗨網線上 提供中文版：Highcharts中文API