Question

自动图例标题的样式为text-overflow: ellipsis;，但我需要显示图例标题中的所有文字。所以，我需要设置text-overflow: clip;。当用户更改窗口大小时，图例项目彼此重叠或
移到图表容器外面。

您可以在此处重现：https://jsfiddle.net/6ybv9kjx/6/ 要重现，您应该在图表初始化时更改窗口大小。

此外，图例项显示为特定规则。如果图例项目中的所有文本未与前一项目放在一行中，则项目将移至下一行。我需要，那个传奇项目可以打破单词。有可能吗？

Answer 1

useHtml知道problem。

现在，如果你真的不需要，只需禁用它。

Fiddle

Answer 2

您可以通过在调整浏览器窗口大小时重新绘制图表来解决此问题。这样，图例元素将根据窗口的新宽度进行渲染。

将图表选项分配给变量，每次调整窗口大小时都会调用该变量。

var thisChartOptions = {
    /* your options go here */
};

/* draw chart when the browser window is loaded or resized 
   (see https://stackoverflow.com/a/1974797/2596103) */

$(window).on('resize', function() {
    Highcharts.chart('container', thisChartOptions);
}).resize();

你可以在这个小提琴中看到这个：https://jsfiddle.net/brightmatrix/6ybv9kjx/43/

我尝试使用legend.update()函数（请参阅https://api.highcharts.com/class-reference/Highcharts.Legend#update），但是当窗口变小时，图例项会相互重叠。

更改窗口大小时重叠的Highchart图例

2 个答案: