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

到目前为止，我发现的唯一一个问题是在将扩展坞添加到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（）。

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

3 个答案: