问题:
最近用Highcharts显示很多条数据时,因为tooltip提示框设置了shared为true,使提示框高度大于表格高度,导致提示框内容显示不全。(如下图)
经查询API文档,发现可以通过设置tooltip的useHTML属性和formatter属性来自定义提示框格式来解决此问题。
解决方案:
这里主要贴一下tooltip的设置,更详细的代码可以点击上面的在线调试。
tooltip:{ shared:true, useHTML: true, formatter: function(){ let tmp = ''; let length = this.points.length;//数据条数,this.points获取的是当前x轴刻度上的数据信息 let rowCount = 10;//一列允许的最大行数 let count = parseInt(length / rowCount) + 1;//列数 tmp += '<table>'; for (let i = 0; i < 10; i++) { tmp += '<tr>'; for (let j = 0; j < count && i * count + j < length; j++) { let it = this.points[i + j * count]; 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标签,从而可以使用表格来使多列数据更整齐。
结果: