您的位置:首页 > 运维架构

highcharts报表 三:plotOptions 针对所有图表有效的通用配置

2017-05-21 23:52 375 查看
数据列配置是针对所有数据列及某种数据列有效的通用配置。

plotOptions : {

// 数据列通用配置
series : {

// 允许数据列点击标记, 默认false
allowPointSelect : false

// 初始化动画
animation : true

color : 'red' // 数据列的颜色

数据标签
dataLabels : {
align : '' // 数据列的水平对齐方式
enabled : false //如何设置为true,数据列自动显示列的信息,默认false
backgroundColor : 'red' // 数据标签背景颜色
borderColor : 'red' // 数据标签边框颜色
borderWidth : 1 //数据标签边框宽度
borderRadius : 5 // 数据标签边框圆角
color : 'red' // 数据标签字体颜色
format : '{y}unit' // 数据标签显示内容格式化
formatter : function () {
// 数据标签内容格式化函数
}
padding : 5 // 数据标签的内边距
x: 0, // 坐标显示位置
y: -20 // y轴显示
}
showCheckBox : false // true显示checkbox框,默认false
events : {
// 隐藏数据列触发
hide : function () {}

// 显示数据列触发
show : function () {}

// 动画加载完毕触发
afterAnimate : function () {}

// checkbox选中事件
checkboxClick : function (){}

// 数据列点击事件
click : function () {}

// 禁止图列点击事件
legendItemClick : function () {return false}

// 鼠标划出数据列事件触发
mouseOut : function () {}

// 鼠标划入数据列事件触发
mouseOver : function () {}
},
keys : ['name', 'y', 'sliced', 'selected'] // 该参数指定了数据数组中每个元素对应的 key, 当另一个(data)当数组中第三个元素都为true时默认选中,突出显示['chrom', 192,true,true],

lineWidth : 1, // 数据列的线条宽度

linkedTo : ':previous' // 数据列关联,关联前一个数据列

// 数据点配置
marker : {

enabled : null// 默认null, 是否显示数据点标记
lineColor : '' // 数据点线条颜色
fillColor : '' // 数据点中心圆点颜色
height : number // 数据点高度
states : {
hover : {} // 鼠标经过数据点样式配置
}
radius : number // 指定数据点的大小
symbol : 'circle' // 默认圆点, 一般取默认值
}

negativeColor : '#ccc' // 指定数据列负值颜色,比如-1

// 数据点相关配置
point : {
events : {

// 点击数据点触发
click : function () {}

// 鼠标离开数据点触发事件
mouseOut : function () {

}

//  鼠标划入数据点触发事件
mouseOver : function () {

}

// 更新数据点触发
update : function () {

}

// 点击选中数据点时触发,必须allowPointSelect为true才有效
select : function () {

}

// 取消选中数据点触发
unselect : function () {

}

}
// 数据点间隔, 开始值
pointStart: Date.UTC(2010, 0, 1),

// 间隔一天
pointInterval: 24 * 3600 * 1000

// 间隔单位
pointIntervalUnit: 'month'

// 指定数据列初始的选中状态,如果设置了 showCheckbox 为 true 时,默认是:false.
selected: false

// 数据列阴影效果
shadow: true

// 是否显示CheckBox框, 默认false, 为true 时显示
showCheckbox : false

// 是否进行堆叠(堆叠顾名思义就是多跟数据列堆成一根), 默认不堆叠,是否开启堆叠,"normal"(普通堆叠) 和 "percent"(百分比堆叠
stacking : null

// 鼠标划过状态下的数据列配置
states : {
hover : {
//..............配置项
}
}

tooltip: {
xDateFormat: '%Y-%m-%d',
dateTimeLabelFormats.day
dateTimeLabelFormats: {
day: '%m-%d',
month: '%Y-%m'
},
shared: true

valueDecimals: 小数精确位数
valuePrefix: 值的前缀
valueSuffix: 值的后缀
},

// 数据列显示状态, 默认true, false为隐藏
visible : true

// 指定数据列的分区数组,可以理解为一条数据列可以配置多个颜色显示
zone : []

}

}
}

// 数值格式化百分比
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: