0

Web ページの中央にある HTML パネルで、Google チャートの例からテスト チャートを実行しようとしています。グラフでやりたいカスタマイズがたくさんあるので、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);

  }
};

誰かが私を正しい方向に向けることができますか?

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 に答える