Vaadin 图表未使用正确的宽度

【问题标题】：Vaadin chart not using up correct widthVaadin 图表未使用正确的宽度
【发布时间】：2021-06-07 18:34:34
【问题描述】：

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

【问题讨论】：

标签： vaadin vaadin-flow vaadin-charts

【解决方案1】：

图表在某些布局中确实表现不佳。我注意到两个案例。另一个是 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());

【讨论】：