Ringkasan
Tabel yang dapat diurutkan dan di-page. Sel tabel dapat diformat menggunakan string format, atau dengan langsung menyisipkan HTML sebagai nilai sel. Nilai numerik diratakan ke kanan; nilai boolean ditampilkan sebagai tanda centang. Pengguna dapat memilih satu baris dengan keyboard atau mouse. Pengguna dapat mengurutkan baris dengan mengklik header kolom. Baris header tetap tetap diperbaiki saat pengguna men-scroll. Tabel mengaktifkan sejumlah peristiwa yang sesuai dengan interaksi pengguna.
Contoh
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
Memuat
Nama paket google.charts.load adalah "table".
google.charts.load('current', {packages: ['table']});
Nama class visualisasinya adalah google.visualization.Table.
var visualization = new google.visualization.Table(container);
Format Data
DataTable dikonversi menjadi tabel HTML yang sesuai, dengan setiap baris/kolom di DataTable dikonversi menjadi baris/kolom dalam tabel HTML. Setiap kolom harus memiliki jenis data yang sama, dan semua jenis data visualisasi standar didukung (string, boolean, angka, dll.).
Properti Kustom
Anda dapat menetapkan properti kustom berikut ke elemen tabel data, menggunakan metode setProperty() dari DataTable.
| Nama Properti | Berlaku Untuk | Deskripsi |
|---|---|---|
| className | Sel | Nama class string yang akan diberikan ke sel individual. Gunakan ini untuk menetapkan gaya CSS ke masing-masing sel. |
| gaya | Sel | String gaya yang akan ditetapkan inline ke sel. Tindakan ini akan mengganti gaya class
CSS yang diterapkan ke sel tersebut. Anda harus menetapkan properti allowHtml=true agar
dapat berfungsi. Contoh: 'border: 1px solid green;'. |
Contoh
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Opsi Konfigurasi
| Name | |
|---|---|
| allowHtml |
Jika disetel ke benar (true), nilai terformat dari sel yang menyertakan tag HTML akan dirender sebagai HTML. Jika disetel ke salah (false), sebagian besar pemformat kustom tidak akan berfungsi dengan benar. Jenis: boolean
Default: false (salah)
|
| gayaBarisBerganti |
Menentukan apakah gaya warna alternatif akan ditetapkan ke baris ganjil dan genap. Jenis: boolean
Default: true (benar):
|
| cssClassNames |
Objek dengan setiap nama properti mendeskripsikan elemen tabel, dan nilai propertinya adalah string, yang menentukan class yang akan ditetapkan ke elemen tabel tersebut. Gunakan properti ini untuk menetapkan CSS kustom ke elemen tertentu pada tabel Anda. Untuk menggunakan properti ini, tetapkan objek, dengan nama properti menentukan elemen tabel, dan nilai propertinya adalah string, yang menentukan nama class yang akan ditetapkan ke elemen tersebut. Kemudian, Anda harus menentukan gaya CSS untuk class tersebut di halaman Anda. Nama properti berikut ini didukung:
Contoh:
Catatan: Di CSS, beberapa elemen menggantikan yang lainnya. Misalnya, jika Anda menentukan
warna latar belakang untuk elemen Objek Type:
Default: null
|
| FirstRowNumber |
Nomor baris untuk baris pertama dalam dataTable. Hanya digunakan jika showRowNumber benar. Jenis: angka
Default: 1
|
| frozenColumns |
Jumlah kolom dari sebelah kiri yang akan dibekukan. Kolom ini akan tetap diterapkan
saat men-scroll kolom yang tersisa secara horizontal. Jika Jenis: angka
Default: null
|
| tinggi |
Menetapkan tinggi elemen penampung visualisasi. Anda dapat menggunakan unit HTML standar (misalnya, '100px', '80em', '60'). Jika tidak ada unit yang ditentukan, angka diasumsikan sebagai piksel. Jika tidak ditentukan, browser akan menyesuaikan tinggi secara otomatis agar sesuai dengan tabel, mengecilkan sebanyak mungkin proses; jika disetel lebih kecil dari tinggi yang diperlukan, tabel akan menambahkan scroll bar vertikal (baris header juga dibekukan). Jika ditetapkan ke '100%', tabel akan diperluas seluas mungkin ke elemen penampung. Jenis: string
Default: otomatis
|
| halaman |
Jika dan cara mengaktifkan paging melalui data. Pilih salah satu nilai string berikut:
Jenis: string
Default: 'nonaktifkan'
|
| ukuran halaman |
Jumlah baris di setiap halaman, jika paging diaktifkan dengan opsi halaman. Jenis: angka
Default: 10
|
| pagingButtons |
Menetapkan opsi yang ditentukan untuk tombol paging. Opsinya adalah sebagai berikut:
Jenis: string atau angka
Default: 'otomatis'
|
| Tabel rtl |
Menambahkan dukungan dasar untuk bahasa yang ditulis dari kanan ke kiri (seperti bahasa Arab atau Ibrani) dengan membalik urutan kolom tabel, sehingga kolom nol adalah kolom paling kanan, dan kolom terakhir adalah kolom paling kiri. Hal ini tidak memengaruhi indeks kolom dalam data pokok, hanya urutan tampilan yang ditampilkan. Tampilan bahasa dua arah (BiDi) penuh tidak didukung oleh visualisasi tabel meskipun dengan opsi ini. Opsi ini akan diabaikan jika Anda mengaktifkan paging (menggunakan opsi halaman), atau jika tabel memiliki scroll bar karena Anda telah menentukan opsi tinggi dan lebar yang lebih kecil dari ukuran tabel yang diperlukan. Jenis: boolean
Default: false (salah)
|
| scrollLeftStartPosition |
Menetapkan posisi scroll horizontal, dalam piksel, jika tabel memiliki scroll bar horizontal karena Anda telah menetapkan properti lebar. Tabel akan terbuka dan di-scroll hingga jumlah piksel melewati kolom paling kiri. Jenis: angka
Default: 0
|
| showRowNumber |
Jika disetel ke benar, menampilkan nomor baris sebagai kolom pertama tabel. Jenis: boolean
Default: false (salah)
|
| mengurutkan |
Jika dan bagaimana cara mengurutkan kolom saat pengguna mengklik judul kolom. Jika pengurutan diaktifkan, pertimbangkan juga untuk menyetel properti pengurutan dan pengurutan kolom. Pilih salah satu nilai string berikut:
Jenis: string
Default: 'aktifkan'
|
| Pengurutan |
Urutan pengurutan kolom awal. True untuk menaik, false untuk menurun. Diabaikan jika Jenis: boolean
Default: true (benar):
|
| Pengurutan Kolom |
Indeks kolom di tabel data, yang awalnya digunakan untuk mengurutkan tabel. Kolom akan ditandai dengan panah kecil yang menunjukkan tata urutan. Jenis: angka
Default: -1
|
| startPage |
Halaman tabel pertama yang akan ditampilkan. Digunakan hanya jika Jenis: angka
Default: 0
|
| lebar |
Menetapkan lebar elemen penampung visualisasi. Anda dapat menggunakan unit HTML standar (misalnya, '100px', '80em', '60'). Jika tidak ada unit yang ditentukan, angka diasumsikan sebagai piksel. Jika tidak ditentukan, browser akan menyesuaikan lebar secara otomatis agar pas dengan tabel, yang diperkecil sebanyak mungkin dalam proses; jika disetel lebih kecil dari lebar yang diperlukan, tabel akan menambahkan scroll bar horizontal. Jika ditetapkan ke '100%', tabel akan diperluas sebanyak mungkin ke elemen penampung. Jenis: string
Default: otomatis
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar tabel. Jenis Hasil: tidak ada
|
getSelection() |
Implementasi getSelection standar. Elemen pemilihan merupakan elemen baris. Dapat menampilkan lebih dari satu baris yang dipilih. Indeks baris dalam objek pemilihan mengacu pada tabel data asli terlepas dari interaksi pengguna apa pun (urut, paging, dll.). Perhatikan bahwa tombol pemilihan: mengklik sel saat pertama kali memilihnya; mengklik sel lagi akan membatalkan pilihan, sehingga menghasilkan peristiwa pemilihan, tetapi tidak ada item yang dipilih dalam objek pilihan yang diambil. Jenis Hasil: Array elemen pilihan
|
getSortInfo() |
Panggil metode ini untuk mengambil informasi tentang status pengurutan tabel saat ini yang telah diurutkan (biasanya oleh pengguna, yang telah mengklik judul kolom untuk mengurutkan baris menurut kolom tertentu). Jika Anda telah menonaktifkan pengurutan, metode ini tidak akan berfungsi. Jika Anda belum mengurutkan data dalam kode, atau pengguna belum mengurutkan data dengan memilih kode, nilai pengurutan default akan ditampilkan. Jenis Pengembalian: Objek dengan properti berikut:
|
setSelection(selection) |
Implementasi
Jenis Hasil: tidak ada
|
clearChart() |
Menghapus diagram, dan melepaskan semua resource yang dialokasikan. Jenis Hasil: tidak ada
|
Acara
| Name | |
|---|---|
| pilih |
Peristiwa pilih standar, tetapi hanya seluruh baris yang dapat dipilih. Properti: Tidak ada
|
| halaman |
Dipicu saat pengguna mengklik tombol navigasi halaman. Properti:
page: Angka. Indeks halaman yang akan dibuka. |
| mengurutkan |
Dipicu saat pengguna mengklik header kolom, dan opsi pengurutan bukan 'nonaktifkan'. Properties: Objek dengan properti berikut:
|
| siap |
Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode gambar, dan memanggilnya hanya setelah peristiwa diaktifkan. Properti: Tidak ada
|
Pemformat
Catatan: Visualisasi tabel memiliki sekumpulan objek formatter yang telah digantikan oleh pemformat umum, yang berperilaku sama, tetapi dapat digunakan dalam visualisasi apa pun.
Tabel berikut menunjukkan pemformat tabel lama dan formatter generiknya yang setara. Anda harus menggunakan formatter generik saat menulis kode baru.
| Pemformat Tabel | |
|---|---|
| TabelArrowFormat | google.visualization.ArrowFormat |
| FormatTabelBar | google.visualization.BarFormat |
| FormatWarnaTabel | google.visualization.ColorFormat |
| FormatTanggalTanggal | google.visualization.DateFormat |
| FormatAngkaTabel | google.visualization.NumberFormat |
| FormatPolaTabel | google.visualization.PatternFormat |
Penting: Pemformat sering menggunakan HTML untuk memformat teksnya; oleh karena itu, Anda harus
menetapkan opsi allowHtml ke true.
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.