放入HTMLPanel中的Invisble gwt图表

Question

我遇到了一个很奇怪的问题，老实说，我不知道发生了什么...

我正在尝试在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;">&nbsp;</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>

现在，您可以看到，由于某种原因将其设置为“隐藏”。 疯了！

谢谢，亚历克斯

Answer 1

尝试为HTMLPanel和SimpleLayoutPanel设置明确的宽度和高度。 由于HTMLPanel不实现RequiresResize和ProvidesResize，因此您需要设置一个明确的大小。

为了使调整大小正常工作，您必须“ 在实现RequiresResize的所有小部件和RootLayoutPanel之间保持不间断的层次结构，该RootLayoutPanel侦听可能影响层次结构中小部件大小的任何更改（例如浏览器窗口调整大小） ”。

有关更多信息，请参见： http : //www.gwtproject.org/doc/latest/DevGuideUiPanels.html#Resize