提示框的设置，可以在配置中直接设置。也可以在每个数据列中单独设置。每个数据列中的提示框设置可能不同
提示框外观
提示框常用的外观配置
tooltip: {
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3,
shadow: true,
animation: true,
style: { // 文字样式
color: '',
fontSize: '',
fontWeight: '',
fontFamily: ''
}
}
提示框内容
格式化函数
-
formatter数据提示框格式化函数。this指的是数据点对象，this上有很多常用的属性，文档上有 -
pointFormatter数据提示框单个点的格式化函数。类似于formatter函数，但是更灵活
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
}
格式化字符串
- headerFormat,pointFormat,footerFormat。适用于简单内容格式化，默认是都是html字符串。变量使用的形式是
{point.y}等
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
}
时间格式化
在时间图表中，使用方式
xDateFormat中使用%Y-%m-%d
html 内容
- 在格式化字符串中，使用的html元素有限
b/i/br/strong/em/span - 使用
tooltip.useHTML = true开启HTML模式后，可以给提示框添加 链接，图片，表格等html元素
值得前缀，后缀及小数点
可以对整个图表进行设置，也可以在数据列中单独设置
tooltip: {
valuePrefix: '￥', // 前缀
valueSuffix: '元', // 后缀
valueDecimals: 2 // 小数点
}
共享提示框
多个数据列的图表中，常常需要对比，因此将多个数据列的相同分类同时展示在提示框中也是非常常见的需求
tooltip.shared
其他特性
十字准星
- 改设置，在
tooltip下。有以下三种配置方式
crosshairs: true // 启用竖直方向准星线
crosshairs: [true, true] // 同时启用竖直及水平准星线
crosshairs: [{ // 设置准星线样式
width: 3,
color: 'green'
}, {
width: 1,
color: "#006cee",
dashStyle: 'longdashdot',
zIndex: 100
}]
固定位置显示提示框
-
tooltip.positioner可以固定提示框,相对于图表左上角
positioner: function() {
return {
x: 60,
y: 80
}
}
鼠标行为
-
stickyTracking设置鼠标在点附近就触发，默认是true -
hideDelay提示框隐藏延迟时间
