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

【问题标题】：GWT highcharts auto resize (width and height) in layout panelGWT highcharts 在布局面板中自动调整大小（宽度和高度）
【发布时间】：2013-11-06 08:21:30
【问题描述】：

当您在 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

【问题讨论】：

使用 BaseChart.setSize() 或 BaseChart.setSizeToMatchContainer() 根据容器的大小来适应图表。确保容器实现ProvidesResize

标签： gwt highcharts gwt-highcharts

【解决方案1】：

到目前为止，我发现的唯一解决方案是在将扩展坞添加到根面板后使用调度程序

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

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

【讨论】：

这样解决了初始大小的问题，但是当你调整浏览器窗口的大小时，图表的大小就卡在了初始大小上。

【解决方案2】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

我按照建议做了。我创建了一个扩展 Chart 并实现 RequiresResize 接口的 MyHighChart 类。我重写了在内部调用 setSizeToMatchContainer() 的 onResize() 方法，但由于某些原因，框架永远不会调用 onResize() 方法。你知道为什么吗？结果是，当程序启动时，图表正确显示（由于上述 scheduleDeferred 技术），但每次调整浏览器窗口大小时，不会调用 onResize() 方法，因此图表的大小永远不会更新，并且卡在初始大小上。请帮忙。