在gwt HTMLPanel中使用JavaScript运行Google图表

running Google Charts with JavaScript in gwt HTMLPanel

本文关键字：JavaScript 运行 Google 图表 gwt HTMLPanel      更新时间：2023-09-26

我正试图在网页中间的HTML面板中运行google图表示例中的测试图表。我想对图表进行很多自定义，这就是为什么我不想使用从谷歌图表派生的任何类型的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);
  }
};

有人能给我指正确的方向吗？

很抱歉，您不应该直接这么做。您应该使用gwt-googleapi。

他们有大多数图表的包装器，如果你错过了一个，你可以很容易地编写自己的包装器。

除此之外，编写包装器/小部件是一种很好的做法，因为它们可以很容易地在其他项目中重复使用
如果包装器中缺少某些东西（例如图表外观的一些自定义），您仍然可以依靠纯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);
    }
}
相关文章：