highcharts配置文档

Chart Color Title Subtitle xAxis yAxis Event labels Series plotlines PlotOption Tooltip legend

Chart：图表区选项

Chart图表区选项用于设置图表区相关属性。

参数描述默认值backgroundColor 设置图表区背景色#FFFFFF borderWidth 设置图表边框宽度0 borderRadius 设置图表边框圆角角度 5

图表放置的容器，一般在html中放置一个DIV，获取renderTo

null

DIV的id属性值

默认图表类型line, spline, area, areaspline, column,

0 defaultSeriesType

bar, pie , scatter

width 图表宽度，默认根据图表容器自适应宽度null

height 图表高度，默认根据图表容器自适应高度null

margin 设置图表与其他元素之间的间距，数组，如[0,0,0,0] [null] plotBackgroundColor 主图表区背景色，即X轴与Y轴围成的区域的背景色null

主图表区边框的颜色，即X轴与Y轴围成的区域的边框plotBorderColor

null

颜色

plotBorderWidth 主图表区边框的宽度0 shadow 是否设置阴影，需要设置背景色backgroundColor。false

是否自使用图表区域高度和宽度，如果没有设置width reflow

true

和height时，会自适应大小。

拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：zoomType

''

'x','y','xy'

事件回调，支持addSeries方法，click方法，load方法，events

selection方法等的回调函数。

Color：颜色选项

Color颜色选项用于设置图表的颜色方案。

参数描述默认值

color 用于展示图表，折线/柱状/饼状等图的颜色，数组形式。array Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：

Highcharts.setOptions({

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',

'#FFF263', '#6AF9C4']

});

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轴相关属性。

参数描述默认值allowDecimals 轴上的刻度是否允许使用小数。true

alternateGridColor 当使用备用的网格颜色时，表格会各

行变色

null

categories x轴的名称。比如categories:

['Apples', 'Bananas', 'Oranges']

[]

dateTimeLabelForm ats 时间轴，标尺会根据合适的单位自动

计算。

{second:'%H:%M:

%S',

minute:'%H:%M',

hour:'%H:%M', day:'%e. %b', week:'%e. %b', month:'%b \'%y', year:'%Y'}

endOnTick 是否强制轴以一个刻度结束。使用该

项和maxPadding想来控制轴的末

端。

false

events 参照events

gridLineColor 绘图区网格线的颜色#C0C0C0 gridLineDashStyle 网格线的点或线的样式Solid gridLineWidth 绘图区网格线的宽度0.0

id 轴的id。可以在图表渲染后，通过chart.get()获得一个点

null

labels 参照labels

lineColor 轴本身的线的颜色。#C0D0E0 lineWidth 轴本身的线的宽度。 1.0

linkedTo 指向本轴的另一个轴的索引。当一个

轴指向主轴时，它将有和主轴一样的

极端值，但是通过min，max或setExtremes可以更改。它也可以用

null

来显示附加的信息，或者通过复制标尺来缓解图表显示。

max 轴的最大值。如果是null，最大值被

自动计算。如果endOnTick选项是true，max的值可能会被四舍五入。

实际的最大值也会被

chart.alignTicks影响。

null

maxPadding 最大值相对于轴的长度的填充间距。padding值为0.05时会取100px长

的轴的5px长度。

0.01

maxZoom 已过期。V2.2版本后改名为minRange.

null

min 轴的最小值。如果是null，最小值会

被自动计算。

null

minPadding 最小值相对于轴的长度的填充间距。

如果padding的值为0.05将会取一

个长为100px轴的5px值。

0.01

minRange 轴显示的最小范围。整个轴将不被允

许跨越这个最小间隔。比如一个时间轴，主要单位是毫秒。

null

minTickInterval 轴值允许的最小刻度间隔。比如缩放

轴用来显示每天的数据，可以用来阻

null

止轴上显示小时的时间。minorGridLineColor 最小级别，次级的网格线的颜色。#E0E0E0 minorGridLineDash

Style

次级网格线的破折号或点的样式。Solid minorGridLineWidt

h

次级网格线的宽度。 1.0 minorTickColor 次级刻度标记的颜色。#A0A0A0

minorTickInterval 次级网格线的刻度间隔，以标尺为单位。在线性轴中，如果是‘auto’，

次级刻度间隔是刻度间隔的五分之

一。如果是null，次级刻度将不显示。

null

minorTickLength 次级刻度的像素长度 2.0

minorTickPosition 次级刻度相对于轴线的位置。可以是

inside或outside。

outside

minorTickWidth 次级刻度的像素宽度0.0

offset 绘图区到轴线的像素距离。正的偏移

量会让轴的线、便签和刻度远离绘图区。

0.0

opposite 是否显示在正常显示的对面一侧显示

轴。正常显示是垂直的左边，水平的

下面，因此对面就是垂直的右边和水

平的上边。

false

plotBands 参照 plotBands plotLines 参照 plotLines

reversed 是否逆转轴以使得最高的点最接近起

点。

false

showEmpty 是否显示轴线和标题，当轴不包含数

据时

null

showFirstLabel 是否显示第一个刻度标签true showLastLabel 是否显示最后一个刻度标签false

startOfWeek 对于时间轴，决定轴之间的刻度。0=

周日，1=周一。

1.0

startOnTick 是否强制轴以刻度开始。结合maxPadding选项使用控制轴的开

始。

false

tickColor 主刻度的颜色。#C0D0E0

