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

GWT highcharts在布局面板中自动调整大小(宽度和高度),gwt,highcharts,gwt-highcharts,Gwt,Highcharts,Gwt Highcharts,当您在RootLayoutPanel内的DockLayoutPanel的中心区域内打开图表时,第一次呈现图表时,可能是在onModuleLoad期间,图表的高度/宽度不正确。图表采用RootLayoutPanel的大小,而不是中心区域的大小 调整浏览器窗口的大小时,图表将正确调整大小。有人知道如何解决这个问题吗 @Override public void onModuleLoad() { RootLayoutPanel rootPanel = RootLayoutPanel.

当您在RootLayoutPanel内的DockLayoutPanel的中心区域内打开图表时,第一次呈现图表时,可能是在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项目示例:

到目前为止,我找到的唯一解决方案是在dock添加到rootpanel后使用调度器

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

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

另一个选项是扩展图表类并实现RequiresResize。在onResize方法schedule setSizeToMatchContainer.

中,Ronan Quillevere对解决方案进行了详细描述,并提供了链接。但是,我想指出,他作为助手容器提供的ChartSimpleLayoutPanel必须添加到实现RequiresResize接口的容器中。这是一项强制性要求,以确保在每次调整浏览器窗口的大小时调用ChartSimpleLayoutPanel的onResize方法来提供图表的适当大小调整

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


希望这有帮助。

这解决了初始大小的问题,但是当您调整浏览器窗口的大小时,图表的大小会停留在初始大小上。我按照建议做了。我创建了一个MyHighChart类,它扩展了Chart并实现了RequiresResize接口。我在内部重写了调用setSizeToMatchContainer的onResize方法,但由于某些原因,框架从未调用onResize方法。你知道为什么吗?结果是,当程序启动时,由于上面描述的scheduleDeferred技术,图表会正确显示,但每次调整浏览器窗口的大小时,都不会调用onResize方法,所以图表的大小永远不会更新,并停留在初始大小上。请提供帮助。请使用BaseChart.setSize或BaseChart.setSizeToMatchContainer根据容器大小调整图表。确保容器实现了providesize