国产一区二区三区日韩精品,99视频精,久久思思热免费视频

HighCharts選項(xiàng)和參數(shù)詳細(xì)配置查詢表

原創(chuàng)|使用教程|編輯：龔雪|2014-05-08 09:29:01.000|閱讀 20667 次

概述：作為一款出色的交互圖表制作工具，HighCharts有著全面的選項(xiàng)、參數(shù)等配置信息。為了幫助大家進(jìn)一步掌握HighCharts，今天我們?yōu)榇?家整理了HighCharts的所有配置信息和說明，將其制作成表，供大家查詢。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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

1、chart?：圖表區(qū)選項(xiàng)

主要設(shè)置圖表的類型，圖表裝載容器名，背景，高度，寬度等圖表的整體屬性。

參數(shù)	描述	默認(rèn)值
backgroundColor	設(shè)置圖表區(qū)背景色	#FFFFFF
borderWidth	設(shè)置圖表邊框?qū)挾?/td>	0
borderRadius	設(shè)置圖表邊框圓角角度	5
renderTo	圖表放置的容器，一般在html中放置一個DIV，獲取DIV的id屬性值	null
defaultSeriesType	默認(rèn)圖表類型line, spline, area, areaspline, column, bar, pie , scatter	0
width	圖表寬度，默認(rèn)根據(jù)圖表容器自適應(yīng)寬度	null
height	圖表高度，默認(rèn)根據(jù)圖表容器自適應(yīng)高度	null
margin	設(shè)置圖表與其他元素之間的間距，數(shù)組，如[0,0,0,0]	[null]
plotBackgroundColor	主圖表區(qū)背景色，即X軸與Y軸圍成的區(qū)域的背景色	null
plotBorderColor	主圖表區(qū)邊框的顏色，即X軸與Y軸圍成的區(qū)域的邊框顏色	null
plotBorderWidth	主圖表區(qū)邊框的寬度	0
shadow	是否設(shè)置陰影，需要設(shè)置背景色backgroundColor	false
reflow	是否自使用圖表區(qū)域高度和寬度，如果沒有設(shè)置width和height時，會自適應(yīng)大小	true
zoomType	拖動鼠標(biāo)進(jìn)行縮放，沿x軸或y軸進(jìn)行縮放，可以設(shè)置為：‘x’,'y’,'xy’	”
events	事件回調(diào)，支持addSeries方法，click方法，load方法，selection方法等的回調(diào)函數(shù)	?

2、colors?：數(shù)據(jù)列顏色選項(xiàng)

主要是數(shù)據(jù)列顏色設(shè)置，比如多條線條中的每個線條顏色。

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

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

說明：1、顏色代碼為html標(biāo)準(zhǔn)，可通過DW等復(fù)制想要的代碼

2、默認(rèn)是從第一個數(shù)據(jù)列起調(diào)用第一個顏色代碼，有多少個數(shù)

據(jù)列調(diào)用相應(yīng)數(shù)量的顏色

3、當(dāng)數(shù)據(jù)列大于默認(rèn)顏色數(shù)量時，重復(fù)從第一個顏色看是調(diào)用

3、credits?：版權(quán)鏈接選項(xiàng)

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

4、exporting?：導(dǎo)出及打印選項(xiàng)

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

5、global?：Highcharts.SetOptions方法調(diào)用

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

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

參數(shù)

描述

默認(rèn)值

items

包含兩個選項(xiàng)html和style，分別代表html語句及樣式

iteml :{

????html : “”,

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

??}

style

css樣式

style:{ color : ‘#3E576F’}

7、lang?：語言配置選項(xiàng)

主要配置符號、導(dǎo)出時顯示的語句、時間顯示語言等。和上面的global參數(shù)有關(guān)，即調(diào)用Highcharts.SetOptions方法。下表列舉常用的選項(xiàng)注意：lang選項(xiàng)其實(shí)就是配置一些顯示語言，API中都有詳細(xì)說明。

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

8、legend?：圖例選項(xiàng)，即數(shù)據(jù)類標(biāo)示

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

9、loading:?圖表加載選項(xiàng)

參數(shù)	描述	默認(rèn)值
hideDuration	淡出效果持續(xù)時間，以毫秒為單位	100
labelStyle	標(biāo)簽樣式，css形式	詳見API文檔
showDuration	淡入效果持續(xù)時間，以毫秒為單位	100
style	圖表加載樣式	詳見API文檔

10、navigation?：?導(dǎo)出按鈕選項(xiàng)，配置導(dǎo)出按鈕及打印樣式等，詳見API文檔。

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

12、plotOptions?：數(shù)據(jù)點(diǎn)選項(xiàng)。分不同圖表類型配置不同，下面就常用的選項(xiàng)及spline選項(xiàng)列表如下

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

13、series?：數(shù)據(jù)列選項(xiàng)

參數(shù)	描述	默認(rèn)值
data	顯示在圖表中的數(shù)據(jù)列，可以為數(shù)組或者JSON格式的數(shù)據(jù)。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	‘’
name	數(shù)據(jù)列名稱	‘’
type	數(shù)據(jù)列類型，支持 area, areaspline, bar, column, line, pie, scatter、spline	line

14、subtitle?：?副標(biāo)題選項(xiàng)。和title配置一樣，在title中詳細(xì)講解

15、title?：?標(biāo)題選項(xiàng)

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

16、tooltip?：數(shù)據(jù)點(diǎn)提示框選項(xiàng)

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

17、xAxis?：x軸選項(xiàng)

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