Highcharts中文幫助文檔

 

以前由於要作個報表就學了下Highcharts，特意整理了highcharts的中文幫助文檔，也是從別人那邊借鑑過來的，方便本身削下看看。

文檔主要翻譯經常使用的選項配置，若是想看詳細配置請看官網API:http://api.highcharts.com/highcharts

部份內容來源於網絡，感謝月光光整理http://www.helloweba.com/view-blog-156.html 

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'] 
}); 

 

 

Credits 名片

參數	描述	默認值
enabled	是否啓用名片	True
href	點擊名片跳轉的連接	http://www.highchart.com
position	設置名片的位置	position: {         align: 'right',         x: -10,         verticalAlign: 'bottom',         y: -5 }
style	設置名片的樣式
text	設置名片顯示的值	"Highcharts.com"

 

 

 

exporting 導出

參數	描述	默認值
enabled	是否顯示導出打印的按鈕	true
url	設置點擊導出按鈕鏈接的地址，默認是官網的地址，可本身定義
filename	保存的文件名	chart
type	保存的文件類型	Image/png
buttons	設置導出或打印按鈕的樣式、事件等具體配置請看官網
width	寬度	800
enableImages	是否啓用圖像的出口。包括圖像的點標記，背景圖片等，默認爲false。應該是是否添加背景圖http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/enableimages/	false

 

Global 全局設置

（Google翻譯的）

全球設置並不適用於每一個圖表的選項。像lang選項，這些選項，必須設置使用Highcharts.setOptions方法。

參數	描述	默認值
canvasToolsURL	設置延遲加載的Android2.x設備的附加文件的URL。這些設備不支持SVG，因此須要下載一個幫助文件，其中包含canvg，的依賴關係rbcolor，和CanVG Renderer類。能夠本身安裝canvas-tools.js到本身的服務器上，相應地更改此選項。默認值的「http://www.highcharts.com/js/canvas-tools.js」。
useUTC	是否使用UTC時間，爲軸縮放，刻度標記的位置和時間在Highcharts.dateFormat顯示。

 

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}] 若是想對不一樣的列顯示不一樣的顏色請對該列使用color屬性,如data: [148.5, { y: 216.4,color: '#BF0B23'},54.4]	''
name	顯示數據列的名稱。	''
type	數據列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline	line

 

plotOptions：數據點選項

plotOptions用於設置圖表中的數據點相關屬性。plotOptions根據各類圖表類型，其屬性設置略微有些差別，如下是部分選項。

參數	描述	默認值
enableMouseTracking	啓用或禁用鼠標跟蹤一個特定的列。這包括點提示和圖上點的單擊事件。對於大型數據集，它能夠提升性能。若是這個禁用了event事件將沒法執行	true
events	能夠設置對整個圖形的click事件、單擊圖例顯示和隱藏圖形,還有mouseOut、mouseOver等。具體詳細信息請看官網
point	每一個單點的屬性,該屬性下面能夠這個單個點的click、mouseOut、mouseOver、remove、select(選中是觸發)、unselect(失去選中時觸發),update(對某個點更新時觸發)
zIndex	設置圖形的zIndex值，值相對大的顯示在頂層
pointPadding	設置每列之間填充的大小，只對column和bar有效。
pointWidth	設置每列之間一個固定的寬度，只對column和bar有效。

 

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

 

Navigation按鈕和圖例選項

參數	描述	默認值
buttonOptions	設置導出,打印按鈕的選項，如顯示的位置，樣式，是否啓用等
menuItemHoverStyle	懸停在圖例上面的樣式
menuItemStyle
mentStyle

 

Loading

在圖形上顯示一個loading文字,多是用於增長用戶體驗

參數	描述	默認值
hideDuration	設置loading標籤淡出的時間	100
showDuration	設置loading標籤淡入的時間	100
labelStyle	Loading標籤樣式
style	loading標籤的樣式，涵蓋了繪圖區