GWT - 使用佈局面板的Google可視化問題？

Question

我的GWT應用程序出現問題，直到用戶與窗口進行某種交互（例如，在屏幕上移動鼠標或按下按鈕）之後才顯示Google可視化圖表。這樣可以很好，除了圖表假設顯示爲用戶看到的第一件事物，並且由於它意味着在移動設備上顯示，所以很可能他們不會看到圖表，因爲他們的第一次交互會點擊一個按鈕，隱藏圖表以顯示其他信息。

在可視化代碼的頁面上使用"Getting started tutorial"，圖表馬上加載正常（一旦稍微過時的教程修復了一些問題就修復了問題）。經過一些試驗和錯誤，找到我的代碼和導致問題的示例代碼之間的區別，我發現這是因爲我的代碼使用了較新的佈局面板而不是GWT中的常規面板。

下面的代碼是更改的工作教程代碼，以便它使用RootLayoutPanel.get（）而不是RootPanel.get（）。有了這個功能，圖表就不會加載，直到您點擊重新加載頁面，然後您可以在頁面重新加載之前立即看到圖表。這應該很容易用下面的代碼進行測試。要讓圖表顯示整個時間，只需將RootLayoutPanel.get（）更改爲RootPanel.get（）。

我的應用程序中的東西是允許圖表加載後用戶交互（我不知道是什麼）。然而，佈局面板當然是問題，如果我將它更改爲常規面板，它工作正常。不幸的是，我的整個應用程序是使用佈局面板構建的

這是怎麼回事，我怎麼能夠使圖表從一開始就使用佈局面板顯示？非常感謝！

package com.test.client; 

import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.core.client.JsArray; 
import com.google.gwt.user.client.Window; 
import com.google.gwt.user.client.ui.Panel; 
import com.google.gwt.user.client.ui.LayoutPanel; 
import com.google.gwt.user.client.ui.RootLayoutPanel; 
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.visualization.client.AbstractDataTable.ColumnType; 
import com.google.gwt.visualization.client.events.SelectHandler; 
import com.google.gwt.visualization.client.visualizations.corechart.PieChart; 
import com.google.gwt.visualization.client.visualizations.corechart.Options; 

public class SimpleViz implements EntryPoint { 
    public void onModuleLoad() { 
    // Create a callback to be called when the visualization API 
    // has been loaded. 
    Runnable onLoadCallback = new Runnable() { 
     public void run() { 
     LayoutPanel panel = RootLayoutPanel.get(); 

     // Create a pie chart visualization. 
     PieChart pie = new PieChart(createTable(), createOptions()); 

     pie.addSelectHandler(createSelectHandler(pie)); 
     panel.add(pie); 
     } 
    }; 

    // Load the visualization api, passing the onLoadCallback to be called 
    // when loading is done. 
    VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE); 
    } 

    private Options createOptions() { 
    Options options = Options.create(); 
    options.setWidth(400); 
    options.setHeight(240); 
    options.setTitle("My Daily Activities"); 
    return options; 
    } 

    private SelectHandler createSelectHandler(final PieChart chart) { 
    return new SelectHandler() { 
     @Override 
     public void onSelect(SelectEvent event) { 
     String message = ""; 

     // May be multiple selections. 
     JsArray<Selection> selections = chart.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.isCell()) { 
      // isCell() returns true if a cell has been selected. 

      // getRow() returns the row number of the selected cell. 
      int row = selection.getRow(); 
      // getColumn() returns the column number of the selected cell. 
      int column = selection.getColumn(); 
      message += "cell " + row + ":" + column + " selected"; 
      } else if (selection.isRow()) { 
      // isRow() returns true if an entire row has been selected. 

      // getRow() returns the row number of the selected row. 
      int row = selection.getRow(); 
      message += "row " + row + " selected"; 
      } else { 
      // unreachable 
      message += "Pie chart selections should be either row selections or cell selections."; 
      message += " Other visualizations support column selections as well."; 
      } 
     } 

     Window.alert(message); 
     } 
    }; 
    } 

    private AbstractDataTable createTable() { 
    DataTable data = DataTable.create(); 
    data.addColumn(ColumnType.STRING, "Task"); 
    data.addColumn(ColumnType.NUMBER, "Hours per Day"); 
    data.addRows(2); 
    data.setValue(0, 0, "Work"); 
    data.setValue(0, 1, 14); 
    data.setValue(1, 0, "Sleep"); 
    data.setValue(1, 1, 10); 
    return data; 
    } 
} 

Answer 1

的佈局面板上的小部件的大小設置在JavaScript中完成。初始頁面加載後，初始大小調整完成後，所有其他的一切都完成了。然而在你的情況下，餅圖是在庫加載時添加的，並且在初始大小調整後運行。因此，你的小部件沒有大小，不會顯示你需要明確地調用panel.forceLayout();作爲你運行方法中的最後一種方法。

Answer 2

谷歌圖表工具一定與LayoutPanels一起工作。我自己使用它。

這真的很難說什麼是錯的，但這裏有幾個建議：

• 請與Chrome瀏覽器開發工具（控制檯），如果有異常被拋出。
• 您是否已啓用standard mode。這是與LayoutPanels（請確保您有<!DOCTYPE html>在你的HTML主頁
• 你可以嘗試第三方wrapper重要（支持自動調整大小）