NVD3.js 中 图例 (legend) 中文字符 被图标遮住
来源:互联网 发布:云购开奖计算公式 编辑:程序博客网 时间:2024/04/26 20:57
项目中使用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
刷新页面试验
问题解决!!!
0 0
- NVD3.js 中 图例 (legend) 中文字符 被图标遮住
- legend图例
- Matlab中图例注释函数legend详解
- highcharts控制图标的图例legend不允许切换
- echarts之legend-改变图例的图标为自定义图片
- echarts之legend-改变图例的图标为自定义图片
- ggplot2--Legend(图例操作)
- HightChart图例(Legend)
- ggplot2-设置图例(legend)
- 显示图例(legend)
- echarts中图例legend和坐标系grid实现左右布局
- Echarts中legend图例太多与title重叠问题
- Arcgis 图例 esri.dijit.legend Legend widget
- ggplot2--legend图例的修改
- highcharts legend 饼图 图例位置
- ggplot2--legend图例的修改
- echarts 修改图例legend颜色
- 十一、基础教程-图例(Legend)
- JAVA的字符串拼接与性能
- TS
- Myeclipse8.5中svn插件安装方法总结
- 《黑马程序员》 使用阻塞队列实现同步通知
- FLV
- NVD3.js 中 图例 (legend) 中文字符 被图标遮住
- 智利地震威海地震尼玛又地震 地球最近很闹腾!
- 用科学方法研究工作生活平衡
- SharePoint Ribbon菜单ID总结
- C++编译器越界检查机制
- 自己创建sessionFactory与用spring中提供的sessionFactory的不同
- Android中通过pid获取app包名
- inputStream 、outputStream、String相互转化
- 在公司问上级问题的艺术