如何使用GWT和AjaxLoader的Google Visualization图表

时间:2014-10-05 01:31:12

标签: ajax gwt google-visualization

我正在尝试使用Google Visualization将交互式图表合并到GWT应用中。我不想连接到Google App引擎。我还想使用GWT API而不是在我的代码中嵌入javaScript。我正在尝试按照gwt-google-apis中的SimpleViz和HelloAjaxLoader示例,但图表不会加载。我已经将ajaxloader和可视化jar添加到我的类路径中并在gwt.xml中继承。在以下代码中,显示警告“in onModuleLoad”,但不显示“在运行中”。

我的代码:

public class SimpleViz implements EntryPoint {  
   private VerticalPanel container;
   private ImagePieChart chart;

public void onModuleLoad() {
   Window.alert("In onModuleLoad");
   container = new VerticalPanel();
   RootPanel.get().add(container);    
   container.getElement().getStyle().setPropertyPx("margin", 10);
   container.setSpacing(10);
   container.add(new Label("Pie Chart Example"));

   AjaxLoader.init();     
   AjaxLoader.loadApi("visualization", "1", new Runnable() {   

      public void run() {
          Window.alert("In run");
          chart=new ImagePieChart();
          container.add(chart);
           draw();
      }
    }, null);

 }


private void draw() {
    // Prepare the data
    DataTable dataTable = DataTable.create();
    dataTable.addColumn(ColumnType.STRING, "Task");
    dataTable.addColumn(ColumnType.NUMBER, "Hours per Day");
    dataTable.addRows(5);
    dataTable.setValue(0, 0, "Work");
    dataTable.setValue(0, 1, 11);
    dataTable.setValue(1, 0, "Sleep");
    dataTable.setValue(1, 1, 7);
    dataTable.setValue(2, 0, "Watch TV");
    dataTable.setValue(2, 1, 3);
    dataTable.setValue(3, 0, "Eat");
    dataTable.setValue(3, 1, 2);
    dataTable.setValue(4, 0, "Commute");
    dataTable.setValue(4, 1, 1);

    // Set options
    ImagePieChart.Options options = ImagePieChart.Options.create();
    options.setBackgroundColor("#f0f0f0");
    options.setIs3D(false);
    options.setTitle("So, how was your day?");

    // Draw the chart
    chart.draw(dataTable, options);
  }

}

作为后续问题,这些图书馆是最新的还是维护良好的,还是应该寻找不同的解决方案?

1 个答案:

答案 0 :(得分:1)

我就是这样做的(它有效)。

在你的模块gwt.xml文件中添加以下行:

<inherits name="com.google.gwt.visualization.Visualization"/>

此行继承gwt-visualization.jar

然后在你的代码中:

Runnable onLoadCallback = new Runnable() {
    @Override
    public void run() {
        draw();
    }
};
VisualizationUtils.loadVisualizationApi(onLoadCallback, CoreChart.PACKAGE);

您不需要AjaxLoader。