Highcharts 中文 API
一、Highcharts 结构及 API 文档 .................................................................................................. 3
1-1：准备工作 ......................................................................................................................... 3
1-2、HighCharts 结构 ............................................................................................................ 3
二：chart 图表选项 ....................................................................................................................... 4
2-1.概览 ............................................................................................................................... .... 4
2-1-1：alignTicks 多轴时最小刻度是否自动计算 .................................................... 6
2-1-2：renderTo 图表可以被渲染的 HTML 元素 .......................................................... 6
2-1-3：type 图表的默认样式 ......................................................................................... 6
2 ‐ 2 ：效果截图 ......................................................................................................................... 6
2 ‐ 3 ：实例说明 ......................................................................................................................... 6
三：colors 颜色 ............................................................................................................................... . 8
3-1：Colors 选项 .................................................................................................................... 8
四：credits 名片选项 ...................................................................................................................... 8
五：exporting 导出和打印选项 ...................................................................................................... 9
5-1：exporting 导出和打印选项 ......................................................................................... 9
5-2：exportButton 导出按钮 ................................................................................................ 9
5-3：printButton 打印按钮 ................................................................................................ 10
六：global 全局选项 ...................................................................................................................... 11
6-1.global 选项 .................................................................................................................... 11
七.labels 标签选项 ...................................................................................................................... 12
7-1：属性 ............................................................................................................................... 12
7-1-1：items 单个项目 ................................................................................................ 12
7 ‐ 2 ：效果图 ........................................................................................................................... 13
7 ‐ 3 ：代码 ............................................................................................................................... 13
八：Lang 语言选项 ........................................................................................................................ 14
8-1.说明 ............................................................................................................................... .. 14
8-2.概览 ............................................................................................................................... .. 15
九：legend 图例选项 ................................................................................................................... 16
十：loading 加载选项 .................................................................................................................. 17
十一.navigation 打印和导出选项 .............................................................................................. 18
十二:Pane 窗格选项 ...................................................................................................................... 18
十三.PlotOptions 绘图 ................................................................................................................ 19
13-1：选项概览 ..................................................................................................................... 19
13-2：area 区域图 ................................................................................................................ 19
13-2-1：dataLabels 数据标签 ................................................................................... 21
13-2-2：events 事件 .................................................................................................. 23
13-2-3：marker 标记 ................................................................................................. 23
13-2-4：point 单独的点 .............................................................................................. 25
13-3.arearange 区域排列图 ................................................................................................ 25
13-4.areaspline 区域曲线图 ................................................................................................ 26
13-5.areasplinerange ........................................................................................................... 26
13-6.bar 条状图 .................................................................................................................... 26
13-7：column 柱状图 ............................................................................................................ 28
13-8 ：columnrange 柱状排列图 ......................................................................................... 28
13-9:gauge 测量图 ................................................................................................................ 28
13-9-1:说明 ................................................................................................................... 28
13-9-2: 属性 ................................................................................................................. 28
13-10: 饼图 ............................................................................................................................. 32
13-10-1:属性 ................................................................................................................. 32
13-10-2:dataLable 数据标签 ..................................................................................... 33
13-11 其他图形 ...................................................................................................................... 35
13-11-1：Highcharts Stock 中 dataGrouping ......................................................... 35
一、Highcharts 结构及 API 文档
1-1：准备工作
1、首先，HighCharts 是基于 Jquery 框架开发的，所以需要在页面引入 Jquery。
2、其次，需要引入 HighCharts js 文件
3、如果你想使用导出功能，必须引入导出相关的 js 文件，该文件存在于
/Highcharts-X.X.X/js/modules/目录下
1-2、HighCharts 结构
通过阅读 highCharts API文档，我们知道 highCharts 的基本结构是：
var chart = new Highcharts.Chart({
chart: {…} // 配置chart图表区
colors: [{...} ] // 配置主体显示颜色（多个线条和柱体的颜色顺序的）
credits: {…} // 配置右下角版权链接
exporting: {…} // 配置导出及打印
global: {…} / / HighCharts 国际化方法调用
labels: {…} // HTML 标签，可以放置在绘图的任何位置
lang: {…} // 语言对象属性配
legend: {…} // 配置图例选项
loading: {…} // 配置图表加载选项
navigation: {…} // 配置导出按钮属性
pane: {…} // 仅适用于极性图表和角仪表
plotOptions: { …} // 配置数据点选项
series: [{...}] // 配置数据列选项
subtitle: {…} // 配置副标题
title: {…} // 配置标题
tooltip: {…} // 配置数据点提示框
xAxis: {…} // 配置x轴选项
yAxis: {…} // 配置y轴选项
})
红色部分表示为了图表的完整性或美观性必须配置的属性。，其他无特殊要求默认即可。所
以，HighCharts 开发，只需要了解每个属性的含义，并有选择的配置需要的效果既可。
二：chart 图表选项
2-1.概览
参数 描述 默认值
alignTicks 多轴时最小刻度是否自动计算 true
animation 是否启用动画效果 true
backgroundColor 图表外部的背景色或渐变色 #FFFFFF
borderColor 图表外边框的颜色 #4572A7
borderRadius 图表外边框的圆角半径 5.0
borderWidth 外边框的像素宽度 0.0
className 图表容器div使用的一个css 类名 null
defaultSeriesType type 的别名 null
events addSeries 、click 、load 、redraw 、selection null
height 一个显式的图表高度 null
ignoreHiddenSeries
如果true, 一旦一个系列被隐藏，轴将会扩展剩余
的可见系列
true
inverted 是否倒置轴，使得x 轴时垂直的 y 轴是水平的 false
margin 图表的外边框和绘图区域的边距 null
marginBottom 下边距 null
marginLeft 左边距 null
marginRight 右边距 null
marginTop 上边距 null
plotBackgroundColor 绘图区域的背景色或渐变 null
plotBackgroundImage 绘图区背景图片的URL null
plotBorderColor 绘图区的边框颜色 #C0C0C0
plotBorderWidth 绘图区的边框宽度 0.0
plotShadow 绘图区是否使用阴影效果 false
polar 极坐标 false
reflow 当窗口大小改变的时候，自适应div大小 true
renderTo 图表可以被渲染的HTML 元素 null
resetZoomButton
出现在缩放后面的一个按钮，允许用户重置缩放
position，relativeTo，theme
null
selectionMarkerFill 选中的图表区域的背景颜色 rgba(69,114,167,0.25)
shadow 是否对外部图表应用下降阴影 false
showAxes 是否显示最初的坐标轴 false
spacingBottom 图表底部和内容的距离空间 15
spacingLeft 图表左边和内容的距离空间 10.0
spacingRight 图表右边和内容的距离空间 10.0
spacingTop 图表上边和内容的距离空间 10.0
style 额外的CSS 样式可以给内部div容器 null
type 图表的默认样式 line
width 图表的显式宽度 null
zoomType 缩放，可以为x,y,xy 之一 null
2-1-1：alignTicks 多轴时最小刻度是否自动计算
当使用多个轴时，刻度的间隔会根据最小刻度自动的添加到两个或多个轴上。可以通过设置
alignTicks 为false 来禁止自动划分刻度。如果表格线看起来比较杂乱，通过设置第二个轴
的gridLineWidth为0 来隐藏该刻度线是一个好的做法。alignTicks 的默认值为 true
2-1-2：renderTo 图表可以被渲染的 HTML 元素
renderTo: 'contai ner' 要和你 div 中的 id 号对应，这样图表就能显示在浏览器中了。
如 2-3 实例中 renderTo: 'container',//div 标 签 和<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
2-1-3： type 图表的默认样式
默认一系列的图表类型。可以是 line, spline, area, areaspline, c olumn, scatter,
ohlc and candlestick. 从 1.1.7 开始可以是 arearange, areasplinerange ,c olumnrange.
2‐ 2：效果截图
2‐ 3：实例说明
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//HighCharts中chart属性配置
chart: {
renderTo: 'container',//div 标签
type: 'line',//图表类型
/******************以下chart配置可选******************/
backgroundColor:"#EAF7FF",//图表背景色
borderWidth:5,//图表边框宽度
borderRadius:15,//图表边框圆角角度
plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
plotBorderColor:'red',//主图表边框颜色
plotBorderWidth:2,//主图表边框宽度
shadow:true,//是否设置阴影
zoomType:'xy'//拖动鼠标放大图表的方向
},
credits : {
href:'http://www.52wulian.org',
position: {
x:-30,
y:-30
},
style:{
color:'red',
fontWeight:'bold'
},
text:'我爱物联网'
},
xAxis: {
categories: ['1','2','3','4','5']
},
series: [{
name: 'series1',
data: [2,4,5,9,2]
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0
auto"></div>
</body>
</html>
三：colors 颜色
3-1：Colors 选项
图表的颜色顺序。
参数 描述 默认值
colors
一个数组包含图表系列的默认颜色，当所有颜色都
用完的时候，新的颜色将从最初的颜色从新开始。
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
]
四：credits名片选项
credits 是默认图标右下方的 highchart.com 的名片标签。
参数 描述 默认值
enabled 是否显示 credits 的文本 true
href credits 标签的 href http://www.highcharts.com
positioncredits 标签的位置。alig n, verticalAlign,x 和 y null
style credits 标签的 CSS 样式 null
text credits 标签的文本 Highcharts.com
五：exporting 导出和打印选项
5-1：exporting 导出和打印选项
参数 描述 默认值
buttons exportBut ton、printButton 导出和打印的默认值
chartOptions 给导出图表添加图表选项 null
enabled 导出模块是否可用 true
filename 导出图表的文件名称，不带扩展名 chart
type
chart.exportChart()被调用时，如果没有特
殊的 type 选项，就使用默认的 MIME 类型导
出
image/png
url
转化 SVG 字符串为图片格式的服务器模块的
URL
http://export.highcharts.com
width
图表导出为 png 或 jpg 类型的时候的像素宽
度
800.0
5-2：exportButton 导出按钮
参数 描述 默认值
align 按钮的对齐方式 right
backgroundColor 按钮的背景色或渐变色 null
borderColor 按钮的边框颜色 #B0B0B0
borderRadius 按钮边框的圆角半径 3.0
borderWidth 按钮的边框宽度 1.0
enabled 按钮是否可用 true
height 按钮的像素高度 20.0
hoverBorderColor 鼠标经过时按钮的边框颜色 #909090
hoverSymbolFill 参见 navigation.buttonOptions=>hoverSymbolFill#768F3E
hoverSymbolStroke 鼠标经过按钮，按钮内部标志的边框线颜色 #4572A5
menuItems 菜单项 null
onclick 按钮的点击事件 chart.print()
symbol 按钮的标志 exportIcon
symbolFill 参照 navigation.buttonOptions=>symbolFill #A8BF77
symbolSize 按钮内标志的像素大小 12.0
symbolStroke 标志的边框或线的颜色 #A0A0A0
symbolStrokeWidth 按钮内标志的边框宽度 1.0
symbolX 标志在按钮中间的 x 轴偏移量 11.5
symbolY 标志在按钮中间的 y 轴偏移量 10.5
verticalAlign 按钮的垂直位置 top
width 按钮的宽度。 24.0
x 按钮相对于 align 选项的水平位置 -36.0
y 按钮相对于 verticalAlign 选项的垂直偏移量 10.0
5-3：printButton 打印按钮
参数 描述 默认值
align 按钮的对齐方式 right
backgroundColor 按钮的背景色或渐变色 null
borderColor 按钮的边框颜色 #B0B0B0
borderRadius 按钮边框的圆角半径 3.0
borderWidth 按钮的边框宽度 1.0
enabled 按钮是否可用 true
height 按钮的像素高度 20.0
hoverBorderColor 鼠标经过时按钮的边框颜色 #909090
hoverSymbolFill 参见 navigation.buttonOptions=>hoverSymbolFill#768F3E
hoverSymbolStroke 鼠标经过按钮，按钮内部标志的边框线颜色 #4572A5
menuItems 菜单项 null
onclick 按钮的点击事件 chart.print()
symbol 按钮的标志 exportIcon
symbolFill 参照 navigation.buttonOptions=>symbolFill #A8BF77
symbolSize 按钮内标志的像素大小 12.0
symbolStroke 标志的边框或线的颜色 #A0A0A0
symbolStrokeWidth 按钮内标志的边框宽度 1.0
symbolX 标志在按钮中间的 x 轴偏移量 11.5
symbolY 标志在按钮中间的 y 轴偏移量 10.5
verticalAlign 按钮的垂直位置 top
width 按钮的宽度。 24.0
x 按钮相对于 align 选项的水平位置 -36.0
y 按钮相对于 verticalAlign 选项的垂直偏移量 10.0
六：global 全局选项
6-1.global 选项
说明：global选项不用于么一个图表。像lang一类的选项，必须使用Highcharts.setOptions
方法来设置。
Highcharts.setOptions({
global:{
useUTC:false
}});
参数 描述 默认值
VMLRadialGradient
URL
为了画径向渐变图片，VML
浏览器必须的路径
http://code.highcharts.com/{version}/gfx/vml-radi
al-gradient.png
canvasToolsURL Android2.x 设备上的延迟 http://www.highcharts.com/js/canvas-tools.js
加载的附加文件的 URL
useUTC
Highcharts.dataFormat 中
的坐标轴扩展，标尺刻度的
位置和时间显示是否使用
UTC 时间。
true
七.labels 标签选项
Labels 属性允许在 HighCharts 图表的任意位置添加任意的 html 代码。可以实现许多
自定义内容。
7-1：属性
参数 描述 默认值
items Html，style
style 所有标签的共享 CSS 样式 style: {color: '#3E576F'}
7-1-1：items 单个项目
参数 描述 默认值
Html label 的内部 html 或者文本 text
style
每一个 label 的 CSS 样式。设置 label 的位
置
null
7‐ 2：效果图
7‐ 3：代码
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'areaspline',
},
credits : {
enabled:false //不显示 highCharts 版权信息
},
labels:{
items:[{
//标签代码（html 代码）
html:'<p style="font-size:20">Copyright © 2012-2013 </p><a
href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我爱物联网
</a>',
style:{ //设置标签位置
left:'100px',
top:'50px',
}
}],
style:{ //设置标签颜色
color:'rgb(0,0,255)'
}
},
xAxis: {
categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
},
series: [{
name: 'series1',
data: [2,4,5,9,2]
},{
name:'series2',
data:[3,5,7,2,1]
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
八：Lang 语言选项
8-1.说明
语言对象。语言对象是全局的，而且不能在图表初始化的时候设置。它必须使用
Highcharts.setOptions 在图表初始化之间设置。
Highcharts.setOptions({
lang:
months:[' January', ' February', March, ' April', ' May', ' June', ' July', '
August','Septembre', 'Octobre','Novembre', ' December'],
weekdays:[' Sunday', ' Monday', ' Tuesday', ' Wednesday', ' Thursday ', ' Friday ',
' Saturday ']
}
});
8-2.概览
参数 描述 默认值
decimalPoint
在 Highcharts.numberFormat 方法中除
了特定的函数参数外使用的默认的小数
点
.
downloadJPEG JPEG 下载菜单的文本 Download JPEG image
downloadPDF PDF 下载菜单的文本 Download PDF document
downloadPNG PNG 下载菜单的文本。 Download PNG image
downloadSVG SVG 下载菜单的文本 Download SVG vector image
exportButtonTitle SVG 下载菜单的文本
Export to raster or vector
image
loading
当图表设置下载状态后，调用
chart.showLoading 时显示的 loading
文本
Loading...
months 包含月份名称的数组
numericSymbols
在坐标轴的标签中为了缩短大数据使用
的公有制前缀
printButtonTitle 打印按钮的提示文本 Print the chart
resetZoom 当图表缩放时显示的标签文本 Reset zoom
shortMonths 包含月份缩写的数组
thousandsSep
Highcharts.numberFormat 方法的千分
隔符，除非特殊参数说明
","
weekdays 包含个星期的名字的数组
['Sunday', 'Monday',
'Tuesday', 'Wednesday',
'Thursday', 'Friday',
'Saturday']
九：legend 图例选项
参数 描述 默认值
align 图例的水平位置 center
backgroundColor 图例的背景色 null
borderColor 图例的边框颜色 #909090
borderRadius 图例的圆角半径 5.0
borderWidth 图例的边框宽度 1.0
enabled 启用或禁用图例 true
floating
当图例是浮动的，绘图区将会忽略它，且绘图区会放在图例
的后边
false
itemHiddenStyle 图例的每个系列项目或点项目隐藏时的 CSS 样式 null
itemHoverStyle 图例的每个系列项目或点项目鼠标滑过时的 CSS 样式 null
itemMarginBottom 每个图例项目的下边距。 0.0
itemMarginTop 每个图例项目的上边距 0.0
itemStyle 每个图例项目的 CSS 样式 null
itemWidth
每个图例项目的宽度。当一个包含多个图例项目的水平图例
需要垂直对齐时，这是非常有用的
null
labelFormatter 系列的格式化标签 null
layout 图例项目的布局。可以是’horizontal’或’vertical’ horizontal
lineHeight 图例项目的行高。V2.1 版本后过期 16.0
margin
如果绘图区是自动计算且图例是不浮动的，图例的边距就是
图例和坐标轴标签或绘图区的空间。
15.0
maxHeight 图例的最大高度 null
navigation 当图例溢出时，分页导航的选项
padding 图例盒子的内边距 8.0
reversed 图例项目的顺序相对于系列或点定义的顺序是否要逆序 false
rtl 是否把标志放在文本的右边 false
shadow 图例的阴影 false
style 图例的 CSS 样式。 null
symbolPadding 图例内标志和文本的距离 5.0
symbolWidth 图例内标志的宽度 30.0
useHTML 是否使用 HTML 渲染图例项目的文本 false
verticalAlign 图例框的垂直对齐方式 bottom
width 图例的宽度 null
x
相对于水平对齐方式 align 的 chart.spacingLeft 和
chart.spacingRight 的 x 的偏移量
0.0
y
相对于垂直对齐方式 verticalAlign 的 chart.spacingTop 和
chart.spacingBottom 的垂直偏移量
0.0
十：loading 加载选项
参数 描述 默认值
hideDuration 淡出效果的持续时间（以毫秒为单位）100.0
labelStyle 加载标签的 span 的 CSS 样式
labelStyle: {
fontWeight: 'bold',
position: 'relative',
top: '1em'}
showDuration 淡入效果的持续时间（以毫秒为单位）100.0
style 覆盖在绘图区的加载页面的样式
style: {position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'}
说明：加载选项通过图表的操作控制着覆盖在绘图区域的加载页面是否显示。这个页面仅在
显示调用 chart.showLoading()时，显示。对于开发者着和终端用户交互有些事情正在进行
的情况，非常实用。比如通过 XHR 更新数据。“Loading…”文本内容本身不是这个可配置
对象的一部分，是 lang 对象的一部分。
十一.navigation 打印和导出选项
参数 描述 默认值
buttonOptions 打印按钮和导出按钮
menuItemHoverStyle
当导出图表被点击时弹出的菜单的单独选
项的鼠标滑过的 CSS 样式
menuItemHoverStyle: {
background: '#4572A5',
color: '#FFFFFF'}
menuItemStyle
当导出图表被点击时弹出的菜单的单独选
项的 CSS 样式
menuItemStyle: {
padding: '0 5px',
background: NONE,
color: '#303030'}
menuStyle
当导出按钮被点击时，弹出菜单的 CSS 样
式
menuStyle: {
border: '1px solid
#A0A0A0',
background: '#FFFFFF'}
buttonOption 属性参考：翻译三：exporting打印和导出选项。
十二:Pane 窗格选项
参数 描述 默认值
background
背景的一个对象或一组对象。子选项包括 backgroundColor、
innerWidth, ourterWidth, borderWidth, borderColor
null
center
极坐标图或角度测量仪的中心点，像数组[x,y]一样定位。
位置可以是以像素为单位的整数或者是绘图区域的百分比
[‘50%’,’50%’]
endAngle
x 轴极坐标或角度轴的最终度数，以度数的方式给出。0 是
北
startAngle+360
startAnglex 轴或测量轴的开始度数，以度数的方式给出。0 是北 0
说明：只适用在极坐标图和角度测量仪。此可配置对象持有组合 x 轴和 y 周的常规选项。每
个 x 轴和 y 轴都可以通过索引关联到窗格中。
十三.PlotOptions 绘图
13-1：选项概览
参数 描述 默认值
area 区域图
arearange 区域图范围
areaspline 区域图曲线图
areasplinerange 区域图曲线图范围
bar 条状图
column 列图（柱状图）
columnrange 列的区域图
gauge 测量图
line 直线图
pie 饼图
scatter 散点图
series 序列图
spline 曲线图
13-2：area 区域图
参数 描述 默认值
allowPointSelect 是否允许通过点击标签而选中标签 false
animation 当一个序列不显示时，是否显示动画 true
color 主要颜色或序列的颜色 null
connectEnds 只用在极坐标图表中。是否要跨越极端连接序列线的终端 true
connectNulls 是否跨过空的点链接图像线 false
cropThreshold 处理阈值 300.0
cursor 光标 null
dashStyle 图表段划线样式的名字 null
dataGrouping 数据分组功能（Highstock 专有属性）
dataLabels 数据标签。参见三级标题 datalabels
enableMouseTracking 启用或禁用鼠标跟踪一个特定的序列 true
events 事件，参见三级标题 events
fillColor 区域图的填充颜色 null
fillOpacity 填充区域图的透明度 0.75
id 序列的 id null
lineColor 图表基线的独特颜色 null
lineWidth 图表基线条的宽度 2.0
marker 标记，参照三级标题 marker
point 单独点，参见 point
pointInterval
如果序列中没有给出各点的 x 值，pointInterval 定义了一
个 x 值的时间间隔。
1.0
pointPlacement 可能值:null,”on”,”between” null
pointStart
如果序列没有给各个点 x 值，pointStart 定义了从哪一个
值开
0.0
selected 在序列初始化时是否选中 false
shadow 图表线的阴影 true
showCheckbox 如果是 true，将会在图例项中出现复选框允许选择序列 false
showInLegend 是否显示部分序列或全部序列的类型在图例中 true
stacking 在每个序列顶端是否叠加各个序列的值 null
states 参见 states
stickyTracking
鼠标事件的黏连追踪。为 true 时显示提示文本框，false 不
显示。
true
threshold
Y 轴的值，作为区域图的基本值，以区分高于阈值或低于阈
值
0.0
tooltip
一个可配置对象，对于可选渲染的各个序列的提示的配置对
象。属性继承自 tooltip
{}
trackByArea
是否用整个区域或者是仅仅是先来相应 mouseover 的提
示或者其他鼠标事件
false
turboThreshold
当序列包含一个数据数组的长度超过了 turboThreshold，
只有一维数组中的数据或者二维数组中的 x 和 y 的值被允
许
1000.0
visible 设置序列初始化的可见性 true
zIndex 定义序列的 Z 指数 null
13-2-1：dataLabels 数据标签
参数 描述 默认值
align 数据标签的水平对齐方式 center
backgroundColor数据标签的背景色 null
borderColor 数据标签的边框色 null
borderRadius 数据标签的边框圆角半径 0.0
borderWidth 数据标签的边框宽度 0.0
color 数据标签内文本的颜色 null
crop 是否隐藏超出绘图区域外的数据标签 true
enabled 是否启用数据标签 false
formatter 回调 Javascript 函数格式化数据标签 null
overflow 如何处理横坐标上的溢出的标签 null
padding
当 borderWidth 或 backgroundColor 被设置的时候，这是框
内的边距
2.0
rotation 文本旋转角度 0.0
shadow 标签框的阴影。 false
style 标签的样式 null
useHTML 是否用 HTML 渲染标签 false
verticalAlign 标签的垂直排列 null
x 相对于点的 x 偏移量 0.0
y 相对于点的 y 偏移量 -6.0
zIndex 数据标签的 Z 索引 6
13-2-2：events 事件
参数 描述 默认值
checkboxClick 当图例中序列名称后的复选框被点击时触发 null
click 单击事件，序列被单击时触发 null
hide
序列在图表生成后隐藏时触发，无论是点击图例项隐藏还是
调用.hide()
null
legendItemClick
当序列所属图例项目被单击时触发。默认动作是切换序列的
可见性
null
mouseOut 当鼠标离开图表时触发 null
mouseOver 当鼠标放在图表上时触发 null
show
当图表生成时间以后当序列显示的时候触发，无论是点击图
例中的项或者调用.show()
null
13-2-3：marker 标记
属性 描述 默认值
enabled 启用或禁用点标记 true
fillColor 点标记的填充颜色 null
lineColor 点标记的外边框线的颜色 #FFFFFF
lineWidth 点标记的外边框线的宽度 0.0
radius 点标记的半径 0.0
states 状态，参加四级标题 states
symbol 为标记预先定义的形状或标志
13-2-3-1：states 状态:
参数 描述 默认值
hover 参见 hover
Select 参见 select
13-2-3-1-1：hover 鼠标覆盖状态
参数 描述 默认值
enabled 启用或禁用点标记的鼠标滑过状态 true
fillColor 点标记的填充颜色 null
lineColor 点标记的外边框线的颜色 #FFFFFF
lineWidth 点标记的外边框线的宽度 0.0
radius 点标记的半径 null
13-2-3-1-2：select 选中状态
参数 描述 默认值
enabled 启用或禁用点标记的选中状态 true
fillColor 点标记的填充颜色 null
lineColor 点标记的外边框线的颜色 #FFFFFF
lineWidth 点标记的外边框线的宽度 0.0
radius 点标记的半径 null
13-2-4：point 单独的点
参数 描述 默认值
events 单个点的事件，参见 events
13-2-4-1 ：单个点的events事件:
参数 描述 默认值
click 当点被单击时触发 null
mouseOut 当鼠标离开区域去接近点的时候触发 null
mouseOver当鼠标进入区域图接近点的时候触发 null
remove 当鼠标进入区域图接近点的时候触发 null
select 当点被通过编程选中或者是单击点选中时触发 null
unselect 当点被通过编程不被选中或者是单击点不被选中时触发。 null
update 当点被通过.update()方法被程序更新时触发 null
13-3.arearange 区域排列图
各属性参照area 区域图，新增属性如下
dataLabels 中新增的属性：
参数 描述 默认值
xHigh 最高的数据标签相对于点值的 x 偏移量0.0
xLow 最低的数据标签相对于点值的 x 偏移量0.0
yHigh 最高的数据标签相对于点值的 y 偏移量-6.0
yLow 最低的数据标签相对于点值的 y 偏移量16.0
13-4.areaspline区域曲线图
各属性参照area 区域图
13-5.areasplinerange
参照区域排列图 arearange
13-6.bar 条状图
未详细描述的，参照区域图
参数 描述 默认值
allowPointSelect 是否允许通过点击标签而选中标签 false
animation 当一个序列不显示时，是否显示动画 true
borderColor 每个柱状和条状的边框颜色 #FFFFFF
borderRadius 每个柱状和条状的边框圆角半径 0.0
borderWidth 每个柱状或条状的边框的宽度 1.0
color 主要颜色或者是序列颜色 null
colorByPoint
自动从 options.colors 数组中计算点颜色时，这个选项决
定图表应该接受每一个序列的颜色还是接受每一个点的
颜色
false
cropThreshold 处理阈值 50.0
cursor 光标 null
dataLabels 数据标签。参见区域图二级标题 datalabels
enableMouseTracking 启用或禁用鼠标跟踪一个特定的序列 true
events 事件，参见区域图二级标题 events
groupPadding 每一个组之间的间隔 padding，以 x 轴为单位 0.2
grouping 是否分组无堆栈的列让他们独立渲染 true
id 序列的 id null
minPointLength 柱状图的最小高度或者条状图的最小宽度。 0.0
events 事件，参见区域图二级标题 events
pointInterval
如果序列中没有给出各点的 x 值，pointInterval 定义了一
个 x 值的时间间隔。
1.0
pointPadding 每个柱状或条状之间的间隔 0.1
pointPlacement 可能值:null,”on”,”between” null
pointRange 每一个点 X 轴有效量程 null
pointStart
如果序列没有给各个点 x 值，pointStart 定义了从哪一个
值开
0.0
pointWidth 每个列或条状的像素宽度 null
selected 在序列初始化时是否选中 false
shadow 图表线的阴影 true
showCheckbox 如果是 true，将会在图例项中出现复选框允许选择序列 false
showInLegend 是否显示部分序列或全部序列的类型在图例中 true
stacking 在每个序列顶端是否叠加各个序列的值 null
states 参见区域图 states
stickyTracking
鼠标事件的黏连追踪。为 true 时显示提示文本框，false
不显示。
true
tooltip
一个可配置对象，对于可选渲染的各个序列的提示的配置
对象。属性继承自 tooltip
{}
turboThreshold
当序列包含一个数据数组的长度超过了
turboThreshold，只有一维数组中的数据或者二维数组
中的 x 和 y 的值被允许
1000.0
visible 设置序列初始化的可见性 true
zIndex 定义序列的 Z 指数 null
13-7：column 柱状图
参照bar 条状图
13-8 ：columnrange柱状排列图
参照bar 条状图
13-9:gauge 测量图
13-9-1:说明
测量图需要 highcharts-more.js 的支持
13-9-2: 属性
参数 描述 默认值
animation 动画 true
color 主要颜色或序列颜色 null
cursor 光标 null
dataLabels 同bar，参见二级标题 datalabels
dial 刻度盘，参见 dial
enableMouseTracking 启用或禁用鼠标跟踪一个特定的序列 true
events 事件，参见二级标题 events
id 序列的 id null
pivot 支点，参见 pivot
point 同area，参见 point
selected 在序列初始化时是否选中 false
showCheckbox 如果是 true，将会在图例项中出现复选框允许选择序列 false
showInLegend 是否显示部分序列或全部序列的类型在图例中 null
states 参见 states
stickyTracking
鼠标事件的黏连追踪。为 true 时显示提示文本框，false
不显示。
true
tooltip
一个可配置对象，对于可选渲染的各个序列的提示的配
置对象。属性继承自 tooltip
{}
visible 设置序列初始化的可见性 true
zIndex 定义序列的 Z 指数 null
13-9-2-1:dial 拨号盘选项
参数 描述 默认值
backgroundColor测量图刻度盘的背景色或填充色 black
baseLength 刻度盘基座的长度，相对于整个刻度盘的半径或长度 70%
baseWidth 测量刻度盘基座的宽度 3.0
borderColor 刻度盘边框线的颜色。 silver
borderWidth 刻度盘的边框宽度 0.0
radius 刻度盘的半径 80%
rearLength 号盘后侧的长度，支点另一侧的延伸部分。相对于刻度盘的长度 10%
topWidth 刻度盘上部的宽度 1.0
13-9-2-2:pivot 支点选项
参数 描述 默认值
backgroundColor枢轴的背景色或填充色 black
borderColor 枢轴边框的颜色 silver
borderWidth 枢轴边框的宽度 0.0
radius 枢轴的半径 5.0
13-10: 饼图
13-10-1:属性
参数 描述 默认值
allowPointSelect 点击标签时允许序列的点被选择 false
animation 动画 true
borderColor 边框颜色 #FFFFFF
borderWidth 边框宽度 1.0
center 饼图的中心相对于绘图区。可以是百分比或者是像素值
color 主要颜色或序列的颜色 null
cursor 光标 null
dataLabels 参见 dataLabels
enableMouseTracking 用或禁用鼠标跟踪一个特定的序列 true
events 事件，参见二级标题 events
id 序列的 id null
ignoreHiddenPoint 是否忽略隐藏的点 false
innerSize 饼图内部的直径大小。如果是一个大于 0 的尺寸，会渲染出 0.0
一个圆环。
lineWidth 图表基线条的宽度 2.0
marker 标记，参照二级标题 marker
point 单独点，参见 point
pointPlacement 可能值:null,”on”,”between” null
selected 在序列初始化时是否选中 false
shadow 图表线的阴影 true
showInLegend 是否显示部分序列或全部序列的类型在图例中 false
size 饼图的直径，相对于绘图区。可以是百分比或者像素值。 75%
slicedOffset 当饼图的一块移出饼图中心时，应该移动多少像素 10.0
startAngle 饼图块开始的角度，0 是上边，90 是右边。 0
states 参见 states
stickyTracking
鼠标事件的黏连追踪。为 true 时显示提示文本框，false 不
显示。
true
tooltip
一个可配置对象，对于可选渲染的各个序列的提示的配置对
象。属性继承自 tooltip
{}
visible 设置序列初始化的可见性 true
zIndex 定义序列的 Z 指数 null
13-10-2:dataLable 数据标签
参数 描述 默认值
backgroundColor 数据标签的背景色 null
borderColor 数据标签的边框色 null
borderRadius 数据标签的边框圆角半径 0.0
borderWidth 数据标签的边框宽度 0.0
color 数据标签内文本的颜色 null
connectorColor 数据标签和饼图各块的连接线的颜色 {point.color}
connectorPadding 数据标签到连接线的距离 5.0
connectorWidth 数据标签和饼图块之间的连接线的宽度 1.0
crop 是否隐藏落在绘图区域外的数据标签 true
distance 数据标签到饼图边缘的距离 30.0
enabled 是否启用数据标签 true
formatter 回调 Javascript 函数格式化数据标签 null
overflow 如何处理横坐标上的溢出的标签 null
padding
当 borderWidth 或 backgroundColor 被设置的时候，
这是框内的边距
2.0
rotation 文本旋转角度 0.0
shadow 标签框的阴影。 false
softConnector 是否把连接线作为一个软弧线或者锐利的线来渲染 true
style 标签的样式 null
useHTML 是否用 HTML 渲染标签 false
verticalAlign 标签的垂直排列 null
x 相对于点的 x 偏移量 0.0
y 相对于点的 y 偏移量 -6.0
zIndex 数据标签的 Z 索引 6
13-11 其他图形
其他图形，如直线图 line，曲线图 spline，散点图 scatter，序列图 series 等图形参照区域
图area
13-11-1：Highcharts Stock 中 dataGrouping
属性 描述 默认值
approximation average
dateTimeLabelFormats
enabled 启用或禁用数据分组。 true
forced
groupPixelWidth
smoothed
units
highcharts的中文api以及用法。
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。