GWT Google Charts - Tabellendiagramm

Das Tabellendiagramm hilft beim Rendern einer Tabelle, die sortiert und ausgelagert werden kann. Tabellenzellen können mithilfe von Formatzeichenfolgen oder durch direktes Einfügen von HTML als Zellenwerte formatiert werden. Numerische Werte sind standardmäßig rechtsbündig ausgerichtet. Boolesche Werte werden als Häkchen oder Kreuzzeichen angezeigt. Benutzer können einzelne Zeilen entweder mit der Tastatur oder der Maus auswählen. Spaltenüberschriften können zum Sortieren verwendet werden. Die Kopfzeile bleibt während des Bildlaufs fest. Die Tabelle löst Ereignisse aus, die der Benutzerinteraktion entsprechen.

Wir haben die Konfigurationen zum Zeichnen eines Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Lassen Sie uns nun ein Beispiel für ein Tabellendiagramm sehen.

Konfigurationen

Wir haben verwendet Table Klasse, um ein Tabellendiagramm anzuzeigen.

Table chart = new Chart();

Beispiel

HelloWorld.java

package com.tutorialspoint.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.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;

public class HelloWorld implements EntryPoint {
   private Table chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new Table();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.NUMBER, "Salary");
      dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
      dataTable.addRows(4);
      
      dataTable.setCell(0, 0, "Mike");
      dataTable.setCell(0, 1, 10000, "$10,000");
      dataTable.setCell(0, 2, true);
      dataTable.setCell(1, 0, "Jim");
      dataTable.setCell(1, 1, 8000, "$8,000");
      dataTable.setCell(1, 2, false);
      dataTable.setCell(2, 0, "Alice");
      dataTable.setCell(2, 1, 12500, "$12,500");
      dataTable.setCell(2, 2, true);
      dataTable.setCell(3, 0, "Bob");
      dataTable.setCell(3, 1, 7000, "$7,000");
      dataTable.setCell(3, 2, true);

      TableOptions options  = TableOptions.create();
      options.setAlternatingRowStyle(true);
      options.setShowRowNumber(true);
      
      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Ergebnis

Überprüfen Sie das Ergebnis.