GWT可视化问题使用数据库中的数据创建图表

Question

我在创建图表时遇到问题。图表的数据来自数据库，作为HashMap。以下是我的代码：

public void onModuleLoad()
{

    Runnable onLoadCallback = new Runnable() 
    {
        public void run() 
        {
            AbstractDataTable data = createLineTable();
            Options options = createLineOptions();
            LineChart line = new LineChart(data, options);
            vPanelWithGraph.add(line);
            vPanelWithGraph.add(closeGraphPopUp);
    };
    VisualizationUtils.loadVisualizationApi(onLoadCallback, LineChart.PACKAGE);
    popUpGraph.add(vPanelWithGraph);
}

private LineChart.Options createLineOptions() 
{
    Options options = Options.create();
    options.setWidth(400);
    options.setHeight(240);
    options.setTitle("Graph Name");
    return options;
}

private AbstractDataTable createLineTable() 
{       
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Date");
    data.addColumn(ColumnType.NUMBER, "Number");

    HashMap<String,String> map = getDateAndWarningCount();
    data.addRows(2);

    String [] arrDate = new String [2];
    int  [] arrWarCount = new int [2];
    int i=0;
    Iterator it = map.entrySet().iterator();

    while (it.hasNext()) 
    {
        Map.Entry pairs = (Map.Entry)it.next();
        System.out.println(pairs.getKey() + " = " + pairs.getValue());
        arrDate[i]=""+pairs.getKey();
        arrWarCount[i]=Integer.parseInt((String)pairs.getValue());
        i++;
    }
    data.setValue(0, 0, arrDate[0]);// row column
    data.setValue(0, 1, 5);

    data.setValue(1, 0, arrDate[1]);
    data.setValue(1, 1, 6);

    return data;
}

private HashMap<String,String> getDateAndWarningCount()
{
    HashMap<String,String> map = null;
    SQLRunnerAsync service = (SQLRunnerAsync) GWT.create(SQLRunner.class);
    AsyncCallback<HashMap<String,String>>  callback = new AsyncCallback<HashMap<String,String>>()
    {
        @Override
        public void onFailure(Throwable caught) 
        {}

        @Override
        public void onSuccess(HashMap<String,String> result)
        {
            map  = (HashMap<String,String>)result;
        }
    };
    service.getHashMapValues(callback); 
    return map;
    }

}

该应用正在创建一个带图表的弹出式窗口。当弹出图形出现时，它显示全部为0.我打印出hashmap的值，hashmap正在填充正确的数据。无法弄清楚我在这里做错了什么。任何帮助将不胜感激。感谢

以下是我编辑过的代码....它的确有效......谢谢大家！

public DialogBox getPopUpWarningGraph()
    {               
        SQLRunnerAsync service = (SQLRunnerAsync) GWT.create(SQLRunner.class);
        AsyncCallback<LinkedHashMap<String, Integer>> callback = new AsyncCallback<LinkedHashMap<String, Integer>>()
        {
            @Override
            public void onFailure(Throwable caught) 
            {
            }

            @Override
            public void onSuccess(LinkedHashMap<String, Integer> result)
            {
                map = new LinkedHashMap<String,Integer>(result);

                Runnable onLoadCallback = new Runnable() 
                {
                    public void run() 
                    {
                        AbstractDataTable data = createLineTable(map);
                        Options options = createLineOptions();
                        LineChart lineChart = new LineChart(data, options);
                        vPanelWithGraph.add(lineChart);
                        vPanelWithGraph.add(closeGraphPopUp);
                    }
                };
                VisualizationUtils.loadVisualizationApi(onLoadCallback, LineChart.PACKAGE);             
            }
        };
        service.getDateAndWarningCount("",callback);
        popUpGraph.add(vPanelWithGraph);
        return popUpGraph;
    }

    private LineChart.Options createLineOptions() 
    {
        Options options = Options.create();
        options.setWidth(400);
        options.setHeight(240);
        options.setTitle("");
        return options;
    }

    private AbstractDataTable createLineTable(HashMap<String,Integer> map ) 
    {
        DataTable data = DataTable.create();
        data.addColumn(ColumnType.STRING, "Task");
        data.addColumn(ColumnType.NUMBER, "");

        data.addRows(map.size());

        Iterator it = map.entrySet().iterator();
        int i=0;
        while (it.hasNext()) 
        {
            Map.Entry pairs = (Map.Entry)it.next();
            data.setValue(i,0,pairs.getKey()+"");
            data.setValue(i,1,Integer.parseInt(pairs.getValue()+""));
            i++;
        }
        return data;
    }
}

基本上，getPopUpWarningGraph（）函数可以从任何类调用，它将返回一个带图形的弹出窗口！

Answer 1

您的getDateAndWarningCount()会在加载数据之前立即返回 - 并且它始终返回null。

在GWT（和javascript）中，您必须异步编程 - 在系统调用您时执行您的代码。

在你的情况下，你必须在调用onSuccess()时执行绘图，因为这是你有数据的时候。

public void onModuleLoad()
{

    Runnable onLoadCallback = new Runnable() 
    {
        public void run() {
            // first get the data
            getDateAndWarningCount()
        }          
    };
    VisualizationUtils.loadVisualizationApi(onLoadCallback, LineChart.PACKAGE);
    popUpGraph.add(vPanelWithGraph);
}

private LineChart.Options createLineOptions() 
{
    Options options = Options.create();
    options.setWidth(400);
    options.setHeight(240);
    options.setTitle("Graph Name");
    return options;
}

private AbstractDataTable createLineTable(HashMap<String,String> map) 
{       
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Date");
    data.addColumn(ColumnType.NUMBER, "Number");

    data.addRows(2);

    String [] arrDate = new String [2];
    int  [] arrWarCount = new int [2];
    int i=0;
    Iterator it = map.entrySet().iterator();

    while (it.hasNext()) 
    {
        Map.Entry pairs = (Map.Entry)it.next();
        System.out.println(pairs.getKey() + " = " + pairs.getValue());
        arrDate[i]=""+pairs.getKey();
        arrWarCount[i]=Integer.parseInt((String)pairs.getValue());
        i++;
    }
    data.setValue(0, 0, arrDate[0]);// row column
    data.setValue(0, 1, 5);

    data.setValue(1, 0, arrDate[1]);
    data.setValue(1, 1, 6);

    return data;
}

private HashMap<String,String> getDateAndWarningCount()
{
    HashMap<String,String> map = null;
    SQLRunnerAsync service = (SQLRunnerAsync) GWT.create(SQLRunner.class);
    AsyncCallback<HashMap<String,String>>  callback = new AsyncCallback<HashMap<String,String>>()
    {
        @Override
        public void onFailure(Throwable caught) 
        {}

        @Override
        public void onSuccess(HashMap<String,String> result)
        {
                            Runnable onLoadCallback = new Runnable() 
            {
                public void run() 
                {
                    AbstractDataTable data = createLineTable(map);
                    Options options = createLineOptions();
                    LineChart lineChart = new LineChart(data, options);
                    vPanelWithGraph.add(lineChart);
                    vPanelWithGraph.add(closeGraphPopUp);
                }
            };
            VisualizationUtils.loadVisualizationApi(onLoadCallback, LineChart.PACKAGE); 
        }
    };
    service.getHashMapValues(callback); 
    return map;
    }

}