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 sama 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 visualisasi adalah google.visualization.Table.
var visualization = new google.visualization.Table(container);
Format Data
DataTable dikonversi menjadi tabel HTML yang sesuai, dengan setiap baris/kolom dalam 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 khusus berikut ke elemen tabel data, menggunakan metode
setProperty()
dari DataTable.
| Nama Properti | Berlaku Untuk | Deskripsi |
|---|---|---|
| className | {i>Cell <i}atau sel | Nama class string yang akan ditetapkan ke sel individual. Gunakan ini untuk menetapkan gaya CSS ke sel individual. |
| gaya | {i>Cell <i}atau sel | String gaya untuk ditetapkan sejajar dengan sel. Tindakan ini akan mengganti gaya class CSS yang diterapkan ke sel tersebut. Anda harus menetapkan properti allowhtml=true agar
hal ini 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 ditetapkan ke 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 baik. Jenis: boolean
Default: false
|
| alternatingRowStyle |
Menentukan apakah gaya warna alternatif akan ditetapkan ke baris ganjil dan genap. Jenis: boolean
Default: benar (true)
|
| cssClassNames |
Objek yang setiap nama propertinya 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. Selanjutnya, Anda harus menentukan gaya CSS untuk class tersebut di halaman Anda. Nama properti berikut didukung:
Contoh:
Catatan: Di CSS, beberapa elemen menggantikan elemen yang lain. Misalnya, jika Anda menentukan
warna latar belakang untuk elemen Jenis: objek
Default: null
|
| firstRowNumber |
Nomor baris untuk baris pertama dalam dataTable. Hanya digunakan jika showRowNumber benar. Jenis: nomor
Default: 1
|
| frozenColumns |
Jumlah kolom dari sebelah kiri yang akan dibekukan. Kolom ini akan tetap pada tempatnya saat men-scroll kolom yang tersisa secara horizontal. Jika Jenis: nomor
Default: null
|
| tinggi |
Menetapkan tinggi elemen penampung visualisasi. Anda dapat menggunakan satuan HTML standar (misalnya, '100px', '80em', '60'). Jika tidak ada unit yang ditentukan, jumlahnya diasumsikan sebagai piksel. Jika tidak ditentukan, browser akan menyesuaikan tinggi secara otomatis agar pas dengan tabel, mengecilkan maksimal dalam 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 sebanyak mungkin ke dalam elemen container. Jenis: string
Default: otomatis
|
| halaman |
Jika dan cara mengaktifkan paging melalui data. Pilih salah satu nilai string berikut:
Jenis: string
Default: 'disable'
|
| pageSize |
Jumlah baris di setiap halaman, saat paging diaktifkan dengan opsi halaman. Jenis: nomor
Default: 10
|
| pagingButtons |
Menetapkan opsi yang ditentukan untuk tombol paging. Opsinya adalah sebagai berikut:
Jenis: string atau angka
Default: 'otomatis'
|
| rtlTable |
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 hanya memengaruhi urutan tampilan, bukan indeks kolom dalam data pokok. Tampilan bahasa dua arah penuh (BiDi) 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 menetapkan opsi tinggi dan lebar yang lebih kecil dari ukuran tabel yang diperlukan. Jenis: boolean
Default: false
|
| scrollLeftStartPosition |
Menetapkan posisi scroll horizontal, dalam piksel, jika tabel memiliki scroll bar horizontal karena Anda telah menetapkan properti lebar. Tabel akan terbuka setelah di-scroll sebanyak piksel yang melewati kolom paling kiri. Jenis: nomor
Default: 0
|
| showRowNumber |
Jika ditetapkan ke true, nomor baris akan ditampilkan sebagai kolom pertama pada tabel. Jenis: boolean
Default: false
|
| mengurutkan |
Jika dan bagaimana mengurutkan kolom saat pengguna mengklik judul kolom. Jika pengurutan diaktifkan, pertimbangkan juga untuk menyetel properti sortAscending dan sortColumn. Pilih salah satu nilai string berikut:
Jenis: string
Default: 'enable'
|
| sortAscending |
Urutan kolom sortir awal. True untuk naik, false untuk
menurun. Diabaikan jika Jenis: boolean
Default: benar (true)
|
| sortColumn |
Indeks kolom dalam tabel data, yang digunakan untuk mengurutkan tabel pada awalnya. Kolom tersebut akan ditandai dengan panah kecil yang menunjukkan tata urutannya. Jenis: nomor
Default: -1
|
| startPage |
Halaman tabel pertama yang akan ditampilkan. Hanya digunakan jika Jenis: nomor
Default: 0
|
| lebar |
Menetapkan lebar elemen penampung visualisasi. Anda dapat menggunakan satuan HTML standar (misalnya, '100px', '80em', '60'). Jika tidak ada unit yang ditentukan, jumlahnya diasumsikan sebagai piksel. Jika tidak ditentukan, browser akan menyesuaikan lebar secara otomatis agar pas dengan tabel, mengecil 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 dalam elemen container. Jenis: string
Default: otomatis
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar tabel. Jenis Pengembalian: tidak ada
|
getSelection() |
Implementasi getSelection standar. Elemen pilihan adalah semua elemen baris. Dapat menampilkan lebih dari satu baris yang dipilih. Indeks baris dalam objek pemilihan merujuk pada tabel data asli terlepas dari interaksi pengguna apa pun (sort, 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 pemilihan yang diambil. Jenis Pengembalian: 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 penyortiran, 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 Pengembalian: tidak ada
|
clearChart() |
Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan. Jenis Pengembalian: tidak ada
|
Acara
| Name | |
|---|---|
| pilih |
Peristiwa pilihan standar, tetapi hanya seluruh baris yang dapat dipilih. Properti: Tidak ada
|
| halaman |
Dipicu saat pengguna mengklik tombol navigasi halaman. Properti:
page: Nomor. Indeks halaman yang akan dibuka. |
| mengurutkan |
Dipicu saat pengguna mengklik header kolom, dan opsi pengurutan bukan 'disable'. 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
|
Formatter
Catatan: Visualisasi tabel memiliki kumpulan objek pemformat yang telah digantikan oleh pemformat umum, yang berperilaku dengan cara yang sama, tetapi dapat digunakan dalam visualisasi apa pun.
Tabel berikut menunjukkan pemformat tabel lama dan pemformat generik yang setara. Anda harus menggunakan pemformat generik saat menulis kode baru.
| Formatter Tabel | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | 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.