Javascript GWT谷歌图表在增长，但不会'；收缩
我正在使用GWT（版本2.7）和在GWT应用程序中绘制一系列图表 我试图在一个滚动面板中显示多个图表，右边有一个数据部分。数据部分的宽度是固定的，包含图表的滚动面板应该占据窗口宽度的其余部分。当窗口大小更改时，图表的大小应该更改。这是一张照片： 我的这个基本上是有效的。当我增大窗口大小时，图表会增大，但是当我减小窗口大小时，图表区域不会缩小 我想图表区域的增长和缩小根据窗口的大小。现在，增长部分有效，但收缩部分无效 下面是示例的代码：Javascript GWT谷歌图表在增长，但不会'；收缩,javascript,java,gwt,google-visualization,Javascript,Java,Gwt,Google Visualization,我正在使用GWT（版本2.7）和在GWT应用程序中绘制一系列图表 我试图在一个滚动面板中显示多个图表，右边有一个数据部分。数据部分的宽度是固定的，包含图表的滚动面板应该占据窗口宽度的其余部分。当窗口大小更改时，图表的大小应该更改。这是一张照片： 我的这个基本上是有效的。当我增大窗口大小时，图表会增大，但是当我减小窗口大小时，图表区域不会缩小 我想图表区域的增长和缩小根据窗口的大小。现在，增长部分有效，但收缩部分无效 下面是示例的代码： package com.example.gwtchart
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' ]
});
}-*/;
}
标题中<!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>
GWT图表测试
我推测，
ScrollPanelDockLayoutPanelVerticalPanel扩展了CellPanel，它解析为HTML格式的表。它的布局机制不同于简单的
divVerticalPanel扩展了CellPanel，它解析为HTML格式的表。它的布局机制不同于简单的
divdrawChart滚动面板100%drawChart滚动面板垂直面板100%SimplePanels100%100%调度程序中看不到我希望有一个效果。flexbox似乎是html和css的东西，但我使用的是GWT。我真正的项目比这个示例项目大得多，我不能简单地用flexbox而不是GWT来重做布局。用FlowPanel替换VerticalPanel-这是一个好主意，不管这个问题如何。注意，不需要设置FlowPanel或Sim的宽度plePanel to 100%-默认情况下，所有div
元素占据所有可用宽度。我最近的所有应用程序都在GWT和flexbox中，我尽量避免使用各种布局面板。Google Daniel Kurka的视频解释了MGWT为什么使用flexbox模型而不使用布局面板-同样的逻辑适用于所有GWT项目。Switc兴至流动事务委员会