tickInterval 住刻度的间隔，以轴单位为单位。当

为null时，线性轴的刻度间隔约等于tickPixelInterval，时间轴的约为时间

间隔。

null

tickLength 主刻度的长度。 5.0

tickPixelInterval 当tickInterval是null的时候，该选

项设置了刻度标志的大约间隔的像素

值。

Y轴:72，X轴:100.

tickPosition

刻度标记相对于轴线的位置。可以是inside 或outside 。

outside

tickPositioner 回调函数，返回一个定义刻度在轴上的排列的数组。 null

tickPositions 定义轴刻度的数组。 null tickWidth

主刻度的像素宽度。

1.0

tickmarkPlacement 仅用在分类轴上。如果是on ，刻度标

记在分类的正中间，如果是between ，刻度在两个分类的之间。

between

title

参照title

type

轴的类型。可以是linear ，logarithmic ，或者datetime 。

linear

yAxis ：Y 轴选项

Y 轴选项与上述xAxis 选项基本一致，请参照上表中的参数设置，不再单独列出。 Event:事件 参数

描述

默

认值

afterSetExtremes 相对于setExtremes 事件的事件。在最后的最小值和最大值都被计算

且校正过minRange 后触发该事件

null

setExtremes

当轴的最大值和最小值设置的时候，被触发，无论是调

用.setExtremes()方法或者是选择了图表的一个区域。this 关键字是

指轴对象自己。唯一的参数event 被传递到函数中。用户设置的新的最大值和最小值可以通过event.min 和event.max 查找。

null

Labels ：标签

参数描述默认值align水平对齐方式。可以是’left’,’right’,’center’.center enabled启用或禁用轴标签true

formatter 回调javascript函数格式化标签。值通过this.value

得到。this的附加属性，axis，chart，isFirst和isLast。

function() { return

this.value;}

overflow 如果处理水平轴的溢出标签。可以是undefined和

‘justify’。如果是justify，标签将不会在绘图区外渲

染。如果有足够的空间去移动它，它将会在边缘对齐，否则会被移除。

null

rotation标签旋转的角度0

staggerLines 仅在水平轴使用。把标签分布在几行中以增大或缩

小标签的空间。

null

step 每隔n个的标签显示在轴上。设置step为n。设置step为2，每隔1个显示标签。

null

style标签的CSS样式style: { color:'#6D869F', fontWeight: 'bold' }

useHTML是否使用HTML渲染标签false

x标签相对于轴刻度的位置的x的偏移量0

y标签相对于轴刻度的位置的y的偏移量。0

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 or spline

line Plotlines

标示线是x轴或y轴上的标记特殊刻度的线，它的属性包括了颜色，事件，id，标签，和zIndex层叠，常见属性如下表所示：

属性名描述默认值color 标示线的颜色null dashStyle 标示线的线条样式，默认是solid，即直线型，更多下面详细说明'solid' events 标示线的事件，详细事件下文详解null

id 定义标示线，在Axis.removePlotLine中定义去除那条标示线null value 在坐标轴上显示的位置null label 标示线的文字标签，用来描述标示线null width 标示线的宽度null

zIndex 层叠，标示线在图表中显示的层叠级别，值越大，显示越向前，默认标示

线显示在数据线之后

null

plotOptions：数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，现将常用选项列出来。

参数描述默认值enabled 是否在数据点上直接显示数据false allowPointSelect 是否允许使用鼠标选中数据点false

formatter 回调函数，格式化数据显示内容formatter: function() {return

this.y;} Tooltip：数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

参数描述默认值

animation 启用或禁用提示的动画。这对大数据量

的图表很有用

true

backgroundColor 提示的背景色或者渐变色rgba(255 255, 255, 0.85)

borderColor 提示的边框颜色auto borderRadius 边框圆角的半径 5.0 borderWidth 边框的宽度 2.0

crosshairs 显示十字线，把点和它们的轴值连接起来。十字线可以是Boolean,或者Boolean数组，或者是一个对象

null

enabled 启用或禁用提示true footerFormat 附加到提示格式的字符串null

formatter 回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：, , , ,
,

positioner 一个回调函数，用来在默认位置放置提示。

null

shadow 是否显示提示的下降阴影true

shared 当提示是共享的，整个绘图区将捕获鼠

标的移动。所有序列类型的排序数据的

提示文本将会显示在一个气泡（提示

框）中。

false

snap 图表或单个点的感应单元。不适合条状图、柱状图和饼图切片。对于鼠标供电

设备的默认值时10，对于触摸设备的

默认值时25。

null

style 提示的CSS样式。style: {color:'#333333', fontSize: '9pt', padding: '5px'}

useHTML 是否使用HTML代替SVG来渲染提示

的内容

false

valueDecimals 每个序列的y值显示多少小数位保存所有小数valuePrefix 附加到序列y值的前缀null valueSuffix 附加到序列y值的后缀null

xDateFormat 如果x轴是时间轴，显示在提示头部的

日期格式。

基于每个点的最小距

离的大约数

Legend：图例选项

legend用于设置图例相关属性。

参数描述默认值

layout 显示形式，支持水平horizontal和垂直vertical horizontal align 对齐方式。center backgroundColor 图例背景色。null borderColor 图例边框颜色。#909090 borderRadius 图例边框角度 5

enabled 是否显示图例true

floating 是否可以浮动，配合x，y属性。false shadow 是否显示阴影false

style 设置图例内容样式''