项目中使用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
刷新页面试验
问题解决!!!