highcharts图例文字显示错位的问题解决
2018-04-03 22:41
1571 查看
问题描述:带坐标轴的图表修改图例的文字大小后,图例文字显示错位。为了方便查看区别,给图例添加边框色,字体变大时文字压在上边框,字体压在下边框,错误表现如图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/04/4aa22b644f92bc953e4d113aca0d2c52)
代码:
经过与正常显示的代码做比较,正常情况下svg的图例text标签的y值是随字体大小而改变的,而错误的代码部分的y值显示的是初始化的值,一直不变,尝试从highcarts中文网站找资料修改。
尝试一:
设置itemMarginTop或itemMarginBottom可以改变文字与边框的位置关系,值越大距离边框越远,这个设置有一个问题就是当设置图例有换行时会出现单个图
4000
例项之间的距离就是上面设置的值,另外经过测试这个方法不能解决上面的问题。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/04/17adcc9082adbe1a039c0ad13b12308e)
尝试二:
在没有现有属性能够解决的情况下,考虑修改单个图例项的transform属性。分析调试错误的代码得到,字体与边框的差值为设置文字的大小与12的差,错误的代码在初始化的状态下是正常显示的,字体为12px,因此改变的值大小是以12为基准的。
设置字体的大小到图表的方法是update
方法一:
通过图例chart.legend更新的
方法二:
通过图表chart更新的方法,chart.update是通用方法,许多属性都可以用这个方法设置。
取到单个图例项的代码,设置新的值到图例项。“highcharts-legend-item”是单个图例项的类名。
验证代码,错误问题已被解决!
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/04/ea36dbd5ad5a556fdf339f61f3c4944c)
总结:一开始发现这个问题,没有想到要对比正常显示的代码部分,还与同事一起找这个原因,后来终于找到了问题所在,却不会改。经过几番尝试最后终于解决了这个问题,遇到问题思维有点太固化了,继续加油吧。
代码:
<g class="highcharts-legend" transform="translate(452,328)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" stroke="#ff0080" stroke-width="1" x="0.5" y="0.5" width="471" height="56" visibility="visible"></rect><g><g><g class="highcharts-legend-item highcharts-column-series highcharts-color-0 highcharts-series-0" transform="translate(8,3)"><text x="21" y="15" style="color:#333333;font-size:30px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>1800 年</tspan></text><rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point"></rect></g><g class="highcharts-legend-item highcharts-column-series highcharts-color-1 highcharts-series-1" transform="translate(166.765625,3)"><text x="21" y="15" style="color:#333333;font-size:30px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>1900 年</tspan></text><rect x="2" y="4" width="12" height="12" fill="#434348" rx="6" ry="6" class="highcharts-point"></rect></g><g class="highcharts-legend-item highcharts-column-series highcharts-color-2 highcharts-series-2" transform="translate(325.53125,3)"><text x="21" y="15" style="color:#333333;font-size:30px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>2008 年</tspan></text><rect x="2" y="4" width="12" height="12" fill="#90ed7d" rx="6" ry="6" class="highcharts-point"></rect></g></g></g></g>
经过与正常显示的代码做比较,正常情况下svg的图例text标签的y值是随字体大小而改变的,而错误的代码部分的y值显示的是初始化的值,一直不变,尝试从highcarts中文网站找资料修改。
尝试一:
设置itemMarginTop或itemMarginBottom可以改变文字与边框的位置关系,值越大距离边框越远,这个设置有一个问题就是当设置图例有换行时会出现单个图
4000
例项之间的距离就是上面设置的值,另外经过测试这个方法不能解决上面的问题。
legend: { itemMarginTop:30, itemMarginBottom: 5, borderWidth:1, itemStyle: { lineHeight: '14px' } },
尝试二:
在没有现有属性能够解决的情况下,考虑修改单个图例项的transform属性。分析调试错误的代码得到,字体与边框的差值为设置文字的大小与12的差,错误的代码在初始化的状态下是正常显示的,字体为12px,因此改变的值大小是以12为基准的。
设置字体的大小到图表的方法是update
方法一:
通过图例chart.legend更新的
chart.legend.update({itemStyle: { fontSize: 30 + "px" } });
方法二:
通过图表chart更新的方法,chart.update是通用方法,许多属性都可以用这个方法设置。
chart.update({legend:{itemStyle: { fontSize: 30 + "px" } }});
取到单个图例项的代码,设置新的值到图例项。“highcharts-legend-item”是单个图例项的类名。
var fontDiff = parseInt(30) - 12; //计算设置字体与基准12的差值 var items = $(".highcharts-legend-item", "#" + id); //获取当前图表包含的图例项 for (var i = 0; i < items.length; i++) { var legendVal = items[i].attributes.transform.value.split(/,/g); //获取单个图例项的transform值,并分组 var transX= legendVal[0].substring(legendVal[0].indexOf("(") + 1); //新的translate的x值 var transY = parseFloat(legendVal[1].substring(0, legendVal[1].indexOf(")")))+ fontDiff; //新的translate的y值 items[i].setAttribute("transform", "translate(" + transX + "," + transY + ")"); //设置新的transform值到图例项 }
验证代码,错误问题已被解决!
总结:一开始发现这个问题,没有想到要对比正常显示的代码部分,还与同事一起找这个原因,后来终于找到了问题所在,却不会改。经过几番尝试最后终于解决了这个问题,遇到问题思维有点太固化了,继续加油吧。
相关文章推荐
- 解决select选项内容过长,文字显示不全的问题
- wkhtmltopdf 将highcharts的页面转为pdf 图表加载不上问题 或者图标显示不全问题解决
- Echarts结合百度地图绘制散点图,toolpit显示位置错位偏移问题解决
- 解决TabContainer选项卡文字显示不全的问题
- python 2: 解决python中的plot函数的图例legend不能显示中文问题
- 自定义TextView解决超长文字显示的问题
- IE下textarea中font-size值很大时,文字不显示的问题的解决办法
- Ext2.2在IE6下菜单menu图标与文字重叠、错位的问题解决
- 微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号
- Android ListView滑动过程中图片显示重复错位闪烁问题解决
- [转]解决Linux下Firefox Flash文字乱码或不能显示的问题
- Android ListView滑动过程中图片显示重复错位闪烁问题解决
- 当对象内文本溢出时显示省略标记 使文字换了行,解决了把div表格撑的很大的问题
- Android设置大字体后文字被遮盖、显示补全问题解决
- 利用SmartUpload+servlet上传图片文字,上传显示图片,解决乱码问题
- 如何解决MathType中公式与文字错位的问题
- three.js 文字无法显示问题的解决
- 解决TextView富文本显示时emoj或图片和文字不对齐的问题
- vs2017 cshtml文件打开文字不显示语法颜色,都是黑色问题的解决
- Android解决TextView显示希伯来语时Scroll,文字消失的问题