highcharts图例文字显示错位的问题解决

最新推荐文章于 2023-03-13 19:13:44 发布

「已注销」

最新推荐文章于 2023-03-13 19:13:44 发布

阅读量2.1k

点赞数

分类专栏： highcharts 文章标签：图表 highcharts

本文链接：https://blog.csdn.net/Juno1212/article/details/79810484

版权

本文介绍了在使用Highcharts时遇到的图例文字显示错位问题。问题表现为修改图例文字大小后，文字压在边框上。尝试了设置`itemMarginTop`或`itemMarginBottom`未能解决问题，最终通过分析错误代码，发现需要调整图例项的`transform`属性。通过动态更新图例项的样式成功解决了文字错位问题，强调了解决问题过程中思维灵活性的重要性。

摘要由CSDN通过智能技术生成

问题描述：带坐标轴的图表修改图例的文字大小后，图例文字显示错位。为了方便查看区别，给图例添加边框色，字体变大时文字压在上边框，字体压在下边框，错误表现如图所示：
这里写图片描述
代码：

<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