0
私はGWT（バージョン2.7）とGoogle Charts JavaScript APIを使って、GWTアプリケーション内で一連のチャートを描画しています。GWT Googleグラフは成長するが縮小しない
私はスクロールパネルに複数のグラフを表示しようとしていますが、右側にデータセクションがあります。データセクションは固定幅で、チャートを含むスクロールパネルは残りのウィンドウ幅を占める必要があります。ウィンドウサイズが変わると、グラフのサイズが変わるはずです。ここで絵です：
私は、これは主に取り組んでいます。グラフのサイズが大きくなるにつれて、グラフのサイズは大きくなりますが、ですが、ウィンドウのサイズを小さくするとグラフの領域は縮小しません。
は私が成長し、ウィンドウのサイズに合わせて縮小するグラフ領域をしたいと思います。成長している部分は機能しますが、収縮する部分は機能しません。
はここで例のコードです：
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ファイルです。私は親DockLayoutPanelのサイズが減少した場合でもScrollPanelは、そのサイズを小さくすることはありませんされていることを集める
<!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>
：ここで注目すべき唯一のことは、私がheadセクション内のJavaScript API、Googleのチャートを含むだということです。 チャートがウィンドウのサイズを尊重し続けることを保証するにはどうしたらいいですか？
ReziseHandlerでチャートを表示する実際の幅を読み取った場合、パラメータを 'drawChart'関数に渡してから、グラフのオプションに幅を指定してください。 –
@HenrikAronsson問題は本当にチャートではなく、チャートが描かれているコンポーネントです。'ScrollPanel'が大きくなり、' VerticalPanel'がその幅の '100％'をとり、チャートが描画される 'SimplePanels'がその' 100％ 'を占めます。それらはすべて正しいサイズです。問題は、サイズが小さくなるにつれて '100％'は何も変わらないということです。 –