福利二区,国产免费精品,91婷婷

HighCharts選項和參數詳細配置查詢表

原創|使用教程|編輯：龔雪|2014-05-08 09:29:01.000|閱讀 20652 次

概述：作為一款出色的交互圖表制作工具，HighCharts有著全面的選項、參數等配置信息。為了幫助大家進一步掌握HighCharts，今天我們為大家整理了HighCharts的所有配置信息和說明，將其制作成表，供大家查詢。

文章主要包括Highcharts的18個選項、參數設置信息，具體有：chart、colors、credits、exporting、global、lang 、legend、loading、navigation 、pane、plotOptions、series 、subtitle、title 、tooltip 、xAxis、yAxis。你還可以進一步了解Highcharts的功能，查看HIghcharts 4深度解析。

1、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方法等的回調函數	?

2、colors?：數據列顏色選項

主要是數據列顏色設置，比如多條線條中的每個線條顏色。

參數	描述	默認
color	用于展示圖表，折線/柱狀/餅狀等圖的顏色，數組形式。	一組html顏色代碼

colors: [
'#058DC7',
'#50B432',
'#ED561B',
'#DDDF00',
'#24CBE5',?
'#64E572',
'#FF9655',
'#FFF263',
'#6AF9C4'
]

說明：1、顏色代碼為html標準，可通過DW等復制想要的代碼

2、默認是從第一個數據列起調用第一個顏色代碼，有多少個數

據列調用相應數量的顏色

3、當數據列大于默認顏色數量時，重復從第一個顏色看是調用

3、credits?：版權鏈接選項

參數	描述	默認值
enabled	是否顯示版權及鏈接，布爾型，默認為顯示	true
position	位置。可用align調整對齊方式，x，y設置距離。	position: { align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5?}
href	鏈接地址。String型，默認是highCharts官網	www.highcharts.com
style	名片CSS模式	itemStyle?: { cursor: ‘pointer’,color: ‘#909090′, fontSize: ’10px’?}
text	顯示名字。	highcharts.com

4、exporting?：導出及打印選項

參數	描述	默認值
buttons	打印和導出按鈕設置。其中兩個按鈕中又有很多樣式等設置，如有需要可詳細查看API文檔	默認按鈕樣式
enableImages	在導出的圖片中添加logo水印。布爾型，默認是false	false
enabled	是否顯示按鈕（也就是啟用打印導出功能），布爾型，默認顯示	true
filename	導出圖片文件名，String型	chart
type	導出圖片的格式，有jpg和png可選，String型	jpg/png
url	轉換圖片的服務器url，默認是用highcharts服務器	//export.highcharts.com
width	圖片大小，數字型	800

5、global?：Highcharts.SetOptions方法調用

全局選項,并不適用于每一個圖表。這些選項,如lang選項,必須設置使用Highcharts.setOptions方法。一般用不到，詳情請查看API文檔。

6、labels?：HTML標簽（可放置在圖表的任意地方）

參數

描述

默認值

items

包含兩個選項html和style，分別代表html語句及樣式

iteml :{

????html : “”,

????style {
left: ’100px’,top: ’100px’}

??}

style

css樣式

style:{ color : ‘#3E576F’}

7、lang?：語言配置選項

主要配置符號、導出時顯示的語句、時間顯示語言等。和上面的global參數有關，即調用Highcharts.SetOptions方法。下表列舉常用的選項注意：lang選項其實就是配置一些顯示語言，API中都有詳細說明。

參數	描述	默認值
decimalPoint	小數點	.
downloadJPEG	導出顯示的文字，下面還有downloadPDF等，都一樣	Download JPEG image等
months	月份，字符串數組形式	['January' 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
numericSymbols	數值單位，比如1000為1k	['k', 'M', 'G', 'T', 'P', 'E']

8、legend?：圖例選項，即數據類標示

參數	描述	默認值
layout	顯示形式，支持水平horizontal和垂直vertical	horizontal
align	對齊方式	center
backgroundColor	背景顏色	nulll
borderColor	圖例邊框顏色	#909090
borderRadius	圖例邊框角度	5
enabled	是否顯示圖例	true
floating	是否可以浮動，配合x，y屬性	false
shadow	是否顯示陰影	false
style	圖例樣式	詳見API文檔

9、loading:?圖表加載選項

參數	描述	默認值
hideDuration	淡出效果持續時間，以毫秒為單位	100
labelStyle	標簽樣式，css形式	詳見API文檔
showDuration	淡入效果持續時間，以毫秒為單位	100
style	圖表加載樣式	詳見API文檔

10、navigation?：?導出按鈕選項，配置導出按鈕及打印樣式等，詳見API文檔。

11、pane?：極性圖表和角儀表選項配置（這兩種表是在新版本2.0.1新增加的選項）

12、plotOptions?：數據點選項。分不同圖表類型配置不同，下面就常用的選項及spline選項列表如下

參數	描述	默認值
enable	是否在數據點上直接顯示數據	false
allowPointSelect	是否允許使用鼠標選中數據點	false
formatter	回調函數，格式化數據顯示內容	formatter: function()? {?return this.y;?}
marker	對某個點標記，多種樣式可選	?

13、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、spline	line

14、subtitle?：?副標題選項。和title配置一樣，在title中詳細講解

15、title?：?標題選項

參數	描述	默認值
text	標題文本內容	Chart title
align	水平對齊方式	center
verticalAlign	垂直對齊方式	top
margin	標題與副標題之間或者主圖表區間的間距	15
floating	是否浮動，如果為true，則標題可以偏離主圖表區，可配合x,y屬性使用	false
style	css樣式	{ color: ‘#3E576F’,? fontSize: ’16px’}
x	按照水平對齊方式的距離	0
y	按照垂直對齊方式的距離	15

16、tooltip?：數據點提示框選項

參數	描述	默認值
enable	是否顯示提示框	true
backgroundColor	設置提示框的背景色	rgba(255, 255, 255, .85)
borderColor	提示框邊框顏色，默認自動匹配數據列的	auto
borderRadius	提示框圓角度	5
shadow	設置提示框內容樣式，如字體顏色等	color:’#333′
formatter	回調函數，用于格式化輸出提示框的顯示內容。返回的內容支持html標簽如：<b>, <strong>,<br/>	?

17、xAxis?：x軸選項

參數	描述	默認
categories	設置X軸分類名稱，數組，例如： categories: ['Apples', 'Bananas', 'Oranges']	[]
title	X軸名稱，支持text、enabled、align、rotation、style等屬性 ?	?
labels	設置X軸各分類名稱的樣式style，格式formatter，角度rotation等	?
max	X軸最大值(categories為空時)，如果為null，則最大值會根據X軸數據自動匹配一個最大值 ?	null
min	X軸最小值(categories為空時)，如果為null，則最小值會根據X軸數據自動匹配一個最小值 ?	null
gridLineColor	網格（豎線）顏色 ?	#C0C0C0
gridLineWidth	網格(豎線)寬度	1
lineColor	基線顏色	#C0D0E0
lineWidth	基線寬度	0