1

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

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。

这个你能帮我吗。

提前致谢

4

1 回答 1

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;
}
}
于 2012-08-21T06:59:02.480 回答