在gwt中運行帶有JavaScript的Google圖表HTMLPanel

Question

我想從位於網頁中間的HTML面板中的谷歌圖表示例運行測試圖表。我想對圖表進行大量的定製，這就是爲什麼我不想使用從谷歌圖表派生的任何類型的API。我想簡單地在HTMLPanel中運行JavaScript。這是我試過的。

public class TwitterTimeSeries implements EntryPoint 
{ 


public void onModuleLoad() { 

Element script2 = DOM.createElement("script"); 
DOM.setElementAttribute(script2,"language","text/javascript"); 
DOM.setElementAttribute(script2,"src","https://www.google.com/jsapi"); 
    Element script = DOM.createElement("script"); 
    DOM.setElementAttribute(script,"language","text/javascript"); 
    script.setInnerText("google.load('visualization', '1.0', {'packages' ['corechart']});" 
+ "google.setOnLoadCallback(drawChart);" 
+ "function drawChart() {" 
+ "var data = google.visualization.arrayToDataTable([['Year', 'Sales', 'Expenses'], ['2004', 1000,  400], ['2005', 1170,  460], ['2006', 660,  1120], ['2007', 1030,  540]]);" 
+ "var options = {title: 'Company Performance'};" 
+ "var chart = new google.visualization.LineChart(document.getElementById('chart_div'));" 
+ "chart.draw(data, options); }" 

      ); 
    HTMLPanel html = new HTMLPanel("<div id=\"chart_div\"></div>"); 
    RootPanel.get().add(html); 
    DOM.appendChild(DOM.getElementById("chart_div"),script); 

    } 
}; 

任何人都可以指向正確的方向嗎？

Answer 1

對不起，但你不應該直接這樣做。您應該使用gwt-google-apis。

他們有大部分圖表的包裝，你可以很容易地寫你自己的包裝，如果你錯過了。

除此之外，編寫包裝器/小部件是一種很好的做法，因爲它們可以在其他項目中輕鬆地重用。
如果包裝中缺少某些東西（例如某些圖表外觀的自定義），則仍然可以依靠純Javascript（JSNI）來實現它。

代碼看起來類似的東西：

public class TwitterTimeSeries implements EntryPoint 
{ 
    public void onModuleLoad() { 
     VisualizationUtils.loadVisualizationApi(new Runnable() { 
      @Override 
      public void run() { 
       DataTable dataTable = DataTable.create(); 
          dataTable.addColumns(ColumnType.String,"Year"); 
          dataTable.addColumns(ColumnType.Number,"Sales"); 
          dataTable.addColumns(ColumnType.Number,"Expenses"); 
          dataTable.addRows(1) 
          dataTable.setValues(0,0,"2004"); 
          dataTable.setValues(0,1,1000); 
          dataTable.setValues(0,2,400); 
          Options options = Options.create(); 
          options.set("title","Company Performance"); 
          LineChart chart = new LineChart(dataTable,options); 
          panel.add(chart); 
          RootPanel.get().add(panel); 
      } 
     }, CoreChart.PACKAGE, MotionChart.PACKAGE); 
    } 
} 

我目前使用GWT的包裝