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可以改变文字与边框的位置关系，值越大距离边框越远，这个设置有一个问题就是当设置图例有换行时会出现单个图例项之间的距离就是上面设置的值，另外经过测试这个方法不能解决上面的问题。

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

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

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