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

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



代码：

<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值到图例项
}

验证代码，错误问题已被解决！



总结：一开始发现这个问题，没有想到要对比正常显示的代码部分，还与同事一起找这个原因，后来终于找到了问题所在，却不会改。经过几番尝试最后终于解决了这个问题，遇到问题思维有点太固化了，继续加油吧。