gwt - GWT highcharts 在布局面板中自动调整大小（宽度和高度）

Question

当您在 DockLayoutPanel 的中心区域（在 RootLayoutPanel 内）打开图表时，第一次呈现图表时（可能在 onModuleLoad 期间）图表没有正确的高度/宽度。该图表采用 RootLayoutPanel 的大小而不是中心区域的大小。

当您调整浏览器窗口的大小时，图表会正确调整大小。有谁知道如何解决这个问题？

@Override    
public void onModuleLoad()    
{
  RootLayoutPanel rootPanel = RootLayoutPanel.get();
  Chart chart = createChart();
  chart.setWidth100();
  chart.setHeight100();

  DockLayoutPanel dock1 = new DockLayoutPanel(Unit.PX);

  SimpleLayoutPanel slp1 = new SimpleLayoutPanel();
  slp1.getElement().getStyle().setBackgroundColor("blue");

  SimpleLayoutPanel slp2 = new SimpleLayoutPanel();
  slp2.getElement().getStyle().setBackgroundColor("yellow");

  SimpleLayoutPanel slp3 = new SimpleLayoutPanel();
  slp3.getElement().getStyle().setBackgroundColor("red");

  SimpleLayoutPanel slp4 = new SimpleLayoutPanel();
  slp4.getElement().getStyle().setBackgroundColor("green");

  dock1.addNorth(slp1, 50);
  // dock1.addSouth(slp3, 50);
  dock1.addWest(slp2, 50);
  // dock1.addEast(slp4, 50);

  dock1.add(chart);
  rootPanel.add(dock1);
}

对于我试过的信息

 chart.redraw();
 rootPanel.forceLayout();

但这并没有改善情况

Github 项目示例：https ://github.com/mycom-int/gwthighcharts

Answer 1

The only sloution I found so far is to use a scheduler after the dock is added to rootpanel

      Scheduler scheduler = Scheduler.get();
      scheduler.scheduleDeferred(new ScheduledCommand()
      {

         @Override
         public void execute()
         {
            chart.setSizeToMatchContainer();
         }
      });

Answer 2

Ronan Quillevere 很好地描述了该解决方案，可在他提供的链接 ( https://github.com/mycom-int/gwthighcharts ) 中找到该解决方案。但是我想指出的是，他作为辅助容器提供的 ChartSimpleLayoutPanel 必须添加到实现 RequiresResize 接口的容器中。这是确保每次调整浏览器窗口大小时调用 ChartSimpleLayoutPanel 的 onResize() 方法以提供适当的图表大小调整的强制性要求。

举个明确的例子，如果容器是使用 uibinder 实现的页面，则该页面必须扩展 ResizeComposite 类而不是 Composite 类。另一个可能有用的提示是，您的容器不得包含在 FlowPanel 中，因为 FlowPanel 破坏了 RequiresResize 机制。

希望这可以帮助。

Answer 3

另一种选择是扩展 Chart 类并实现 RequiresResize。在 onResize 方法中调度 setSizeToMatchContainer()。