问题:
最近用Highcharts显示很多条数据时,因为tooltip提示框设置了shared为true,使提示框高度大于表格高度,导致提示框内容显示不全。(如下图)
经查询API文档,发现可以通过设置tooltip的useHTML属性和formatter属性来自定义提示框格式来解决此问题。
解决方案:
在线调试:https://jshare.com.cn/temp/tdGrX0
这里主要贴一下tooltip的设置,更详细的代码可以点击上面的在线调试。
tooltip:{
shared:true,
useHTML: true,
formatter: function(){
let tmp = '';
let length = this.points.length;//数据条数,this.points获取的是当前x轴刻度上的数据信息
let rowCount = 10;//一列允许的最大行数
let lineCount = parseInt(length / rowCount) + 1;//列数
tmp += '<table>';
for (let i = 0; i < rowCount; i++) {
tmp += '<tr>';
for (let j = 0; j < lineCount && j * rowCount + i < length; j++) {
let it = this.points[j * rowCount + i];
tmp += "<td style='padding-right: 20px'><span style='color:" + it.color + "'>● </span>" + it.series.name + ":<span style='font-weight: bold'>" + it.y + "</span></td>";
}
tmp += '</tr>';
}
tmp += '</table>';
return tmp;
}
},
注意:
最好设置tooltip的useHTML属性为true,因为Highcharts的提示框默认只支持部分HTML标签,且默认只支持修改字体相关的style属性。
使用useHTML属性可以设置提示框支持所有HTML标签,从而可以使用表格来使多列数据更整齐。
结果: