在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的包装