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上重绘。我通过代码调试，发现一旦JScript加载到客户端（浏览器）上，控件就永远不会返回onModuleLoad（）。

我应该进行RPC调用以创建可创建的数据，即我应该将createTable（int input）移动到服务器，还是通过异步调用我应该填充数据？我虽然如此，因为我认为一旦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;
}
}

addSelectHandler（）无法按预期工作

1 个答案: