addSelectHandler()未按预期工作

Question

以下是我编写的启动代码，用于在堆叠条形图中的数据之间切换，这样当用户单击任何列时，数据都会被重新排序并显示在图中：

package com.test.visualization.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Panel;
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.core.client.JsArray;
import com.google.gwt.user.client.Window;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.visualizations.corechart.BarChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;

@SuppressWarnings("deprecation")
public class TestVisualization implements EntryPoint {

    static int increment = 1;

    public void onModuleLoad() {
        Runnable onLoadCallback = new Runnable() {
            public void run() {
                Panel panel = RootPanel.get();
                BarChart bar = new BarChart(createTable(increment), createOptions());
                bar.addSelectHandler(createSelectHandler(bar));
                panel.add(bar);
            }
        };

        VisualizationUtils.loadVisualizationApi(onLoadCallback,BarChart.PACKAGE);
    }

    private SelectHandler createSelectHandler(final BarChart bar){
        return new SelectHandler(){
            public void onSelect(SelectEvent event){
                String message = "";
                JsArray<Selection> selections = bar.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.isColumn()){
                        int column = selection.getColumn();
                        message += "column " + column + " selected";
                        increment = column;
                        Window.alert(message);
                    }
                }
            }
        };
    }
    private Options createOptions() {
        Options options = Options.create();
        options.setIsStacked(true);
        options.setWidth(400);
        options.setHeight(240);
        options.setTitle("My Daily Activities");
        return options;
    }

    private AbstractDataTable createTable(int input) {
        // Underlying data
        int rowsadded = 3;
        DataTable data = DataTable.create();
        data.addColumn(ColumnType.STRING, "Item");
        data.addColumn(ColumnType.NUMBER, "item per sec");
        data.addColumn(ColumnType.NUMBER, "item per minute");
        data.addRows(rowsadded);
        if (input == 2){
            data.setValue(0, 2, 10);
            data.setValue(1, 2, 10);
            data.setValue(2, 2, 10);
            } else {
            data.setValue(0, 0, "Nits");
            data.setValue(0, 1, 10);
            data.setValue(1, 0, "Gnats");
            data.setValue(1, 1, 4);
            data.setValue(2, 0, "Pits");
            data.setValue(2, 1, 8);
        }
        return data;
    }
}

目前的情况是，第一列的数据显示得很好，但当我点击这些列时，其他数据不会显示在屏幕上。但当我点击该列时，windows.alert显示事件处理程序正在工作，但数据没有在UI上重新绘制。我对代码进行了调试，发现一旦在客户端（Browser）上加载了JScript，控件就永远不会返回到onModuleLoad（）。

我是否应该进行RPC调用以创建表数据，即我是否应该将createtable（int输入）移动到服务器，并通过异步调用填充数据？？我这么认为是因为我认为一旦JScript移动到客户端，就无法重新绘制UI。

请帮我解决这个问题。

提前感谢

Answer 1

您需要重新绘制可视化。类似这样的东西：

@SuppressWarnings("deprecation")
public class TestVisualization implements EntryPoint {

static int increment = 1;
BarChart bar = null;
public void onModuleLoad() {
    Runnable onLoadCallback = new Runnable() {
        public void run() {
            Panel panel = RootPanel.get();
            bar = new BarChart(createTable(increment), createOptions());
            bar.addSelectHandler(createSelectHandler(bar));
            panel.add(bar);
        }
    };

    VisualizationUtils.loadVisualizationApi(onLoadCallback,BarChart.PACKAGE);
}

private SelectHandler createSelectHandler(final BarChart bar){
    return new SelectHandler(){
        public void onSelect(SelectEvent event){
            String message = "";
            JsArray<Selection> selections = bar.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.isColumn()){
                    int column = selection.getColumn();
                    message += "column " + column + " selected";
                    increment = column;
                    Window.alert(message);
                    // and now redraw
                    bar.draw(createTable(increment), createOptions());
                }
            }
        }
    };
}
private Options createOptions() {
    Options options = Options.create();
    options.setIsStacked(true);
    options.setWidth(400);
    options.setHeight(240);
    options.setTitle("My Daily Activities");
    return options;
}

private AbstractDataTable createTable(int input) {
    // Underlying data
    int rowsadded = 3;
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Item");
    data.addColumn(ColumnType.NUMBER, "item per sec");
    data.addColumn(ColumnType.NUMBER, "item per minute");
    data.addRows(rowsadded);
    if (input == 2){
        data.setValue(0, 2, 10);
        data.setValue(1, 2, 10);
        data.setValue(2, 2, 10);
        } else {
        data.setValue(0, 0, "Nits");
        data.setValue(0, 1, 10);
        data.setValue(1, 0, "Gnats");
        data.setValue(1, 1, 4);
        data.setValue(2, 0, "Pits");
        data.setValue(2, 1, 8);
    }
    return data;
}
}