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值到圖例項
}

驗證代碼，錯誤問題已被解決！

總結：一開始發現這個問題，沒有想到要對比正常顯示的代碼部分，還與同事一起找這個原因，後來終於找到了問題所在，卻不會改。經過幾番嘗試最後終於解決了這個問題，遇到問題思維有點太固化了，繼續加油吧。