如何在Java中将ColumnChart添加到DockLayoutPanel？

Question

我在Java上写了代码

public class MyClass 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() {
            RootLayoutPanel rp = RootLayoutPanel.get();

            // Create a Dock Panel
            DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
            dockLayoutPanel.setStyleName("dockpanel");
            dockLayoutPanel.getElement().getStyle().setProperty("border", "solid lightblue 4px");

            // Add text all around
            dockLayoutPanel.addNorth(new HTML("This is the first north component."), 2);
            //dockPanel.addEast(col.asWidget(), 1);
            dockLayoutPanel.addWest(new HTML("This is the west component."), 3);

            VerticalPanel verticalPanel = new VerticalPanel();
            ColumnChart col = new ColumnChart(createTable(), createOptions());
            col.addSelectHandler(createSelectHandler(col));
            verticalPanel.add(col);
            dockLayoutPanel.add(verticalPanel);                                             

            rp.add(dockLayoutPanel);
        }
    };

    // Load the visualization api, passing the onLoadCallback to be called
    // when loading is done.
    VisualizationUtils.loadVisualizationApi(onLoadCallback,
            ColumnChart.PACKAGE);
}

}

(救救我，各位！)如何在ColunnChart中添加DockLayoutPanel？在这段代码中，我将ColumnChart添加到VerticalPanel，然后将VerticalPanel添加到dockLayoutPanel，然后将dockLayoutPanel添加到RootLayoutPanel。但是错误。

Answer 1

使用以下代码

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {

    @Override
    public void run() {
        VerticalPanel verticalPanel = new VerticalPanel();
        ColumnChart col = new ColumnChart();
        col.addSelectHandler(createSelectHandler(col));
        verticalPanel.add(col);
        col.draw(createTable(), createOptions());
        dockLayoutPanel.add(verticalPanel); 
    }
});

而不是

        VerticalPanel verticalPanel = new VerticalPanel();
        ColumnChart col = new ColumnChart(createTable(), createOptions());
        col.addSelectHandler(createSelectHandler(col));
        verticalPanel.add(col);
        dockLayoutPanel.add(verticalPanel);    

-编辑--

完整样本代码

public void onModuleLoad() {
    RootLayoutPanel rp = RootLayoutPanel.get();

    // Create a Dock Panel
    final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
    dockLayoutPanel.setStyleName("dockpanel");
    dockLayoutPanel.getElement().getStyle().setProperty("border", "solid lightblue 4px");

    // Add text all around
    dockLayoutPanel.addNorth(new HTML("This is the first north component."), 2);
    // dockPanel.addEast(col.asWidget(), 1);
    dockLayoutPanel.addWest(new HTML("This is the west component."), 3);

    ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
    chartLoader.loadApi(new Runnable() {

        @Override
        public void run() {
            VerticalPanel verticalPanel = new VerticalPanel();
            ColumnChart col = new ColumnChart();
            verticalPanel.add(col);
            drawChart(col);
            dockLayoutPanel.add(verticalPanel);
        }
    });

    rp.add(dockLayoutPanel);
} 

private void drawChart(ColumnChart chart) {
    // Prepare the data
    DataTable dataTable = DataTable.create();
    dataTable.addColumn(ColumnType.STRING, "Density");
    dataTable.addColumn(ColumnType.NUMBER, "Copper");
    dataTable.addColumn(ColumnType.NUMBER, "Silver");
    dataTable.addColumn(ColumnType.NUMBER, "Gold");
    dataTable.addColumn(ColumnType.NUMBER, "Platinum");

    dataTable.addRows(1);

    dataTable.setValue(0, 0, "");
    dataTable.setValue(0, 1, 8.94);
    dataTable.setValue(0, 2, 10.49);
    dataTable.setValue(0, 3, 19.30);
    dataTable.setValue(0, 4, 21.45);

    // Draw the chart
    ColumnChartOptions options = ColumnChartOptions.create();
    options.setVAxis(VAxis.create("Density"));
    options.setHAxis(HAxis.create("Metel"));

    String[] colors = new String[] { "#b87333", "silver", "gold", "#e5e4e2" };
    for (int i = 0; i < colors.length; i++) {
        ColumnChartSeries series = ColumnChartSeries.create();
        series.setColor(colors[i]);
        options.setSeries(i, series);
    }
    options.setTitle("Density of Precious Metals, in g/cm^3");

    chart.draw(dataTable, options);
}

在gwt.xml文件中添加下面一行

  <inherits name="com.googlecode.gwt.charts.Charts"/> 

快照：

​

​