首页 > 代码库 > heightCharts使用API

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