Question

我正在使用GWT（版本2.7）和Google Charts JavaScript API在GWT应用程序中绘制一系列图表。

我正在尝试在滚动面板中显示多个图表，右侧是数据部分。数据部分是固定宽度，包含图表的滚动面板应占用窗口宽度的其余部分。当窗口大小改变时，图表的大小应该改变。这是一张图片：

我有这个主要工作。随着我增加窗口大小，图表会增长，但随后我减小窗口大小时图表区域不会缩小！

我希望图表区域根据窗口的大小增长和缩小。现在，增长部分有效，但不是缩小部分。

以下是该示例的代码：

package com.example.gwtcharttest.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.VerticalPanel;


public class GwtChartTest implements EntryPoint {

    public void onModuleLoad() {

        final SimplePanel chartDivOne = new SimplePanel();
        chartDivOne.getElement().setId("chartDiv_1");
        chartDivOne.setHeight("300px");
        chartDivOne.setWidth("100%");

        final SimplePanel chartDivTwo = new SimplePanel();
        chartDivTwo.getElement().setId("chartDiv_2");
        chartDivTwo.setHeight("300px");
        chartDivTwo.setWidth("100%");

        final SimplePanel chartDivThree = new SimplePanel();
        chartDivThree.getElement().setId("chartDiv_3");
        chartDivThree.setHeight("300px");
        chartDivThree.setWidth("100%");

        VerticalPanel chartsPanel = new VerticalPanel();
        chartsPanel.setWidth("100%");
        chartsPanel.add(chartDivOne);
        chartsPanel.add(chartDivTwo);
        chartsPanel.add(chartDivThree);

        ScrollPanel chartsScrollPanel = new ScrollPanel(chartsPanel);

        DockLayoutPanel dlp = new DockLayoutPanel(Unit.PX);
        dlp.addEast(new Label("some data here"), 200);
        dlp.add(chartsScrollPanel);

        RootLayoutPanel.get().add(dlp);

        loadLibrary();

        Window.addResizeHandler(new ResizeHandler() {

            @Override
            public void onResize(ResizeEvent event) {
                drawChart("chartDiv_1");
                drawChart("chartDiv_2");
                drawChart("chartDiv_3");
            }
        });
    }

    private native void drawChart(String chartDivId)/*-{

          var data = $wnd.google.visualization.arrayToDataTable([
            ['City', '2010 Population',],
            ['New York City, NY', 8175000],
            ['Los Angeles, CA', 3792000],
            ['Chicago, IL', 2695000],
            ['Houston, TX', 2099000],
            ['Philadelphia, PA', 1526000]
          ]);

          var options = {
            title: 'Population of Largest U.S. Cities',

            hAxis: {
              title: 'Total Population',
              minValue: 0
            },
            vAxis: {
              title: 'City'
            }
          };

          var chart = new $wnd.google.visualization.ColumnChart($wnd.document.getElementById(chartDivId));
          chart.draw(data, options);
    }-*/;

    private native void loadLibrary()/*-{
        $wnd.google.charts.load('current', {
            packages : [ 'corechart' ]
        });
    }-*/;
}

这是html文件。这里唯一需要注意的是我在head部分中包含了Google Charts JavaScript API：

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="GwtChartTest.css">
    <title>GWT Chart Test</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" language="javascript" src="gwtcharttest/gwtcharttest.nocache.js"></script>
  </head>

  <body>
  </body>
</html>

我认为即使ScrollPanel的父级DockLayoutPanel缩小，<div ng-controller="wallPosts"> <div ng-repeat="post in posts"> <p>{{ post.title }}</p> </div> <div>也不会减小其大小。 我如何保证图表继续尊重窗口的大小，即使它减少了？

Answer 1

您可能需要将调用包装在Scheduler中绘制图表。它们是在Window＆gt;之前制作的。 DockLayoutPanel＆gt; ScrollPanel链有机会调整大小。

或者，如果您只支持现代浏览器，我建议您使用Flexbox布局模型，因为它使用本机浏览器重排而不是JavaScript，因此效率更高，更灵活（双关语）。

编辑：

解决方案是用FlowPanel替换VerticalPanel。

VerticalPanel扩展了CellPanel，它解析为HTML格式的表格。它具有与简单div不同的布局机制，并且通常应该避免，除非有非常具体的理由使用它并且没有基于CSS的解决方案可用。通常，我们应该尽可能地保持与浏览器本机布局机制（FlowPanel，HTMLPanel，CSS）的接近，以实现性能和获得可预测的一致行为。一旦混合使用本机和JS强制布局，您必须非常小心事件序列，因为JS代码所做的更改（例如，调整元素大小）可能会强制浏览器重新/重新渲染整个页面，这可能会通过在许多小部件（DockLayoutPanel，ScrollPanel等）中实现的ProvideResize / RequiresResize机制反过来导致更多JS更改

GWT谷歌图表增长但不缩减

1 个答案: