heightCharts使用API

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标签的样式，涵盖了绘图区