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

I'm trying to incorporate interactive charts into a GWT app using Google Visualization. I don't want to connect to the Google App engine. I'd also like to use the GWT APIs instead of embedding javaScript in my code. I'm trying to follow the examples SimpleViz and HelloAjaxLoader in gwt-google-apis, but the chart does not load. I've added the ajaxloader and visualization jars to my classpath and inherits in gwt.xml. In the following code, the alert "in onModuleLoad" displays, but not "in run".

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

My code:

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);
  }

}

As a follow-up question, are these libraries current and well maintained or should I look for a different solution?

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

1 个解决方案

#1

This is how I do it (and it works).

这就是我这样做的方式(并且有效)。

In your module gwt.xml file add the following line:

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

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

This line inherits gwt-visualization.jar.

该行继承了gwt-visualization.jar。

Then in your code:

然后在你的代码中:

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

You don't need AjaxLoader.

您不需要AjaxLoader。

#1