在Highcharts中，如何在調整圖例項目寬度后重繪圖表？

Question

要求是：
1.“省略號”視覺效果“ ...”，用於溢出的圖例項的文本。
2.調整大小后，圖例項的寬度應隨新的容器大小調整。 意味着如果圖例項具有文本“ blahblahblahblah”，並且在調整大小后，圖表容器會變小並且沒有足夠的空間來顯示全文，則應該顯示“ blahblah ...”。

我通過給圖例itemWidth提供一個固定的像素寬度來解決第一個要求，並將textOverFlow設置為“省略號”：

chartOptions.legend.itemStyle.width = $container.width() + "px";
chartOptions.legend.itemStyle.textOverflow = "ellipsis";

但是對於第二個要求，我將chart.legend.itemStyle.width更改為當前容器的寬度，並調用了chart.redraw() ，它並沒有真正重繪圖表。

`chart.legend.itemStyle.width = $container.width() + "px";
`chart.redraw()`

有什么辦法可以使用新的legend.itemStyle.width更新圖表？

Jsfiddle： https ：//jsfiddle.net/scottszb1987/z5qv1t80/

干杯

Answer 1

對於您的情況，我建議添加一個window .resize()事件，然后使用更新的選項生成圖表的新版本。 這樣，您的圖例大小將拉入container元素的新寬度。

// whenever the window is resized, destroy the chart and redraw it using updated options
$(window).resize(function() {
    chart.destroy();
    chart = new Highcharts.Chart(getChartOptions($("#container")));
});

這是您的小提琴的更新版本，其中包含以下更改： https : //jsfiddle.net/brightmatrix/z5qv1t80/5/

希望對您有幫助。