我遇到了一个非常奇怪的问题，老实说，我不知道发生了什么...
我正在尝试在 GWT 项目中加载一个虚拟图表。虽然这工作得很好：
/**
* This is the entry point method.
*/
public void onModuleLoad() {
Window.enableScrolling(false);
Window.setMargin("0px");
RootLayoutPanel.get().add(getSimpleLayoutPanel());
// Create the API Loader
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
@Override
public void run() {
getSimpleLayoutPanel().setWidget(getPieChart());
drawPieChart();
}
});
}
private SimpleLayoutPanel getSimpleLayoutPanel() {
if (layoutPanel == null) {
layoutPanel = new SimpleLayoutPanel();
}
return layoutPanel;
}
private Widget getPieChart() {
if (pieChart == null) {
pieChart = new PieChart();
}
return pieChart;
}
private void drawPieChart() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.NUMBER, "Donuts eaten");
dataTable.addRows(4);
dataTable.setValue(0, 0, "Michael");
dataTable.setValue(1, 0, "Elisa");
dataTable.setValue(2, 0, "Robert");
dataTable.setValue(3, 0, "John");
dataTable.setValue(0, 1, 5);
dataTable.setValue(1, 1, 7);
dataTable.setValue(2, 1, 3);
dataTable.setValue(3, 1, 2);
// Draw the chart
pieChart.draw(dataTable);
}
我得到了预期的输出：
当我尝试将图表放在 HTMLPanel 中时：
/**
* This is the entry point method.
*/
public void onModuleLoad() {
Window.enableScrolling(false);
Window.setMargin("0px");
HTMLPanel html = new HTMLPanel("<div id='container'></div>");
html.add(getSimpleLayoutPanel(), "container");
RootPanel.get().add(html);
html.setVisible(true);
// RootLayoutPanel.get().add(getSimpleLayoutPanel());
// Create the API Loader
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
@Override
public void run() {
getSimpleLayoutPanel().setWidget(getPieChart());
drawPieChart();
getSimpleLayoutPanel().setVisible(true);
getSimpleLayoutPanel().getWidget().setVisible(true);
}
});
}
结果是一个白屏，很奇怪，如果我用 Firebug 检查 DOM，我可以在那里看到“图表”......我的意思是，组成图表的 svg 文件：
<div aria-hidden="false"><div id="container"><div aria-hidden="false" style="position: relative;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%;"><div aria-hidden="false" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"><div dir="ltr" style="position: relative; width: 1525px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg style="overflow: hidden;" height="200" width="1525"><defs id="defs"></defs><rect fill="#ffffff" stroke-width="0" stroke="none" height="200" width="1525" y="0" x="0"></rect><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="87" width="453" y="38" x="934"></rect><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="38" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="50.75" x="955" text-anchor="start">Michael</text></g><rect fill="#3366cc" stroke-width="0" stroke="none" height="15" width="15" y="38" x="934"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="62" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="74.75" x="955" text-anchor="start">Elisa</text></g><rect fill="#dc3912" stroke-width="0" stroke="none" height="15" width="15" y="62" x="934"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="86" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="98.75" x="955" text-anchor="start">Robert</text></g><rect fill="#ff9900" stroke-width="0" stroke="none" height="15" width="15" y="86" x="934"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="110" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="122.75" x="955" text-anchor="start">John</text></g><rect fill="#109618" stroke-width="0" stroke="none" height="15" width="15" y="110" x="934"></rect></g></g><g><path fill="#3366cc" stroke-width="1" stroke="#ffffff" d="M525,100L525,38A62,62,0,0,1,584.6331898767148,116.96710538446915L525,100A0,0,0,0,0,525,100"></path></g><g><path fill="#109618" stroke-width="1" stroke="#ffffff" d="M525,100L483.23087009391344,54.181447132319164A62,62,0,0,1,525,38L525,100A0,0,0,0,0,525,100"></path></g><g><path fill="#ff9900" stroke-width="1" stroke="#ffffff" d="M525,100L465.36681012328523,116.96710538446915A62,62,0,0,1,483.2308700939135,54.18144713231911L525,100A0,0,0,0,0,525,100"></path></g><g><path fill="#dc3912" stroke-width="1" stroke="#ffffff" d="M525,100L584.6331898767148,116.96710538446915A62,62,0,0,1,465.36681012328523,116.96710538446918L525,100A0,0,0,0,0,525,100"></path><text fill="#ffffff" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="140.04361653961504" x="504.5" text-anchor="start">41.2%</text></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 210px; left: 1535px; white-space: nowrap; font-family: Arial; font-size: 15px;">John</div><div></div></div></div></div></div></div>
现在你可以看到，由于某种原因被设置为“隐藏”....知道为什么吗？？？？疯了！
谢谢，亚历克斯