添加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); 
    } 
}