處理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標簽，從而可以使用表格來使多列數據更整齊。

結果：