在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/

希望对您有帮助。