无法在多个选项卡（GWT TabPanel）上获取多个图表（Google Visualization）

Question

我需要显示未知数量的选项卡，每个选项卡都有未知数量的图表（Google 可视化）。我创建了“Tab”和“Graph”类，Tab 包含一个 ArrayList。

TabWrappers 扩展了 FlexTable，目前为空。目前它是一个占位符，但如果我使用 FlexTable 而不是 TabWrapper，行为不会改变。

下面的代码减去添加 Tab2 的部分，非常适合创建 1 个填充图形的选项卡。添加第二个选项卡时，两个选项卡都会显示并正确命名，但都没有图表。

    public class SomeClass {

...

        DataTable data = response.getDataTable();
        DataView result;
        Options options = createOptions();

        ArrayList<Tab> displayTab = new ArrayList<Tab>();
        Tab t;
        ArrayList<Graph> graphList = new ArrayList<Graph>();
        Graph g;

        t = new Tab();

            g = new Graph();
            result = DataView.create(data);
            result.setRows(new int[]{0, 2, 4, 6});
            g.setGraphType(new PieChart(result, options));
            graphList.add(g);

            g = new Graph();
            result = DataView.create(data);
            result.setRows(new int[]{1, 3, 5, 7});
            g.setGraphType(new PieChart(result, options));
            graphList.add(g);

            g = new Graph();
            result = DataView.create(data);
            g.setGraphType(new PieChart(result, options));
            graphList.add(g);

        t.setTabName("Tab1");
        t.setGraphs(graphList);
        displayTab.add(t);
        // Add a 2nd tab
        t = new Tab();
        t.setTabName("Tab2");
        t.setGraphs(graphList);
        displayTab.add(t);

        TabWrapper tabWrapper;
        for (Tab tX : displayTab){
            int row = 0, col = 0, maxCol = 2;
            tabWrapper = new TabWrapper();
            for (Graph gX : tX.getGraphs()) {
                col = tX.getGraphs().indexOf(gX) - (row * maxCol);
                tabWrapper.setWidget(row, col, gX.getGraphType().asWidget());
                if (++col == maxCol) {
                    row++;
                }
            }
        tabPanel.add(tabWrapper, tX.getTabName());
        }

...

    }

Answer 1

当您在 GWT 中使用选项卡时，每个选项卡中包含的面板似乎是延迟加载的，并且在用户单击每个选项卡之前并未完全设置。

特别是，选项卡容器的宽度和高度为零（错误日志可能会给出有关宽度为零的容器的错误），因此图形绘制将失败并留下空白空间。

您需要做的（无论如何可能是一个好的实践）是延迟加载选项卡的内容，以便仅在选项卡完全设置时才加载图表。这可以通过删除调用 t.setGraphs(...) 并添加一个执行此操作的选择处理程序来完成：

tabPanel.addSelectionHandler(new SelectionHandler<Integer> () {
    public void onSelection(SelectionEvent<Integer> event) {
        // Pseudocode:
        // n = event.getSelectedItem()
        // t = displayTab[n]
        // g = graphList[n]
        // t.setGraphs(g)
    }
});

以便仅在选择选项卡时添加和绘制图形。

您可能还需要调用

tabPanel.selectTab(0);

在选择处理程序就位后，

以强制选择第一个选项卡。我遇到了与您描述的相同的问题，这解决了它。