GWT Google Charts - Tablo Grafiği

Tablo grafiği, sıralanabilen ve sayfalanabilen bir tablonun oluşturulmasına yardımcı olur. Tablo hücreleri, biçim dizeleri kullanılarak veya hücre değerleri olarak doğrudan HTML eklenerek biçimlendirilebilir. Sayısal değerler varsayılan olarak sağa hizalanır; boole değerleri, onay işaretleri veya çarpı işaretleri olarak görüntülenir. Kullanıcılar klavye veya fare ile tek bir satır seçebilirler. Sıralama için sütun başlıkları kullanılabilir. Başlık satırı kaydırma sırasında sabit kalır. Tablo, kullanıcı etkileşimine karşılık gelen olayları tetikler.

Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi, bir Tablo Grafiği örneğini görelim.

Konfigürasyonlar

Kullandık Table Tablo grafiği göstermek için sınıf.

Table chart = new Chart();

Misal

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

Sonuç

Sonucu doğrulayın.