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 HTMLPanel中使用JavaScript运行Google Charts

1 个答案: