Question

要求是：
1.＆＃34;省略号＆＃34;视觉效果＆＃34; ...＆＃34;对于溢出的传奇项目＆＃39;文本。
2.调整大小后，图例项宽度应根据新容器大小进行调整。意味着如果图例项目有文本＆＃34; blahblahblahblah＆＃34;，并且在调整大小后，图表容器变小并且没有足够的空间来显示全文，它应该显示＆＃34; blahblah ...＆＃34 ;

我通过给图例itemWidth赋予一个固定的宽度（以像素为单位）来找出第一个要求，并将textOverFlow设置为＆＃34;省略号＆＃34;：

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

在您的情况下，我建议添加一个窗口.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/

我希望这对你有所帮助。

在Highcharts中，如何在图例项宽度调整后重绘图表？

1 个答案: