0

我正在尝试在位于我网页中间的 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);

  }
};

谁能指出我正确的方向？

4

1 回答 1

0

抱歉，您不应该直接这样做。您应该使用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);
    }
}
于 2012-08-30T08:09:57.410 回答