我的 GWT 应用程序出现问题，直到用户与窗口进行某种交互（例如，在屏幕上移动鼠标或按下按钮）后才会显示 Google 可视化图表。这很好，只是假设图表显示为用户看到的第一件事，并且由于它是在移动设备上看到的，因此他们很可能不会看到图表，因为他们的第一次交互将是单击一个按钮隐藏图表以显示其他信息。
使用可视化代码页面上的“入门教程”，图表可以立即正常加载（一旦进行了一些细微的更改，就可以修复稍微过时的教程中的问题）。经过反复试验以找出我的代码和导致问题的示例代码之间的差异，我发现它正在发生，因为我的代码使用的是较新的布局面板，而不是 GWT 中的常规面板。
下面的代码是更改的工作教程代码，因此它使用 RootLayoutPanel.get() 而不是 RootPanel.get()。这样，在您单击重新加载页面之前，图表不会加载，然后您可以在页面重新加载之前看到图表的瞬间。这应该可以使用以下代码轻松测试。要让图表始终显示，只需将 RootLayoutPanel.get() 更改为 RootPanel.get()。
我的应用程序中的某些内容允许在用户交互后加载图表（我不确定是什么）。但是，布局面板肯定是问题所在，就好像我将其更改为常规面板一样，它可以正常工作。不幸的是，我的整个应用程序都是使用布局面板构建的。
发生了什么事，我如何才能使用布局面板从一开始就显示图表？非常感谢！
package com.test.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.Selection;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.visualizations.corechart.PieChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;
public class SimpleViz implements EntryPoint {
public void onModuleLoad() {
// Create a callback to be called when the visualization API
// has been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
LayoutPanel panel = RootLayoutPanel.get();
// Create a pie chart visualization.
PieChart pie = new PieChart(createTable(), createOptions());
pie.addSelectHandler(createSelectHandler(pie));
panel.add(pie);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
}
private Options createOptions() {
Options options = Options.create();
options.setWidth(400);
options.setHeight(240);
options.setTitle("My Daily Activities");
return options;
}
private SelectHandler createSelectHandler(final PieChart chart) {
return new SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
String message = "";
// May be multiple selections.
JsArray<Selection> selections = chart.getSelections();
for (int i = 0; i < selections.length(); i++) {
// add a new line for each selection
message += i == 0 ? "" : "\n";
Selection selection = selections.get(i);
if (selection.isCell()) {
// isCell() returns true if a cell has been selected.
// getRow() returns the row number of the selected cell.
int row = selection.getRow();
// getColumn() returns the column number of the selected cell.
int column = selection.getColumn();
message += "cell " + row + ":" + column + " selected";
} else if (selection.isRow()) {
// isRow() returns true if an entire row has been selected.
// getRow() returns the row number of the selected row.
int row = selection.getRow();
message += "row " + row + " selected";
} else {
// unreachable
message += "Pie chart selections should be either row selections or cell selections.";
message += " Other visualizations support column selections as well.";
}
}
Window.alert(message);
}
};
}
private AbstractDataTable createTable() {
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Task");
data.addColumn(ColumnType.NUMBER, "Hours per Day");
data.addRows(2);
data.setValue(0, 0, "Work");
data.setValue(0, 1, 14);
data.setValue(1, 0, "Sleep");
data.setValue(1, 1, 10);
return data;
}
}