NVD3.js 中 图表说明(legend) 中文字符重叠 被图标遮住

项目中使用nvd3发现:在手机上显示的中文图例有一部分被盖住了,如下图右上角
但是中文字符宽度明显大于英文字符宽度啊(对比下下面两行),所以就出现了图中的图例被盖住的情况。
======================
文字宽度示例:
文字widthtest:
======================
果断改成0.8
刷新页面试验
查找原因发现
<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
版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
本文地址:https://blog.hellozwh.com/?post=419
版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。

