Vaadin 图表没有用完正确的宽度

如何解决Vaadin 图表没有用完正确的宽度

在 Vaadin 14.6.1 中，我创建了一个带有 2 个图表（和其他一些东西）的水平布局。图表没有用完正确的宽度——它们似乎没有在正确的宽度上“拾取”（见下面的截图）。我将宽度设置为 100% 等。此外，如果我使用更简单的组件（例如标签）而不是图表（来自 Highcharts），这个问题就会消失。我以前遇到过类似的问题，但在更复杂的设置中（例如，用户调整拆分布局并且底层图表不调整大小）。但在这种情况下，这是一个更加合理直接的场景（即用户无需调整任何布局的宽度），但 Vaadin 似乎没有选择正确的宽度，至少在使用图表时是这样。这是一个已知的或可重现的问题吗？如果是这样，有什么解决方法吗？

解决方法

图表在某些布局中确实表现不佳。我注意到两个案例。另一个是 Board 组件，其中的解决方法只是将 Chart 包裹在 Div 中，即

Div div = new Div();
div.add(chart);
// and then add div to Board

SplitLayout 更棘手。移动拆分器后，您需要调用 Chart 进行回流。类似下面的内容会找到所有图表并强制它们重新绘制。

splitLayout.addSplitterDragendListener(event -> {
    getUI().ifPresent(ui -> ui.getPage().executeJs(
        "Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});

请注意，如果您只有一个图表或方便地引用图表实例，您可以这样做

chart.getElement().executeJs("$0.__reflow();",chart.getElement());