Question

我通过调用本机javascript在gwt中使用新发布的Annotation Chart，而我到现在所拥有的是让它显示示例图表，但我遇到的问题是它不是完全互动。它看起来更像是一幅图像。任何人都知道我怎么能正常工作？

这是我正在使用的代码：

public void onModuleLoad() {
    createChart();
}

private native void createChart() 
/*-{

    $wnd.google.setOnLoadCallback(drawChart); 
    function drawChart() {
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
              [new Date(2314, 2, 15), 12400, undefined, undefined,
                              10645, undefined, undefined],
              [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                              12374, undefined, undefined],
              [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                              15766, 'Gallantors', 'First Encounter'],
              [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                              34334, 'Gallantors', 'Statement of shared principles'],
              [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                              66467, 'Gallantors', 'Mysteries revealed'],
              [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                              79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new $wnd.google.visualization.AnnotationChart($wnd.document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true,
        };

        chart.draw(data, options);
      }
}-*/;

我正在加载HTML文件中的库：

<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="GUI.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Analytics</title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="gui/gui.nocache.js"></script>
    <script type="text/javascript"  src="http://www.google.com/jsapi"></script>     
    <script type="text/javascript">
        google.load("visualization", "1.1", {'packages' : ["annotationchart"] });
    </script>

  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>

  </body>
</html>

Answer 1

要回答我自己的问题，here是我为此图表编写的GWT包装器。它可以工作并支持所有选项，并且可以像在GWT中使用其他谷歌图表一样使用。

使Google可视化 - 注释图表在GWT中工作

1 个答案: