• 处理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标签,从而可以使用表格来使多列数据更整齐。

    结果:

      

  • 相关阅读:
    ThinkPHP3.2 整合支付宝RSA加密方式
    代码风格规范
    Mac下安装composer
    MAC 下安装RabbitMQ
    Redis配置
    git 分支
    PHP常用数组操作方法汇总
    php 不用第三个变量 交换两个变量的值汇总
    PHP配置错误信息回报的等级
    Apache同一个IP上配置多域名
  • 原文地址:https://www.cnblogs.com/liumaowu/p/12206082.html
Copyright © 2020-2023  润新知