添加DataTable数据不工作？

Question

我正试图在方法getNames中的异步回调中使用方法data.SetValue(...)。不幸的是它不起作用。 data.setValue(...)确实工作在同步方法createColumnChartView。

这个问题的原因是什么？请解释为什么设置数据在getNames中不起作用。提前致谢！

import java.util.ArrayList; 
import com.google.gwt.core.client.GWT; 
import com.google.gwt.user.client.rpc.AsyncCallback; 
import com.google.gwt.user.client.ui.Widget; 
import com.google.gwt.visualization.client.DataTable; 
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType; 
import com.google.gwt.visualization.client.visualizations.corechart.ColumnChart; 
import com.google.gwt.visualization.client.visualizations.corechart.CoreChart; 
import com.google.gwt.visualization.client.visualizations.corechart.Options; 
import com.practicum.client.Product; 
import com.practicum.client.rpc.ProductService; 
import com.practicum.client.rpc.ProductServiceAsync; 


public class DataOutColumnChart { 
private final DataTable data = DataTable.create(); 
private final Options options = CoreChart.createOptions(); 
private final ProductServiceAsync productService = GWT.create(ProductService.class); 

public DataOutColumnChart(Runnable runnable) { 
} 

public Widget createColumnChartView() { 
    /* create a datatable */ 
    data.addColumn(ColumnType.STRING, "Price"); 
    data.addColumn(ColumnType.NUMBER, "EUR"); 
    data.addRows(2); 
    data.setValue(0, 0, "Bar 1"); 
    data.setValue(0, 1, 123); 
    getNames(); 

    /* create column chart */ 
    options.setWidth(400); 
    options.setHeight(300); 
    options.setBackgroundColor("#e8e8e9"); 

    return new ColumnChart(data, options); 
} 

public void getNames() { 
    productService.getNames(new AsyncCallback<ArrayList<Product>>() { 
     public void onFailure(Throwable caught) { 
     } 

     public void onSuccess(ArrayList<Product> result) { 
      for (Product p : result) { 
       data.setValue(0, 0, "Bar 2"); // DONT WORK, NOTHING HAPPENS 
       data.setValue(0, 1, 345); // DONT WORK, NOTHING HAPPENS 
       System.out.println("Bla bla test"); // THIS WORKS 
      } 
     } 
    }); 
} 
} 

Answer 1

的问题发生，因为你设置的数据已经已经呈现一个DataTable。您在getNames()中的异步调用完成得太慢，无法及时影响DataTable以呈现ColumnChart。即使确实完成得足够快，它始终是一个竞争条件。理想情况下，在之后，您将不会实际渲染该图表直到，您已收到来自RPC调用的所有必要数据。

另一种选择是在从RPC获取数据后，存储对该ColumnChart的引用并调用columnChart.draw(...)。

编辑：

这里是你要求的例子。

import java.util.ArrayList; 
import com.google.gwt.core.client.GWT; 
import com.google.gwt.user.client.rpc.AsyncCallback; 
import com.google.gwt.user.client.ui.Widget; 
import com.google.gwt.visualization.client.DataTable; 
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType; 
import com.google.gwt.visualization.client.visualizations.corechart.ColumnChart; 
import com.google.gwt.visualization.client.visualizations.corechart.CoreChart; 
import com.google.gwt.visualization.client.visualizations.corechart.Options; 
import com.practicum.client.Product; 
import com.practicum.client.rpc.ProductService; 
import com.practicum.client.rpc.ProductServiceAsync; 


public class DataOutColumnChart { 
    private final DataTable data = DataTable.create(); 
    private final Options options = CoreChart.createOptions(); 
    private final ProductServiceAsync productService = GWT.create(ProductService.class); 
    private ColumnChart chart = null; 

    public DataOutColumnChart(Runnable runnable) { 
    } 

    public void initColumnChart() { 
     /* create a datatable */ 
     data.addColumn(ColumnType.STRING, "Price"); 
     data.addColumn(ColumnType.NUMBER, "EUR"); 

     /* create column chart */ 
     options.setWidth(400); 
     options.setHeight(300); 
     options.setBackgroundColor("#e8e8e9"); 

     chart = new ColumnChart(data, options); 
    } 

    public void getNames() { 
     productService.getNames(new AsyncCallback<ArrayList<Product>>() { 
      public void onFailure(Throwable caught) { 
      } 

      public void onSuccess(ArrayList<Product> result) { 
       if (result != null && result.size() > 0) { 
        // if there is data... 
        data.addRows(result.size()); // add a row for each result 
        for (int i = 0; i < result.size(); i++) { 
         // loop through the results 
         Product product = result.get(i); // get out the product 
         // ...then set the column values for this row 
         data.setValue(i, 0, product.getSomeProperty()); 
         data.setValue(i, 1, product.getSomeOtherProperty()); 
        } 
        updateChart(); 
       } 
      } 
     }); 
    } 

    public void updateChart() { 
     chart.draw(data, options); 
    } 
}