我们应该感谢相遇,无论结局是喜是悲....
NVD3.js 中 图表说明(legend) 中文字符重叠 被图标遮住
  • 首页 > IT技术
  • 作者:起点终站
  • 2018年12月21日 10:06 星期五
  • 浏览:5720
  • 字号:
  • 评论:0
  • 项目中使用nvd3发现:在手机上显示的中文图例有一部分被盖住了,如下图右上角


    查找原因发现

    <g class="nv-series" transform="translate(0,5)">现金余额图例代码</g>
    
    <g class="nv-series" transform="translate(52,5)">费用余额图例代码</g>


    如果将费用余额图例代码 translate(52,5)改成 translate(62,5) ;即将图形向右变换移动,即可不遮住

    调试发现代码出现在nvd3下的legend.js中,154行左右:

    series
          .attr('transform', function(d, i) {
          return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * 20) + ')';
    });
    


    继续跟踪查找xPositions[i % seriesPerRow]里数据的来源

    中间省略过程(nvd3把每个图例的长度计算好后,加上左侧circle圆形图标的距离,作为每个图例的长度,来控制图例的位置)

    最终在utils.js中111行发现答案

    nv.utils.calcApproxTextWidth = function (svgTextElem) {
        if (typeof svgTextElem.style === 'function'
            && typeof svgTextElem.text === 'function') {
            var fontSize = parseInt(svgTextElem.style("font-size").replace("px",""));
            var textLength = svgTextElem.text().length;
           
            return textLength * fontSize * 0.5;
        }
        return 0;
    };


    注意看这个fontSize * 0.5

    此方法用来计算字符的宽度,比如说“abcd” 如果当前字体样式大小是12px,那么最终的字符串宽度就是 4*12*0.5 = 24
    但是中文字符宽度明显大于英文字符宽度啊(对比下下面两行),所以就出现了图中的图例被盖住的情况。

    ======================

    文字宽度示例:

    文字widthtest:

    ======================

    果断改成0.8

    刷新页面试验


    问题解决!!!
    ---------------------
    作者:风知
    来源:CSDN
    原文:https://blog.csdn.net/song369585552/article/details/22799641


      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: NVD3.js 中 图表说明(legend) 中文字符重叠 被图标遮住
    本文地址:https://blog.hellozwh.com/?post=419
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2016-2019 起点终站 闽ICP备16011094号-1