GWT Google Charts - 配置语法

GWT Google Charts配置语法 - 从基本概念到高级概念，从简单简单的步骤学习GWT Google Charts，其中包括概述，环境设置，配置语法，区域图表，条形图，气泡图，烛台图表，柱形图，组合图，直方图，折线图，地图，组织结构图，饼图，Sankey图，散点图，阶梯区图，表格图，树形图。

在本章中，我们将展示使用GWT中的Google Charts API绘制图表所需的配置.

步骤1:创建GWT应用程序

按照以下步骤更新我们在 GWT中创建的GWT应用程序 - 创建应用程序章节 :

Step	描述
1	在包 com下创建名为 HelloWorld* 的项目. it1352，如 GWT - 创建应用程序*章节中所述.
2	修改 HelloWorld.gwt.xml ， HelloWorld.html 和 HelloWorld.java 如下所述.保持其余文件不变.
3	编译并运行应用程序以验证实现的逻辑的结果.

以下是修改后的模块描述符的内容 src/com.it1352/HelloWorld.gwt.xml.

以下是修改过的HTML主机文件的内容 war/HelloWorld.html .

         GWT Highcharts Showcase

在理解配置后，我们最终会看到更新的HelloWorld.java.

第2步:创建配置

加载库并创建图表

使用ChartLoader加载库，然后创建图表.

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);chartLoader.loadApi(new Runnable() {   public void run() {      // Create and attach the chart      PieChart chart = new PieChart();              }});

DataTable

通过创建数据表来配置详细信息.

// Prepare the dataDataTable data = DataTable.create();data.addColumn(ColumnType.STRING, "Browser");data.addColumn(ColumnType.NUMBER, "Percentage");data.addRow("Firefox", 45.0);data.addRow("IE", 26.8);data.addRow("Chrome", 12.8);data.addRow("Safari", 8.5);data.addRow("Opera", 6.2);data.addRow("Others", 0.7);// Draw the chartchart.draw(data);

尺寸

配置要设置的宽度和高度.

chart.setWidth("700px");chart.setHeight("700px");

步骤3:将图表添加到父面板.

我们将图表添加到根面板.

RootPanel.get().add(chart);

示例

请考虑以下示例以进一步了解配置语法 :

HelloWorld.java

package com.it1352.client; import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.RootPanel;import com.googlecode.gwt.charts.client.ChartLoader;import com.googlecode.gwt.charts.client.ChartPackage;import com.googlecode.gwt.charts.client.ColumnType;import com.googlecode.gwt.charts.client.DataTable;import com.googlecode.gwt.charts.client.corechart.PieChart;public class HelloWorld implements EntryPoint {   private PieChart chart;   private void initialize() {      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);      chartLoader.loadApi(new Runnable() {         public void run() {            // Create and attach the chart            chart = new PieChart();            RootPanel.get().add(chart);            draw();         }      });   }   private void draw() {      // Prepare the data      DataTable data = DataTable.create();      data.addColumn(ColumnType.STRING, "Browser");      data.addColumn(ColumnType.NUMBER, "Percentage");      data.addRow("Firefox", 45.0);      data.addRow("IE", 26.8);      data.addRow("Chrome", 12.8);      data.addRow("Safari", 8.5);      data.addRow("Opera", 6.2);      data.addRow("Others", 0.7);      // Draw the chart      chart.draw(data);      chart.setWidth("400px");      chart.setHeight("400px");   }   public void onModuleLoad() {      initialize();   }}

结果

验证结果.

基本饼图