处理Highcharts数据过多导致的tooltip提示框数据显示不全问题

问题：

　　最近用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 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标签，从而可以使用表格来使多列数据更整齐。

结果：