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がclient（Browser）にロードされると、コントロールが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 に答える