1

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

1

4

1 回答 1

4

图表在某些布局中确实表现不佳。我注意到两个案例。另一个是 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());
于 2021-06-08T05:23:19.493 回答