Halaman ini mencantumkan objek yang diekspos oleh Google Visualization API, dan metode standar yang diekspos oleh semua visualisasi.
Catatan: Namespace Google Visualization API adalah google.visualization.*
Catatan tentang Array
Beberapa browser tidak menangani koma akhir dalam array JavaScript dengan benar, jadi jangan menggunakannya. Nilai kosong di tengah array dapat digunakan. Misalnya:
data = ['a','b','c', ,]; // BAD
data = ['a','b','c']; // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.
Class DataTable
Menyatakan tabel nilai dua dimensi yang dapat berubah. Untuk membuat salinan hanya baca
DataTable
(difilter secara opsional untuk menampilkan nilai, baris, atau kolom tertentu), buat
DataView.
Setiap kolom diberi jenis data, serta beberapa properti opsional termasuk ID, label, dan string pola.
Selain itu, Anda dapat menetapkan properti kustom (pasangan nama/nilai) ke sel, baris, kolom, atau seluruh tabel. Beberapa visualisasi mendukung properti khusus tertentu; misalnya Visualisasi tabel mendukung properti sel yang disebut 'style', yang memungkinkan Anda menetapkan string gaya CSS inline ke sel tabel yang dirender. Visualisasi harus menjelaskan properti kustom apa pun yang didukungnya dalam dokumentasinya.
Lihat juga: QueryResponse.getDataTable
Konstruktor
Sintaksis
DataTable(opt_data, opt_version)
- data_opt
-
[Opsional] Data yang digunakan untuk melakukan inisialisasi tabel. Ini dapat berupa JSON yang ditampilkan dengan memanggil
DataTable.toJSON()
pada tabel yang terisi, atau objek JavaScript yang berisi data yang digunakan untuk menginisialisasi tabel. Struktur objek literal JavaScript dijelaskan di sini. Jika parameter ini tidak disediakan, tabel data baru yang kosong akan ditampilkan. - versi_pengoptimalan
- [Opsional] Nilai numerik yang menentukan versi protokol kabel yang digunakan. Ini hanya digunakan oleh implementasi Sumber Data Alat Diagram. Versi saat ini adalah 0.6.
Detail
Objek DataTable
digunakan untuk menyimpan data yang diteruskan ke visualisasi.
DataTable
adalah tabel dua dimensi dasar. Semua data di setiap kolom harus memiliki
jenis data yang sama. Setiap kolom memiliki deskripsi yang menyertakan jenis datanya, label untuk kolom tersebut (yang dapat ditampilkan melalui visualisasi), dan ID, yang dapat digunakan untuk merujuk ke kolom tertentu (sebagai alternatif untuk menggunakan indeks kolom). Objek DataTable
juga mendukung peta properti arbitrer yang ditetapkan ke nilai tertentu, baris, kolom, atau keseluruhan DataTable
. Visualisasi dapat menggunakannya untuk mendukung fitur tambahan; misalnya, Visualisasi tabel menggunakan properti khusus untuk memungkinkan Anda menetapkan nama atau gaya class arbitrer ke setiap sel.
Setiap sel dalam tabel memiliki nilai. Sel dapat memiliki nilai null, atau nilai dari jenis yang ditentukan oleh kolomnya. Sel dapat mengambil data versi "yang diformat"; ini adalah versi string data, yang diformat untuk ditampilkan oleh visualisasi. Visualisasi dapat (tetapi tidak diwajibkan) menggunakan versi berformat untuk ditampilkan, tetapi akan selalu menggunakan data itu sendiri untuk pengurutan atau penghitungan apa pun yang dilakukannya (seperti menentukan posisi titik pada grafik). Contohnya dapat menetapkan nilai "rendah" "sedang", dan "tinggi" sebagai nilai berformat ke nilai sel numerik 1, 2, dan 3.
Untuk menambahkan baris data setelah memanggil konstruktor, Anda dapat memanggil addRow()
untuk satu baris, atau addRows()
untuk beberapa baris. Anda juga dapat menambahkan kolom
dengan memanggil metode addColumn()
. Ada juga metode penghapusan untuk baris dan kolom, tetapi daripada menghapus baris atau kolom, pertimbangkan untuk membuat DataView
yang merupakan tampilan selektif dari DataTable
.
Jika Anda mengubah nilai dalam DataTable
setelah diteruskan ke metode draw()
visualisasi, perubahan tersebut tidak akan langsung mengubah diagram. Anda harus memanggil
draw()
lagi untuk mencerminkan perubahan apa pun.
Catatan: Google Chart tidak menjalankan validasi pada tabel data. (Jika ya, diagram akan lebih lambat dirender.) Jika Anda memberikan angka dengan kolom yang mengharapkan string, atau sebaliknya, Google Chart akan melakukan upaya terbaiknya untuk menafsirkan nilai dengan cara yang sesuai, tetapi tidak akan menandai kesalahan.
Contoh
Contoh berikut menunjukkan pembuatan instance dan mengisi DataTable
dengan
string literal, dengan data yang sama seperti yang ditunjukkan dalam contoh JavaScript di atas:
var dt = new google.visualization.DataTable({ cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}], rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}] }, 0.6);
Contoh berikut membuat DataTable
baru yang kosong, lalu mengisinya secara manual
dengan data yang sama seperti di atas:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows([ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', {v:7, f:'7.000'}] ]);
Anda dapat membuat DataTable
dengan memanggil konstruktor tanpa parameter, lalu
menambahkan nilai dengan memanggil metode addColumn()
/
addRows()
yang tercantum di bawah, atau dengan meneruskan
objek literal JavaScript yang terisi untuk menginisialisasinya. Kedua metode tersebut dijelaskan di bawah. Yang mana yang harus Anda gunakan?
-
Membuat dan mengisi tabel di JavaScript dengan memanggil
addColumn()
,addRow()
, danaddRows()
adalah kode yang sangat mudah dibaca. Metode ini berguna saat Anda akan memasukkan kode secara manual. Ini lebih lambat daripada menggunakan notasi literal objek (dijelaskan berikutnya), tetapi dalam tabel yang lebih kecil (misalnya, 1.000 sel), Anda mungkin tidak akan melihat banyak perbedaan. -
Deklarasi langsung objek
DataTable
menggunakan notasi objek-literal jauh lebih cepat dalam tabel berukuran besar. Namun, terkadang sintaksis yang rumit sulit digunakan; gunakan ini jika Anda dapat membuat sintaksis literal objek dalam kode, yang mengurangi kemungkinan error.
Metode
Metode | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
ATAU
|
Angka |
Menambahkan kolom baru ke tabel data, dan menampilkan indeks kolom baru. Semua sel di kolom baru diberi nilai Tanda tangan pertama memiliki parameter berikut:
Tanda tangan kedua memiliki satu parameter objek dengan anggota berikut:
Lihat juga: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole |
addRow(opt_cellArray) |
Angka |
Menambahkan baris baru ke tabel data, dan menampilkan indeks baris baru.
Contoh: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous. |
addRows(numOrArray) |
Angka |
Menambahkan baris baru ke tabel data, dan menampilkan indeks baris terakhir yang ditambahkan. Anda dapat memanggil metode ini untuk membuat baris kosong yang baru, atau dengan data yang digunakan untuk mengisi baris, seperti yang dijelaskan di bawah.
Contoh: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Lihat juga: insertRows |
clone() |
Tabel Data | Menampilkan clone tabel data. Hasilnya adalah salinan mendalam dari tabel data kecuali untuk properti sel, properti baris, properti tabel, dan properti kolom, yang merupakan salinan dangkal; ini berarti properti non-primitif disalin berdasarkan referensi, tetapi properti primitif disalin berdasarkan nilai. |
getColumnId(columnIndex) |
String |
Menampilkan ID kolom tertentu yang ditentukan oleh indeks kolom dalam tabel pokok. Untuk tabel data yang diambil oleh kueri, ID kolom ditetapkan oleh sumber data, dan dapat digunakan untuk merujuk ke kolom saat menggunakan bahasa kueri. Lihat juga: Query.setQuery |
getColumnIndex(columnIdentifier) |
String, Angka |
Menampilkan indeks kolom tertentu yang ditentukan oleh indeks kolom, id, atau label jika ada di tabel ini, jika tidak -1. Jika columnIdentifier adalah string, string tersebut digunakan untuk
menemukan kolom berdasarkan ID-nya terlebih dahulu, lalu berdasarkan labelnya.Lihat juga: getColumnId, getColumnLabel |
getColumnLabel(columnIndex) |
String |
Menampilkan label kolom tertentu yang ditentukan oleh indeks kolom dalam tabel pokok.
Label kolom biasanya ditampilkan sebagai bagian dari visualisasi. Misalnya, label kolom dapat ditampilkan sebagai header kolom dalam tabel, atau sebagai label legenda dalam diagram lingkaran. Untuk tabel data yang diambil oleh kueri, label kolom ditetapkan oleh sumber data, atau klausa label dari
bahasa kueri. Lihat juga: setColumnLabel |
getColumnPattern(columnIndex) |
String |
Menampilkan pola pemformatan yang digunakan untuk memformat nilai kolom yang ditentukan.
Untuk tabel data yang diambil oleh kueri, Pola kolom ditetapkan oleh sumber data, atau oleh klausa |
getColumnProperties(columnIndex)
|
Object |
Menampilkan peta semua properti untuk kolom yang ditentukan. Perhatikan bahwa objek properti ditampilkan melalui referensi, sehingga mengubah nilai dalam objek yang diambil akan mengubahnya di
|
getColumnProperty(columnIndex, name)
|
Otomatis |
Menampilkan nilai properti bernama, atau
Lihat juga: setColumnProperty setColumnProperties |
getColumnRange(columnIndex) |
Object |
Menampilkan nilai minimal dan maksimal dari nilai dalam kolom yang ditentukan. Objek yang ditampilkan memiliki properti
|
getColumnRole(columnIndex) |
String | Menampilkan role untuk kolom yang ditentukan. |
getColumnType(columnIndex) |
String |
Menampilkan jenis kolom tertentu yang ditentukan oleh indeks kolom.
Jenis kolom yang ditampilkan dapat berupa salah satu dari yang berikut: |
getDistinctValues(columnIndex) |
Array objek |
Menampilkan nilai unik dalam kolom tertentu, dalam urutan menaik.
Jenis objek yang ditampilkan sama dengan yang ditampilkan oleh
metode |
getFilteredRows(filters) |
Array objek |
Menampilkan indeks baris untuk baris yang cocok dengan semua filter yang diberikan. Indeks ditampilkan dengan urutan menaik. Output metode ini dapat digunakan sebagai input untuk
Properti opsional lainnya,
Contoh: |
getFormattedValue(rowIndex, columnIndex)
|
String |
Menampilkan nilai terformat sel pada indeks baris dan kolom tertentu.
Untuk mengetahui informasi lebih lanjut tentang cara memformat nilai kolom, baca referensi bahasa kueri. Lihat juga: setFormattedValue |
getNumberOfColumns() |
Angka | Menampilkan jumlah kolom dalam tabel. |
getNumberOfRows() |
Angka | Menampilkan jumlah baris dalam tabel. |
getProperties(rowIndex, columnIndex)
|
Object |
Menampilkan peta semua properti untuk sel yang ditentukan. Perhatikan bahwa objek properti ditampilkan melalui referensi, sehingga mengubah nilai dalam objek yang diambil akan mengubahnya di
|
getProperty(rowIndex, columnIndex, name)
|
Otomatis |
Menampilkan nilai properti bernama, atau
Lihat juga: setCell setProperties setProperty |
getRowProperties(rowIndex)
|
Object |
Menampilkan peta semua properti untuk baris yang ditentukan. Perhatikan bahwa objek properti ditampilkan melalui referensi, sehingga mengubah nilai dalam objek yang diambil akan mengubahnya di
|
getRowProperty(rowIndex, name)
|
Otomatis |
Menampilkan nilai properti bernama, atau
Lihat juga: setRowProperty setRowProperties |
getSortedRows(sortColumns) |
Array angka |
Menampilkan versi tabel yang diurutkan tanpa mengubah urutan data pokok.
Untuk mengurutkan data yang mendasarinya secara permanen, panggil
Nilai yang ditampilkan adalah array angka, setiap angka adalah indeks dari baris
Perhatikan bahwa pengurutan dijamin stabil: artinya, jika Anda mengurutkan nilai dua baris yang sama, pengurutan yang sama akan mengembalikan baris dalam urutan yang sama setiap saat. Contoh: Untuk melakukan iterasi pada baris yang diurutkan menurut kolom ketiga, gunakan: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); } |
getTableProperties
|
Object | Menampilkan peta semua properti untuk tabel. |
getTableProperty(name) |
Otomatis |
Menampilkan nilai properti bernama, atau
Lihat juga: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
Object |
Menampilkan nilai sel pada indeks baris dan kolom tertentu.
Jenis nilai yang ditampilkan bergantung pada jenis kolom (lihat getColumnType):
|
insertColumn(columnIndex, type [,label [,id]])
|
Tidak ada |
Menyisipkan kolom baru ke tabel data, pada indeks specifid. Semua kolom yang ada pada atau setelah indeks yang ditentukan akan dipindahkan ke indeks yang lebih tinggi.
Lihat juga: addColumn |
insertRows(rowIndex, numberOrArray) |
Tidak ada |
Menyisipkan jumlah baris yang ditentukan pada indeks baris yang ditentukan.
Lihat juga: addRows |
removeColumn(columnIndex) |
Tidak ada |
Menghapus kolom pada indeks yang ditentukan.
Lihat juga: removeColumns |
removeColumns(columnIndex, numberOfColumns)
|
Tidak ada |
Menghapus jumlah kolom tertentu yang dimulai dari kolom pada indeks yang ditentukan.
Lihat juga: removeColumn |
removeRow(rowIndex) |
Tidak ada |
Menghapus baris pada indeks yang ditentukan.
Lihat juga: removeRows |
removeRows(rowIndex, numberOfRows) |
Tidak ada |
Menghapus jumlah baris yang ditentukan yang dimulai dari baris pada indeks yang ditentukan.
Lihat juga: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
Tidak ada |
Menetapkan nilai, nilai terformat, dan/atau properti sel.
Lihat juga: setValue(), setFormattedValue(), setProperty(), setProperties(). |
setColumnLabel(columnIndex, label)
|
Tidak ada |
Menetapkan label kolom.
Lihat juga: getColumnLabel |
setColumnProperty(columnIndex, name, value)
|
Tidak ada |
Menetapkan properti kolom tunggal. Beberapa visualisasi mendukung properti sel, kolom, atau baris untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti apa yang didukung.
Lihat juga:setColumnProperties getColumnProperty |
setColumnProperties(columnIndex, properties)
|
Tidak ada |
Menetapkan beberapa properti kolom. Beberapa visualisasi mendukung properti sel, kolom, atau baris untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti apa yang didukung.
Lihat juga: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
Tidak ada |
Menetapkan nilai terformat sel.
Lihat juga: getFormattedValue |
setProperty(rowIndex, columnIndex, name, value)
|
Tidak ada |
Menetapkan properti sel. Beberapa visualisasi mendukung properti baris, kolom, atau sel untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti yang didukung.
Lihat juga: setCell setProperties getProperty |
setProperties(rowIndex, columnIndex, properties)
|
Tidak ada |
Menetapkan beberapa properti sel. Beberapa visualisasi mendukung properti sel, kolom, atau baris untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti apa yang didukung.
Lihat juga: setCell setProperty getProperty |
setRowProperty(rowIndex, name, value)
|
Tidak ada |
Menetapkan properti baris. Beberapa visualisasi mendukung properti baris, kolom, atau sel untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti yang didukung.
Lihat juga: setRowProperties getRowProperty |
setRowProperties(rowIndex, properties)
|
Tidak ada |
Menetapkan beberapa properti baris. Beberapa visualisasi mendukung properti baris, kolom, atau sel untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti yang didukung.
Lihat juga: setRowProperty getRowProperty |
setTableProperty(name, value)
|
Tidak ada |
Menetapkan properti tabel tunggal. Beberapa visualisasi mendukung properti tabel, baris, kolom, atau sel untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti apa yang didukung.
Lihat juga: setTableProperties getTableProperty |
setTableProperties(properties) |
Tidak ada |
Menetapkan beberapa properti tabel. Beberapa visualisasi mendukung properti tabel, baris, kolom, atau sel untuk mengubah tampilan atau perilakunya; lihat dokumentasi visualisasi untuk melihat properti apa yang didukung.
Lihat juga: setTableProperty getTableProperty |
setValue(rowIndex, columnIndex, value) |
Tidak ada |
Menetapkan nilai sel. Selain menimpa nilai sel yang ada, metode ini juga akan menghapus nilai dan properti berformat untuk sel.
Lihat juga: setCell, setFormattedValue, setProperty, setProperties |
sort(sortColumns) |
Tidak ada |
Mengurutkan baris, sesuai dengan kolom pengurutan yang ditentukan. DataTable diubah dengan metode ini. Lihat
getSortedRows() untuk deskripsi
detail pengurutan. Metode ini tidak menampilkan data yang diurutkan.Lihat juga: getSortedRows Contoh: Untuk mengurutkan menurut kolom ketiga, lalu menurut kolom kedua, gunakan: data.sort([{column: 2}, {column: 1}]);
|
toJSON() |
String |
Menampilkan representasi JSON dari DataTable yang dapat diteruskan ke konstruktor DataTable . Contoh:
{"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] } |
Format Parameter data Literal JavaScript Konstruktor
Anda dapat menginisialisasi DataTable
dengan meneruskan objek literal string JavaScript ke dalam parameter data. Kita akan menyebut objek ini sebagai objek data. Anda dapat membuat kode untuk
objek ini secara manual, sesuai dengan deskripsi di bawah, atau Anda dapat menggunakan
library Python helper jika mengetahui cara
menggunakan Python, dan situs Anda dapat menggunakannya. Namun, jika Anda ingin membuat objek secara manual, bagian ini akan menjelaskan sintaksisnya.
Pertama, mari lihat contoh objek JavaScript sederhana yang mendeskripsikan tabel dengan tiga baris dan tiga kolom (String, Angka, dan Jenis tanggal):
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ], p: {foo: 'hello', bar: 'world!'} }
Sekarang, mari kita jelaskan sintaksisnya:
Objek data terdiri dari dua properti level atas yang diperlukan, cols
dan
rows
, serta properti p
opsional yang merupakan peta nilai arbitrer.
Catatan: Semua nama properti dan konstanta string yang ditampilkan peka huruf besar/kecil. Selain itu, properti yang dideskripsikan dengan nilai string harus diapit dengan tanda kutip.
Misalnya, jika Anda ingin menetapkan properti jenis sebagai angka, properti tersebut akan dinyatakan seperti ini: type: 'number'
tetapi nilai itu sendiri, sebagai angka, akan dinyatakan seperti ini: v: 42
Properti cols
cols
adalah array objek yang menjelaskan ID dan jenis setiap kolom. Setiap properti adalah objek dengan properti berikut (peka huruf besar/kecil):
-
type
[Wajib] Jenis data data di kolom. Mendukung nilai string berikut (contohnya termasuk properti v:, yang dijelaskan nanti):-
'boolean' - Nilai boolean JavaScript ('true' atau 'false'). Contoh nilai:
v:'true'
-
'number' - Nilai angka JavaScript. Contoh nilai:
v:7
,v:3.14
,v:-55
- 'string' - Nilai string JavaScript. Nilai contoh:
v:'hello'
-
'date' - Objek Tanggal JavaScript (bulan berbasis nol), dengan waktu yang terpotong. Contoh
nilai:
v:new Date(2008, 0, 15)
-
'datetime' - Objek Tanggal JavaScript termasuk waktu. Contoh nilai:
v:new Date(2008, 0, 15, 14, 30, 45)
-
'timeofday' - Array dari tiga angka dan angka keempat opsional, yang mewakili jam (0 menunjukkan tengah malam), menit, detik, dan milidetik opsional. Contoh nilai:
v:[8, 15, 0]
,v: [6, 12, 1, 144]
-
'boolean' - Nilai boolean JavaScript ('true' atau 'false'). Contoh nilai:
-
id
[Opsional] ID String untuk kolom. Harus unik di tabel. Gunakan karakter alfanumerik dasar, sehingga halaman host tidak memerlukan proses escape yang elegan untuk mengakses kolom di JavaScript. Berhati-hatilah agar tidak memilih kata kunci JavaScript. Contoh:id:'col_1'
-
label
[Opsional] Nilai string yang ditampilkan beberapa visualisasi untuk kolom ini. Contoh:label:'Height'
-
pattern
[Opsional] Pola string yang digunakan oleh sumber data untuk memformat nilai kolom numerik, tanggal, atau waktu. Ini hanya untuk referensi; Anda mungkin tidak perlu membaca polanya, dan pola ini tidak harus ada. Klien Visualisasi Google tidak menggunakan nilai ini (baca nilai terformat sel). JikaDataTable
berasal dari sumber data sebagai respons terhadap kueri dengan klausa format, pola yang Anda tetapkan dalam klausa tersebut mungkin akan ditampilkan dalam nilai ini. Standar pola yang direkomendasikan adalah ICU DecimalFormat dan SimpleDateFormat . -
p
[Opsional] Objek yang merupakan peta nilai kustom yang diterapkan ke sel. Nilai ini dapat berupa jenis JavaScript apa pun. Jika visualisasi Anda mendukung properti tingkat sel apa pun, visualisasi ini akan mendeskripsikannya; jika tidak, properti ini akan diabaikan. Contoh:p:{style: 'border: 1px solid green;'}
.
Contoh cols
cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'}]
Properti rows
menyimpan array objek baris.
Setiap objek baris memiliki satu properti wajib yang disebut c
, yang merupakan array sel di baris tersebut. Class ini juga memiliki properti p
opsional yang menentukan peta nilai kustom arbitrer untuk ditetapkan ke seluruh baris. Jika visualisasi Anda mendukung properti tingkat baris apa pun, properti tersebut akan
dijelaskan; jika tidak, properti ini akan diabaikan.
Setiap sel dalam tabel dijelaskan oleh objek dengan properti berikut:
-
v
[Opsional] Nilai sel. Jenis data harus cocok dengan jenis data kolom. Jika selnya null, propertiv
harus null, meskipun masih dapat memiliki propertif
danp
. -
f
[Opsional] Versi string dari nilaiv
, yang diformat untuk ditampilkan. Biasanya nilainya akan cocok, meskipun tidak perlu, sehingga jika Anda menentukanDate(2008, 0, 1)
untukv
, Anda harus menentukan "1 Januari 2008" atau beberapa string tersebut untuk properti ini. Nilai ini tidak dibandingkan dengan nilaiv
. Visualisasi tidak akan menggunakan nilai ini untuk penghitungan, hanya sebagai label untuk tampilan. Jika dihilangkan, versi stringv
akan otomatis dibuat menggunakan pemformat default. Nilaif
dapat diubah menggunakan formatter Anda sendiri, atau ditetapkan dengansetFormattedValue()
atausetCell()
, atau diambil dengangetFormattedValue()
. -
p
[Opsional] Objek yang merupakan peta nilai kustom yang diterapkan ke sel. Nilai ini dapat berupa jenis JavaScript apa pun. Jika visual Anda mendukung properti tingkat sel, visualisasi tersebut akan mendeskripsikannya. Properti ini dapat diambil dengan metodegetProperty()
dangetProperties()
. Contoh:p:{style: 'border: 1px solid green;'}
.
Sel dalam array baris harus dalam urutan yang sama seperti deskripsi kolomnya di cols
. Untuk menunjukkan sel null, Anda dapat menentukan null
, mengosongkan sel dalam
array, atau menghapus anggota array di akhir. Jadi, untuk menunjukkan baris dengan null untuk
dua sel pertama, Anda dapat menentukan [ , , {cell_val}]
atau
[null, null, {cell_val}]
.
Berikut adalah objek tabel contoh dengan tiga kolom, yang diisi dengan tiga baris data:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ] }
p Properti
Properti p
level tabel adalah peta nilai kustom yang diterapkan ke seluruh DataTable
. Nilai ini dapat berupa jenis JavaScript apa pun. Jika mendukung
properti tingkat tabel, visualisasi Anda akan mendeskripsikannya; jika tidak, properti ini akan tersedia
untuk digunakan aplikasi.
Contoh: p:{className: 'myDataTable'}
.
Class DataView
Tampilan hanya baca dari DataTable yang mendasarinya. DataView
memungkinkan pemilihan hanya subkumpulan kolom dan/atau baris. Hal ini juga memungkinkan pengurutan ulang kolom/baris, dan menduplikasi kolom/baris.
Tampilan adalah jendela aktif pada DataTable
yang mendasarinya, bukan snapshot statis data.
Namun, Anda tetap harus berhati-hati saat mengubah struktur tabel itu sendiri, seperti yang dijelaskan di sini:
-
Menambahkan atau menghapus kolom dari tabel pokok tidak akan tercermin oleh tampilan,
dan dapat menyebabkan perilaku tidak terduga dalam tampilan; Anda harus membuat
DataView
baru dariDataTable
untuk menerapkan perubahan ini. -
Menambahkan atau menghapus baris dari tabel yang mendasarinya aman dan perubahan akan
segera diterapkan ke tampilan (tetapi Anda harus memanggil
draw()
di visualisasi apa pun setelah perubahan ini untuk merender kumpulan baris baru). Perhatikan bahwa jika tampilan Anda telah memfilter baris dengan memanggil salah satu metodesetRows() or hideRows()
, lalu menambahkan atau menghapus baris dari tabel pokok, perilaku tidak diharapkan; Anda harus membuatDataView
baru untuk mencerminkan tabel baru. -
Perubahan nilai sel dalam sel yang ada akan aman, dan perubahan akan langsung diterapkan
ke
DataView
(tetapi Anda harus memanggildraw()
pada visualisasi apa pun setelah perubahan ini agar nilai sel baru dirender).
Anda juga dapat membuat DataView
dari DataView
lain. Perhatikan
bahwa setiap kali tabel atau tampilan dasar disebutkan, tabel ini mengacu pada level
tepat di bawah tingkat ini. Dengan kata lain, objek ini mengacu pada objek data yang digunakan untuk membuat DataView
ini.
DataView
juga mendukung kolom kalkulasi; ini adalah kolom yang nilainya dihitung dengan cepat menggunakan fungsi yang Anda berikan. Jadi, misalnya, Anda dapat menyertakan kolom
yang merupakan jumlah dari dua kolom sebelumnya, atau kolom yang menghitung dan menampilkan kuartal kalender
tanggal dari kolom lain. Lihat setColumns()
untuk detail selengkapnya.
Jika Anda memodifikasi DataView
dengan menyembunyikan atau menampilkan baris atau kolom, visualisasi tidak akan terpengaruh hingga Anda memanggil draw()
pada visualisasi lagi.
Anda dapat menggabungkan DataView.getFilteredRows()
dengan DataView.setRows()
untuk
membuat DataView
dengan subset data yang menarik, seperti yang ditunjukkan di sini:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); data.setCell(3, 0, 'Frank'); data.setCell(3, 1, new Date(2007, 11, 28)); data.setCell(4, 0, 'Floyd'); data.setCell(4, 1, new Date(2005, 3, 13)); data.setCell(5, 0, 'Fritz'); data.setCell(5, 1, new Date(2007, 9, 2)); // Create a view that shows everyone hired since 2007. var view = new google.visualization.DataView(data); view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}])); var table = new google.visualization.Table(document.getElementById('test_dataview')); table.draw(view, {sortColumn: 1});
Konstruktor
Ada dua cara untuk membuat instance DataView
baru:
Konstruktor 1
var myView = new google.visualization.DataView(data)
data
-
DataTable
atauDataView
yang digunakan untuk menginisialisasi tampilan. Secara default, tampilan berisi semua kolom dan baris di tabel atau tampilan data pokok dalam urutan asli. Untuk menyembunyikan atau menampilkan baris atau kolom dalam tampilan ini, panggil metodeset...()
atauhide...()
yang sesuai.
Lihat juga:
setColumns(), hideColumns(), setRows(), hideRows().
Konstruktor 2
Konstruktor ini membuat DataView
baru dengan menetapkan DataView
serial ke DataTable
.
Proses ini membantu Anda membuat ulang DataView
yang diserialisasi menggunakan
DataView.toJSON()
.
var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
- data
-
Objek
DataTable
yang Anda gunakan untuk membuatDataView
, tempat Anda memanggilDataView.toJSON()
. Jika tabel ini berbeda dari tabel asli, Anda akan mendapatkan hasil yang tidak dapat diprediksi. - lihatAsJson
-
String JSON yang ditampilkan oleh
DataView.toJSON()
. Ini adalah deskripsi baris yang akan ditampilkan atau disembunyikan dari DataTable data.
Metode
Metode | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
Lihat deskripsi dalam bahasa DataTable . |
Sama dengan metode DataTable yang setara, kecuali bahwa indeks baris/kolom mengacu pada indeks dalam tampilan, bukan dalam tabel/tampilan pokok.
|
|
getTableColumnIndex(viewColumnIndex)
|
Angka |
Menampilkan indeks dalam tabel pokok (atau tampilan) kolom tertentu yang ditentukan oleh indeksnya
dalam tampilan ini.
Contoh: Jika |
getTableRowIndex(viewRowIndex) |
Angka |
Menampilkan indeks dalam tabel pokok (atau tampilan) baris tertentu yang ditentukan oleh indeksnya dalam tampilan ini.
Contoh: Jika |
getViewColumnIndex(tableColumnIndex)
|
Angka |
Menampilkan indeks dalam tampilan ini yang dipetakan ke kolom tertentu yang ditentukan oleh indeksnya dalam tabel (atau tampilan) pokok. Jika ada lebih dari satu indeks, tampilkan indeks pertama (terkecil). Jika tidak ada indeks seperti itu (kolom yang ditentukan tidak ada di tampilan), tampilkan -1.
Contoh: Jika |
getViewColumns() |
Array angka |
Menampilkan kolom dalam tampilan ini secara berurutan. Artinya, jika Anda memanggil |
getViewRowIndex(tableRowIndex) |
Angka |
Menampilkan indeks dalam tampilan ini yang dipetakan ke baris tertentu yang ditentukan oleh indeksnya dalam tabel (atau tampilan) pokok. Jika ada lebih dari satu indeks, tampilkan indeks pertama (terkecil). Jika tidak ada indeks seperti itu (baris yang ditentukan tidak ada di tampilan), tampilkan -1.
Contoh: Jika |
getViewRows() |
Array angka |
Menampilkan baris dalam tampilan ini secara berurutan. Artinya, jika Anda memanggil |
hideColumns(columnIndexes) |
tidak ada |
Menyembunyikan kolom yang ditentukan dari tampilan saat ini.
Contoh: Jika Anda memiliki tabel dengan 10 kolom, lalu memanggil
|
hideRows(min, max) |
Tidak ada |
Menyembunyikan semua baris dengan indeks yang berada di antara ukuran minimum dan maksimum (inklusif) dari tampilan saat ini.
Ini adalah sintaksis praktis untuk |
hideRows(rowIndexes) |
Tidak ada |
Menyembunyikan baris yang ditentukan dari tampilan saat ini.
Contoh: Jika Anda memiliki tabel yang berisi 10 baris, dan Anda memanggil
|
setColumns(columnIndexes) |
Tidak ada |
Menentukan kolom yang akan terlihat dalam tampilan ini. Setiap kolom yang tidak ditentukan akan disembunyikan. Ini adalah array indeks kolom di tabel/tampilan dasar, atau kolom kalkulasi. Jika Anda tidak memanggil metode ini, defaultnya adalah menampilkan semua kolom. Array juga dapat berisi duplikat, untuk menampilkan kolom yang sama beberapa kali. Kolom akan ditampilkan sesuai urutan yang ditentukan.
Contoh: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); } |
setRows(min, max) |
Tidak ada |
Menetapkan baris dalam tampilan ini untuk menjadi semua indeks (dalam tabel/tampilan pokok) yang terletak di antara
min dan maks (inklusif). Ini adalah sintaksis praktis untuk |
setRows(rowIndexes) |
Tidak ada |
Menetapkan baris yang terlihat dalam tampilan ini, berdasarkan nomor indeks dari tabel/tampilan pokok.
Contoh: Untuk membuat tampilan dengan baris tiga dan nol pada tabel/tampilan
yang mendasarinya: |
toDataTable() |
TabelData |
Menampilkan objek DataTable yang diisi dengan baris dan kolom yang terlihat di DataView .
|
toJSON() |
string |
Menampilkan representasi string dari DataView ini. String ini tidak berisi
data sebenarnya; string ini hanya berisi setelan khusus DataView seperti baris dan
kolom yang terlihat. Anda dapat menyimpan string ini dan meneruskannya ke konstruktor
DataView.fromJSON()
statis untuk membuat ulang tampilan ini. Ini tidak akan mencakup kolom yang dihasilkan.
|
Class ChartWrapper
Class ChartWrapper
digunakan untuk menggabungkan diagram Anda dan menangani semua kueri pemuatan, gambar, dan
Sumber data untuk diagram Anda. Class ini mengekspos metode praktis untuk menetapkan nilai pada
diagram dan menggambarnya. Class ini menyederhanakan pembacaan dari sumber data, karena Anda tidak perlu membuat pengendali callback kueri. Anda juga dapat menggunakannya untuk menyimpan diagram dengan mudah untuk digunakan kembali.
Bonus lain dari penggunaan ChartWrapper
adalah Anda dapat mengurangi jumlah pemuatan
library menggunakan pemuatan dinamis. Selain itu, Anda tidak perlu memuat paket secara eksplisit karena ChartWrapper
akan menangani pencarian dan pemuatan paket diagram untuk Anda.
Lihat contoh di bawah untuk mendapatkan detailnya.
Namun, ChartWrapper
saat ini hanya menyebarkan subset peristiwa yang ditampilkan oleh diagram: pilih, siap, dan error. Peristiwa lain tidak dikirimkan melalui instance ChartWrapper; untuk mendapatkan peristiwa lain, Anda harus memanggil getChart()
dan berlangganan peristiwa secara langsung pada handle diagram, seperti yang ditunjukkan di sini:
var wrapper; function drawVisualization() { // Draw a column chart wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], [700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'visualization' }); // Never called. google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler); // Must wait for the ready event in order to // request the chart and subscribe to 'onmouseover'. google.visualization.events.addListener(wrapper, 'ready', onReady); wrapper.draw(); // Never called function uselessHandler() { alert("I am never called!"); } function onReady() { google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler); } // Called function usefulHandler() { alert("Mouseover event!"); } }
Konstruktor
ChartWrapper(opt_spec)
- spesifikasi_pengoptimalan
- [Opsional] - Objek JSON yang menentukan diagram atau versi string serial dari objek tersebut. Format objek ini ditampilkan dalam dokumentasi DrawChart(). Jika tidak ditentukan, Anda harus menetapkan semua properti yang sesuai menggunakan metode set... yang diekspos oleh objek ini.
Metode
ChartWrapper mengekspos metode tambahan berikut:
Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|
draw(opt_container_ref) |
Tidak ada |
Menggambar diagram. Anda harus memanggil metode ini setelah perubahan yang Anda buat pada diagram atau data untuk menampilkan perubahan.
|
toJSON() |
String | Menampilkan versi string dari representasi JSON diagram. |
clone() |
ChartWrapper | Menampilkan salinan mendalam dari wrapper diagram. |
getDataSourceUrl() |
String | Jika diagram ini mendapatkan datanya dari sumber data, menampilkan URL untuk sumber data tersebut. Jika tidak, menampilkan null. |
getDataTable() |
google.visualization.DataTable |
Jika diagram ini mendapatkan datanya dari
Setiap perubahan yang Anda buat pada objek yang ditampilkan akan tercermin oleh diagram saat berikutnya Anda memanggil |
getChartType() |
String |
Nama class diagram yang digabungkan. Jika ini adalah diagram Google, nama tidak akan memenuhi syarat
dengan google.visualization . Jadi, misalnya, jika ini adalah diagram Peta Hierarkis,
diagram akan menampilkan "Peta Hierarki" bukan "google.visualization.treemap".
|
getChartName() |
String | Menampilkan nama diagram yang ditetapkan oleh setChartName() . |
getChart() |
Referensi objek diagram |
Menampilkan referensi ke diagram yang dibuat oleh ChartWrapper ini, misalnya
google.visualization.BarChart
atau
google.visualization.ColumnChart
.
Ini akan menampilkan null sampai Anda memanggil draw() pada objek ChartWrapper, dan menampilkan peristiwa siap. Metode yang dipanggil pada objek yang ditampilkan akan tercermin di halaman.
|
getContainerId() |
String | ID elemen penampung DOM diagram. |
getQuery() |
String | String kueri untuk diagram ini, jika ada dan membuat kueri ke sumber data. |
getRefreshInterval() |
Angka | Semua interval pembaruan untuk diagram ini, jika membuat kueri ke sumber data. Nol menunjukkan tidak ada penyegaran. |
getOption(key, opt_default_val) |
Jenis apa saja |
Menampilkan nilai opsi diagram yang ditentukan
|
getOptions() |
Object | Menampilkan objek opsi untuk diagram ini. |
getView() |
Objek ATAU Array |
Menampilkan objek penginisialisasi DataView , dalam format yang sama seperti
dataview.toJSON() , atau array objek tersebut.
|
setDataSourceUrl(url) |
Tidak ada | Menetapkan URL sumber data yang akan digunakan untuk diagram ini. Jika Anda juga menetapkan tabel data untuk objek ini, URL sumber data akan diabaikan. |
setDataTable(table) |
Tidak ada | Menetapkan DataTable untuk diagram. Teruskan salah satu hal berikut: null; objek DataTable; representasi JSON dari DataTable; atau array yang mengikuti sintaksis arrayToDataTable(). |
setChartType(type) |
Tidak ada |
Menetapkan jenis diagram. Teruskan nama class dari diagram yang digabungkan. Jika ini adalah diagram Google,
jangan mencocokkannya dengan google.visualization . Jadi, misalnya, untuk diagram lingkaran, teruskan "PieChart".
|
setChartName(name) |
Tidak ada | Menetapkan nama arbitrer untuk diagram. Ini tidak ditampilkan di mana pun pada diagram, kecuali jika diagram kustom secara eksplisit dirancang untuk menggunakannya. |
setContainerId(id) |
Tidak ada | Menetapkan ID elemen DOM yang memuat untuk diagram. |
setQuery(query_string) |
Tidak ada | Menetapkan string kueri, jika diagram ini membuat kueri sumber data. Anda juga harus menetapkan URL sumber data jika menentukan nilai ini. |
setRefreshInterval(interval) |
Tidak ada | Menetapkan interval pembaruan untuk diagram ini, jika membuat kueri ke sumber data. Anda juga harus menetapkan URL sumber data jika menentukan nilai ini. Nol menunjukkan tidak ada pembaruan. |
setOption(key, value) |
Tidak ada |
Menetapkan nilai opsi diagram tunggal, dengan kunci adalah nama opsi dan nilai adalah nilai. Untuk membatalkan penetapan opsi, teruskan null untuk nilai tersebut. Perhatikan bahwa kunci dapat berupa nama yang memenuhi syarat, seperti 'vAxis.title' .
|
setOptions(options_obj) |
Tidak ada | Menetapkan objek opsi lengkap untuk diagram. |
setView(view_spec) |
Tidak ada |
Menetapkan objek penginisialisasi DataView , yang berfungsi sebagai filter atas data
pokok. Wrapper diagram harus memiliki data pokok dari DataTable atau sumber data untuk menerapkan tampilan ini. Anda dapat meneruskan string atau objek penginisialisasi DataView ,
seperti yang ditampilkan oleh dataview.toJSON() . Anda juga dapat meneruskan array objek penginisialisasi DataView , yang dalam kasus ini DataView pertama dalam array diterapkan ke data pokok untuk membuat tabel data baru, dan DataView kedua diterapkan ke tabel data yang dihasilkan dari penerapan DataView pertama, dan seterusnya.
|
Peristiwa
Objek ChartWrapper menampilkan peristiwa berikut. Perhatikan bahwa Anda harus memanggil ChartWrapper.draw()
sebelum peristiwa apa pun ditampilkan.
Name | Deskripsi | Properti |
---|---|---|
error |
Dipicu jika terjadi error saat mencoba merender diagram. | id, pesan |
ready |
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 draw , dan memanggilnya hanya setelah peristiwa diaktifkan.
|
Tidak ada |
select |
Dipicu jika pengguna mengklik kolom atau legenda. Saat elemen diagram dipilih, sel yang sesuai di tabel data dipilih; saat legenda dipilih, kolom yang sesuai di tabel data akan dipilih. Untuk mempelajari apa yang telah dipilih, panggil
ChartWrapper.getChart().
getSelection() . Perhatikan bahwa tindakan ini hanya akan ditampilkan jika jenis diagram yang mendasarinya memunculkan peristiwa pemilihan.
|
Tidak ada |
Contoh
Dua cuplikan berikut membuat diagram garis yang setara. Contoh pertama menggunakan notasi literal JSON untuk menentukan diagram; yang kedua menggunakan metode ChartWrapper untuk menetapkan nilai-nilai ini.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script> google.charts.load('current); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrap = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'containerId':'visualization', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); wrap.draw(); } </script> </head> <body> <div id="visualization" style="height: 400px; width: 400px;"></div> </body> </html>
Diagram yang sama, kini menggunakan metode penyetel:
<!DOCTYPE html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8'/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { // Define the chart using setters: var wrap = new google.visualization.ChartWrapper(); wrap.setChartType('LineChart'); wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); wrap.setContainerId('visualization'); wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'}); wrap.draw(); } </script> </head> <body> <div id='visualization' style='height: 400px; width: 400px;'></div> </body> </html>
Class ChartEditor
Class ChartEditor
digunakan untuk membuka kotak dialog dalam halaman yang memungkinkan pengguna
menyesuaikan visualisasi dengan cepat.
Untuk menggunakan ChartEditor:
-
Muat paket
charteditor
. Digoogle.charts.load()
, muat paket 'charteditor'. Anda tidak perlu memuat paket untuk jenis diagram yang Anda render di editor; editor diagram akan memuat paket apa pun sesuai kebutuhan. -
Buat objek
ChartWrapper
yang menentukan diagram yang dapat disesuaikan oleh pengguna. Diagram ini akan ditampilkan dalam dialog, dan pengguna menggunakan editor untuk mendesain ulang diagram, mengubah jenis diagram, atau bahkan mengubah data sumber. -
Buat instance ChartEditor baru, dan daftar untuk memproses peristiwa "ok". Peristiwa ini dilempar saat pengguna mengklik tombol "OK" pada dialog. Setelah diterima, Anda harus memanggil
ChartEditor.getChartWrapper()
untuk mengambil diagram yang dimodifikasi pengguna. -
Telepon
ChartEditor.openDialog()
, dengan meneruskanChartWrapper
. Tindakan ini akan membuka dialog. Tombol dialog memungkinkan pengguna menutup editor. InstanceChartEditor
tersedia selama berada dalam cakupan; dan tidak otomatis dihancurkan setelah pengguna menutup dialog. - Untuk memperbarui diagram dalam kode, panggil
setChartWrapper()
.
Metode
Metode | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
openDialog(chartWrapper, opt_options) |
null |
Membuka editor diagram sebagai kotak dialog tersemat di halaman. Fungsi ini langsung kembali; tidak menunggu dialog ditutup. Jika tidak kehilangan cakupan
instance, Anda dapat memanggil
|
getChartWrapper() |
ChartWrapper |
Menampilkan ChartWrapper yang mewakili diagram, dengan modifikasi pengguna. |
setChartWrapper(chartWrapper) |
null |
Gunakan metode ini untuk memperbarui diagram yang dirender di editor.
chartWrapper - Objek |
closeDialog() |
null | Menutup kotak dialog editor diagram. |
Opsi
Editor diagram mendukung opsi berikut:
Name | Jenis | Default | Deskripsi |
---|---|---|---|
dataSourceInput |
Tuas elemen atau 'urlbox' | null |
Gunakan ini untuk memungkinkan pengguna menentukan sumber data untuk diagram. Properti ini dapat berupa salah satu dari dua nilai berikut:
|
Peristiwa
Editor diagram akan menampilkan peristiwa berikut:
Name | Deskripsi | Properti |
---|---|---|
ok |
Dipicu jika pengguna mengklik tombol "Oke" pada dialog. Setelah menerima metode ini, Anda harus memanggil getChartWrapper() untuk mengambil diagram yang dikonfigurasi pengguna.
|
tidak ada |
cancel |
Dipicu jika pengguna mengklik tombol "Cancel" pada dialog. | tidak ada |
Contoh
Kode contoh berikut membuka dialog editor diagram dengan diagram garis terisi. Jika pengguna
mengklik "Oke", diagram yang diedit akan disimpan ke <div>
yang ditentukan
di halaman.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['charteditor']}); </script> <script type="text/javascript"> google.charts.setOnLoadCallback(loadEditor); var chartEditor = null; function loadEditor() { // Create the chart to edit. var wrapper = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chartEditor = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEditor, 'ok', redrawChart); chartEditor.openDialog(wrapper, {}); } // On "OK" save the chart to a <div> on the page. function redrawChart(){ chartEditor.getChartWrapper().draw(document.getElementById('vis_div')); } </script> </head> <body> <div id="vis_div" style="height: 400px; width: 600px;"></div> </body> </html>
Metode Manipulasi Data
Namespace google.visualization.data
menyimpan metode statis untuk menjalankan operasi seperti SQL pada objek DataTable
, misalnya menggabungkan atau mengelompokkannya menurut nilai kolom.
Namespace google.visualization.data
mengekspos metode berikut:
Metode | Deskripsi |
---|---|
google.visualization.data.group
|
Melakukan tindakan SQL GROUP BY untuk menampilkan tabel yang dikelompokkan menurut nilai dalam kolom yang ditentukan. |
google.visualization.data.join
|
Menggabungkan dua tabel data pada satu atau beberapa kolom utama. |
grup()
Mengambil objek DataTable
yang terisi dan melakukan operasi GROUP BY seperti SQL, dengan menampilkan tabel berisi baris yang dikelompokkan berdasarkan nilai kolom yang ditentukan. Perhatikan bahwa tindakan ini tidak mengubah
DataTable
input.
Tabel yang ditampilkan mencakup satu baris untuk setiap kombinasi nilai di kolom kunci yang ditentukan. Setiap baris menyertakan kolom kunci, ditambah satu kolom dengan nilai kolom gabungan di semua baris yang cocok dengan kombinasi tombol tersebut (misalnya, jumlah atau jumlah semua nilai di kolom tertentu).
Namespace google.visualization.data
menyertakan beberapa nilai agregasi yang berguna (misalnya, sum dan count), tetapi Anda dapat menentukannya sendiri (misalnya, standardDeviation atau secondHigh). Petunjuk tentang cara menentukan agregator Anda sendiri diberikan
setelah deskripsi metode.
Sintaksis
google.visualization.data.group(data_table, keys, columns)
- tabel_data
-
DataTable
input. Ini tidak akan diubah dengan memanggilgroup()
. - kunci
-
Array angka dan/atau objek yang menentukan kolom yang akan dikelompokkan. Tabel hasil
mencakup setiap kolom dalam array ini, serta setiap kolom dalam kolom. Jika berupa angka,
ini adalah indeks kolom dari input
DataTable
yang akan dikelompokkan. Jika sebuah objek, objek tersebut akan menyertakan fungsi yang dapat mengubah kolom yang ditentukan (misalnya, menambahkan 1 ke nilai dalam kolom tersebut). Objek harus memiliki properti berikut:- column - Angka yang merupakan indeks kolom dari dt untuk menerapkan transformasi.
- pengubah - Fungsi yang menerima satu nilai (nilai sel di kolom tersebut untuk setiap baris) dan menampilkan nilai yang diubah. Fungsi ini digunakan untuk mengubah nilai kolom untuk membantu dalam pengelompokan: misalnya, dengan memanggil fungsi whoQuarter yang menghitung kuartal dari kolom tanggal, sehingga API dapat mengelompokkan baris berdasarkan kuartal. Nilai yang dihitung akan ditampilkan dalam kolom kunci dalam tabel yang ditampilkan. Fungsi ini dapat dideklarasikan inline di dalam objek ini, atau dapat berupa fungsi yang Anda tentukan di tempat lain dalam kode Anda (harus dalam cakupan panggilan). API ini menyediakan satu fungsi pengubah sederhana; berikut petunjuknya tentang cara membuat fungsi Anda sendiri yang lebih berguna. Anda harus mengetahui jenis data yang dapat diterima oleh fungsi ini, dan memanggilnya hanya di kolom jenis tersebut. Anda juga harus mengetahui jenis nilai yang ditampilkan dari fungsi ini, dan mendeklarasikannya di properti type yang dijelaskan selanjutnya.
- jenis - Jenis yang ditampilkan oleh pengubah fungsi. Ini harus berupa nama jenis string JavaScript, misalnya: 'number' atau 'boolean'.
-
label - [Opsional] Label string untuk menetapkan kolom ini di
DataTable
yang ditampilkan. -
id - [Opsional] ID string untuk menetapkan kolom ini dalam
DataTable
yang ditampilkan.
Contoh:[0]
,[0,2]
,[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
- kolom
-
[Opsional] Memungkinkan Anda menentukan kolom, selain kolom kunci, yang akan disertakan dalam
tabel output. Karena semua baris dalam grup baris dikompresi menjadi satu baris output,
Anda harus menentukan nilai yang akan ditampilkan untuk grup baris tersebut. Misalnya, Anda dapat memilih untuk menampilkan nilai kolom dari baris pertama dalam kumpulan, atau rata-rata dari semua baris dalam grup tersebut.
column adalah array objek, dengan properti berikut:
- column - Angka yang menentukan indeks kolom yang akan ditampilkan.
- agregasi - Fungsi yang menerima array semua nilai kolom ini dalam grup baris ini dan menampilkan satu nilai untuk ditampilkan di baris hasil. Nilai yang ditampilkan harus dari jenis yang ditentukan oleh properti type objek. Detail tentang pembuatan fungsi agregasi Anda sendiri diberikan di bawah ini. Anda harus mengetahui jenis data yang diterima oleh metode ini dan hanya memanggilnya pada kolom dari jenis yang sesuai. API ini menyediakan beberapa fungsi agregasi yang berguna. Lihat Fungsi Agregasi yang Diberikan di bawah untuk mengetahui daftar, atau Membuat fungsi agregasi untuk mempelajari cara menulis fungsi agregasi Anda sendiri.
- jenis - Jenis nilai yang ditampilkan dari fungsi agregasi. Ini harus berupa nama jenis string JavaScript, misalnya: 'number' atau 'boolean'.
- label - [Opsional] Label string yang akan diterapkan ke kolom ini dalam tabel yang ditampilkan.
- id - [Opsional] ID string untuk diterapkan ke kolom ini dalam tabel yang ditampilkan.
Nilai Hasil
DataTable
dengan satu kolom untuk setiap kolom yang tercantum di kunci, dan satu kolom
untuk setiap kolom yang tercantum di kolom. Tabel diurutkan berdasarkan baris kunci, dari kiri ke kanan.
Contoh
// This call will group the table by column 0 values. // It will also show column 3, which will be a sum of // values in that column for that row group. var result = google.visualization.data.group( dt, [0], [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}] ); *Input table* 1 'john' 'doe' 10 1 'jane' 'doe' 100 3 'jill' 'jones' 50 3 'jack' 'jones' 75 5 'al' 'weisenheimer' 500 *Output table* 1 110 3 125 5 500
Fungsi Pengubah yang Disediakan
API ini menyediakan fungsi pengubah berikut yang dapat Anda teruskan ke kunci. pengubah untuk menyesuaikan perilaku pengelompokan.
Fungsi | Jenis Array Input | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|---|
google.visualization.data.month |
Tanggal | angka | Dengan tanggal, atribut akan menampilkan nilai bulan berbasis nol (0, 1, 2, dan seterusnya). |
Fungsi Agregasi yang Diberikan
API menyediakan fungsi agregasi berikut yang dapat Anda teruskan ke kolom. Agregasi array parameter.
Fungsi | Jenis Array Input | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|---|
google.visualization.data.avg |
angka | angka | Nilai rata-rata array yang diteruskan. |
google.visualization.data.count |
jenis apa pun | angka | Jumlah baris dalam grup. Nilai duplikat dan null akan dihitung. |
google.visualization.data.max |
angka, string, Tanggal | angka, string, Tanggal, null | Nilai maksimum dalam array. Untuk string, ini adalah item pertama dalam daftar yang diurutkan secara leksikografis; untuk nilai Tanggal, ini adalah tanggal terbaru. Null akan diabaikan. Menampilkan null jika tidak ada maksimum. |
google.visualization.data.min |
angka, string, Tanggal | angka, string, Tanggal, null | Nilai minimum dalam array. Untuk string, ini adalah item terakhir dalam daftar yang diurutkan secara leksikografis; untuk nilai Tanggal, ini adalah tanggal paling awal. Null akan diabaikan. Menampilkan null jika tidak ada nilai minimum. |
google.visualization.data.sum |
angka | angka | Jumlah semua nilai dalam array. |
Membuat fungsi pengubah
Anda dapat membuat fungsi pengubah untuk melakukan nilai kunci transformasi sederhana sebelum fungsi group()
mengelompokkan baris. Fungsi ini mengambil satu nilai sel, melakukan
tindakan padanya (misalnya, menambahkan 1 ke nilai), dan menampilkannya. Jenis input dan return tidak harus sama dengan jenis, tetapi pemanggil harus mengetahui jenis input dan output. Berikut adalah contoh
fungsi yang menerima tanggal dan menampilkan kuartal:
// Input type: Date // Return type: number (1-4) function getQuarter(someDate) { return Math.floor(someDate.getMonth()/3) + 1; }
Membuat fungsi agregasi
Anda dapat membuat fungsi agregasi yang menerima serangkaian nilai kolom dalam grup baris dan menampilkan angka tunggal: misalnya, menampilkan jumlah atau rata-rata nilai. Berikut adalah implementasi fungsi agregasi jumlah yang disediakan, yang menampilkan jumlah jumlah baris dalam grup baris:
// Input type: Array of any type // Return type: number function count(values) { return values.length; }
join()
Metode ini menggabungkan dua tabel data (objek DataTable
atau DataView
) menjadi
satu tabel hasil, mirip dengan pernyataan SQL JOIN. Anda menentukan satu atau beberapa pasangan kolom (kolom key) di antara dua tabel, dan tabel output akan menyertakan baris menurut metode join yang Anda tentukan: hanya baris yang cocok dengan kedua kunci tersebut; semua baris dari satu tabel; atau semua baris dari kedua tabel, baik kunci tersebut cocok atau tidak. Tabel hasil hanya menyertakan kolom utama, ditambah kolom tambahan yang Anda tentukan. Perhatikan bahwa dt2 tidak boleh memiliki
kunci duplikat, tetapi dt1 bisa. Istilah "kunci" berarti kombinasi dari semua nilai kolom
kunci, bukan nilai kolom kunci tertentu; jadi jika sebuah baris memiliki nilai sel A | B | C dan kolom
0 dan 1 adalah kolom kunci, maka kunci untuk baris tersebut adalah AB.
Sintaksis
google.visualization.data.join(dt1, dt2, joinMethod, keys, dt1Columns, dt2Columns);
- dt1
DataTable
yang terisi untuk bergabung dengan dt2.- DT2
-
DataTable
yang terisi untuk bergabung dengan dt1. Tabel ini tidak boleh memiliki beberapa kunci yang identik (dengan kunci adalah kombinasi dari nilai kolom kunci). - joinMethod
-
String yang menentukan jenis join. Jika dt1 memiliki beberapa baris yang cocok dengan satu baris dt2, tabel output akan menyertakan semua baris dt1 yang cocok. Pilih dari nilai berikut:
- 'full' - Tabel output menyertakan semua baris dari kedua tabel, terlepas dari apakah tombol cocok atau tidak. Baris yang tidak cocok akan memiliki entri sel null; baris yang cocok digabungkan.
- 'inner' - Gabungan lengkap difilter agar hanya menyertakan baris yang cocok dengan kunci.
- 'left' - Tabel output menyertakan semua baris dari dt1, terlepas dari ada atau tidaknya baris yang cocok dari dt2.
- 'right' - Tabel output menyertakan semua baris dari dt2, terlepas dari ada atau tidaknya baris yang cocok dari dt1.
- kunci
-
Array kolom utama untuk dibandingkan dari kedua tabel. Setiap pasangan adalah array dua elemen, yang pertama adalah kunci di dt1, yang kedua adalah kunci di dt2. Array ini dapat menentukan kolom berdasarkan indeks, ID, atau labelnya. Lihat
getColumnIndex
.
Kolom harus berjenis sama di kedua tabel. Semua kunci yang ditentukan harus sesuai dengan aturan yang diberikan oleh joinMethod untuk menyertakan baris dari tabel. Kolom kunci selalu disertakan dalam tabel output. Hanya dt1, tabel sebelah kiri, yang dapat menyertakan kunci duplikat; kunci di dt2 harus unik. Istilah "kunci" di sini berarti kumpulan kolom kunci yang unik, bukan nilai masing-masing kolom. Misalnya, jika kolom kunci Anda adalah A dan B, tabel berikut hanya akan memiliki nilai kunci unik (dan dengan demikian dapat digunakan sebagai dt2):J B Jeni Merah Jeni Biru Fredi Merah [[0,0], [2,1]]
membandingkan nilai dari kolom pertama di kedua tabel serta kolom ketiga dari dt1 dengan kolom kedua dari dt2. - Kolom dt1
-
Array kolom dari dt1 yang akan disertakan dalam tabel output, selain
kolom utama dt1. Array ini dapat menentukan kolom berdasarkan indeks, ID, atau labelnya, baca
getColumnIndex
. - Kolom dt2
-
Array kolom dari dt2 yang akan disertakan dalam tabel output, selain
kolom utama dt2. Array ini dapat menentukan kolom berdasarkan indeks, ID, atau labelnya, baca
getColumnIndex
.
Nilai Hasil
DataTable
dengan kolom kunci, dt1Columns, dan dt2Columns. Tabel ini diurutkan berdasarkan kolom kunci, dari kiri ke kanan. Jika joinMethod adalah 'inner', semua
sel utama harus diisi. Untuk metode penggabungan lainnya, jika tidak ditemukan kunci yang cocok, tabel akan memiliki null untuk sel kunci yang tidak cocok.
Contoh
*Tables* dt1 dt2 bob | 111 | red bob | 111 | point bob | 111 | green ellyn | 222 | square bob | 333 | orange jane | 555 | circle fred | 555 | blue jane | 777 | triangle jane | 777 | yellow fred | 666 | dodecahedron * Note that right table has duplicate Jane entries, but the key we will use is * columns 0 and 1. The left table has duplicate key values, but that is * allowed. *Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point jane | 777 | yellow | triangle * Note that both rows from dt1 are included and matched to * the equivalent dt2 row. *Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null ellyn | 222 | null | square fred | 555 | blue | null fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle *Left join* google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null fred | 555 | blue | null jane | 777 | yellow | triangle *Right join* google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point ellyn | 222 | null | square fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle
Pemformat
Google Visualization API menyediakan pemformat yang dapat digunakan untuk memformat ulang data dalam visualisasi. Formatter ini mengubah nilai terformat untuk kolom yang ditentukan di semua baris. Perhatikan bahwa:
- Pemformat hanya mengubah nilai yang diformat, bukan nilai yang mendasari. Misalnya, nilai yang ditampilkan adalah "$1.000,00", tetapi nilai dasarnya akan tetap menjadi "1000".
- Pemformat hanya memengaruhi satu kolom dalam satu waktu; untuk memformat ulang beberapa kolom, terapkan formatter ke setiap kolom yang ingin Anda ubah.
- Jika Anda juga menggunakan pemformat yang ditentukan pengguna, pemformat Visualisasi Google tertentu akan mengganti semua pemformat yang ditetapkan pengguna.
- Dapatkan objek
DataTable
yang terisi. - Untuk setiap kolom yang ingin diformat ulang:
- Buat objek yang akan menentukan semua opsi untuk pemformat Anda. Ini adalah objek JavaScript dasar dengan serangkaian properti dan nilai. Lihat dokumentasi pemformat untuk melihat properti yang didukung. (Secara opsional, Anda dapat meneruskan objek notasi literal objek yang menentukan opsi Anda.)
- Buat pemformat dengan meneruskan objek opsi.
-
Panggil
formatter
.format(table, colIndex)
, dengan meneruskanDataTable
dan nomor kolom (berbasis nol) dari data yang akan diformat ulang. Perhatikan bahwa Anda hanya dapat menerapkan satu pemformat ke setiap kolom; menerapkan formatter kedua hanya akan menimpa efek dari kolom pertama.
Penting: Banyak formatter memerlukan tag HTML untuk menampilkan format khusus; jika visualisasi Anda mendukung opsiallowHtml
, Anda harus menetapkannya ke true.
Format sebenarnya yang diterapkan pada data berasal dari lokalitas yang memuat API tersebut. Untuk detail selengkapnya, lihat memuat diagram dengan lokalitas tertentu .
Penting: Pemformat hanya dapat digunakan dengan DataTable
; dan tidak dapat
digunakan dengan DataView
(objek DataView
bersifat hanya baca).
Berikut adalah langkah-langkah umum untuk menggunakan pemformat:
Berikut ini contoh perubahan format tanggal kolom tanggal untuk menggunakan format tanggal panjang (“1 Januari 2009”):
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(3); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); // Create a formatter. // This example uses object literal notation to define the options. var formatter = new google.visualization.DateFormat({formatType: 'long'}); // Reformat our data. formatter.format(data, 1); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true});
Sebagian besar pemformat mengekspos dua metode berikut:
Metode | Deskripsi |
---|---|
google.visualization.formatter_name(options) |
Konstruktor, dengan formatter_name adalah nama kelas formatter tertentu.
// Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options); |
format(data, colIndex) |
Memformat ulang data di kolom yang ditentukan.
|
Google Visualization API menyediakan formatter berikut:
Nama Pemformat | Deskripsi |
---|---|
Format Panah | Menambahkan panah atas atau bawah, yang menunjukkan apakah nilai sel di atas atau di bawah nilai yang ditentukan. |
FormatBar | Menambahkan batang berwarna, arah dan warna yang menunjukkan apakah nilai sel di atas atau di bawah nilai yang ditentukan. |
FormatWarna | Mewarnai sel sesuai dengan apakah nilainya berada dalam rentang yang ditetapkan. |
TanggalFormat | Memformat nilai Date atau DateTime dengan beberapa cara berbeda, termasuk "1 Januari 2009", "1/1/09" dan "1 Jan 2009". |
FormatFormat | Memformat berbagai aspek nilai numerik. |
Format Pola | Menggabungkan nilai sel di baris yang sama menjadi sel yang ditentukan, bersama dengan teks arbitrer. |
Format Panah
Menambahkan panah atas atau bawah ke sel numerik, bergantung pada apakah nilai di atas atau di bawah nilai dasar yang ditentukan. Jika sama dengan nilai dasar, tidak ada panah yang ditampilkan.
Opsi
ArrowFormat
mendukung opsi berikut, yang diteruskan ke konstruktor:
Opsi | Deskripsi |
---|---|
base |
Angka yang menunjukkan nilai dasar, yang digunakan untuk membandingkan dengan nilai sel. Jika nilai sel lebih tinggi, sel akan menyertakan panah atas hijau; jika nilai sel lebih rendah, sel akan menyertakan panah bawah merah; jika sama, tidak ada panah. |
Kode contoh
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues Change'); data.addRows([ ['Shoes', {v:12, f:'12.0%'}], ['Sports', {v:-7.3, f:'-7.3%'}], ['Toys', {v:0, f:'0%'}], ['Electronics', {v:-2.1, f:'-2.1%'}], ['Food', {v:22, f:'22.0%'}] ]); var table = new google.visualization.Table(document.getElementById('arrowformat_div')); var formatter = new google.visualization.ArrowFormat(); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true});
Format Format
Menambahkan batang berwarna ke sel numerik yang menunjukkan apakah nilai sel di atas atau di bawah nilai dasar yang ditentukan.
Opsi
BarFormat
mendukung opsi berikut, yang diteruskan ke konstruktor:
Opsi | ContohDeskripsi |
---|---|
base |
Angka yang merupakan nilai dasar untuk membandingkan nilai sel. Jika nilai sel lebih tinggi, nilai tersebut akan digambar di sebelah kanan basis; jika lebih rendah, nilai akan digambar di sebelah kiri. Nilai defaultnya adalah 0. |
colorNegative |
String yang menunjukkan bagian nilai negatif batang. Nilai yang mungkin adalah 'red', 'green' dan 'blue'; nilai default-nya adalah 'red'. |
colorPositive |
String yang menunjukkan warna bagian nilai positif dari batang. Nilai yang mungkin adalah 'red', 'green', dan 'blue'. Defaultnya adalah 'biru'. |
drawZeroLine |
Boolean yang menunjukkan apakah akan menggambar garis dasar gelap 1 piksel jika terdapat nilai negatif. Garis gelapnya dibuat untuk meningkatkan pemindaian visual batang. Nilai defaultnya adalah 'false'. |
max |
Nilai angka maksimum untuk rentang batang. Nilai default adalah nilai tertinggi dalam tabel. |
min |
Nilai angka minimum untuk rentang batang. Nilai default adalah nilai terendah dalam tabel. |
showValue |
Jika true, menampilkan nilai dan batang; jika false, hanya menampilkan batang. Nilai default adalah true. |
width |
Ketebalan setiap batang, dalam piksel. Nilai defaultnya adalah 100. |
Kode contoh
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('barformat_div')); var formatter = new google.visualization.BarFormat({width: 120}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
FormatWarna
Menetapkan warna ke latar depan atau latar belakang sel numerik,
bergantung pada nilai sel. Pemformat ini tidak biasa, karena tidak menggunakan opsinya di konstruktor. Sebagai gantinya, Anda harus
memanggil addRange()
atau addGradientRange()
sebanyak yang Anda inginkan, untuk menambahkan rentang warna, sebelum
memanggil format()
. Warna dapat ditentukan dalam
format HTML apa pun yang dapat diterima, misalnya "hitam",
"#000000", atau "#000".
Metode
ColorFormat
mendukung metode berikut:
Metode | Deskripsi |
---|---|
google.visualization.ColorFormat() |
Konstruktor. Tidak membutuhkan argumen. |
addRange(from, to, color, bgcolor) |
Menentukan warna latar depan dan/atau warna latar belakang ke sel, bergantung pada nilai sel. Setiap sel dengan nilai di dalam rentang from—hingga akan ditetapkan ke color dan bgcolor. Penting untuk menyadari bahwa rentang ini tidak inklusif, karena membuat rentang dari 1—1.000 dan detik dari 1.000— 2.000 tidak akan mencakup nilai 1.000.
|
addGradientRange(from, to, color, fromBgColor,
toBgColor)
|
Menetapkan warna latar belakang dari rentang, sesuai dengan nilai sel. Warna diskalakan agar sesuai dengan nilai sel dalam rentang dari warna batas bawah hingga warna batas atas. Perlu diperhatikan bahwa metode ini tidak dapat membandingkan nilai string, seperti yang dapat dilakukan
|
format(dataTable, columnIndex) |
Metode format() standar untuk menerapkan pemformatan ke kolom yang ditentukan. |
Kode contoh
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('colorformat_div')); var formatter = new google.visualization.ColorFormat(); formatter.addRange(-20000, 0, 'white', 'orange'); formatter.addRange(20000, null, 'red', '#33ff33'); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
Format Tanggal
Memformat nilai Date
JavaScript dalam berbagai cara, termasuk "1 Januari 2016", "1/1/16" dan "1 Januari 2016".
Opsi
DateFormat
mendukung opsi berikut, yang diteruskan ke konstruktor:
Opsi | Deskripsi |
---|---|
formatType |
Opsi pemformatan cepat untuk tanggal. Nilai string berikut didukung, dengan memformat ulang tanggal 28 Februari 2016 seperti yang ditunjukkan berikut:
Anda tidak dapat menentukan |
pattern |
Pola format kustom yang akan diterapkan ke nilai, mirip dengan
format tanggal dan waktu ICU.
Misalnya:
Anda tidak dapat menentukan |
timeZone |
Zona waktu untuk menampilkan nilai tanggal. Ini adalah nilai numerik, yang menunjukkan GMT + jumlah zona waktu ini (bisa negatif). Objek tanggal dibuat secara default dengan zona waktu yang diasumsikan dari komputer tempat objek tersebut dibuat; opsi ini digunakan untuk menampilkan nilai tersebut dalam zona waktu yang berbeda. Misalnya, jika Anda membuat objek Tanggal pukul 17.00 di komputer yang berlokasi di Greenwich, Inggris, dan menetapkan zona waktu menjadi -5 (options['timeZone'] = -5 , atau Waktu Pasifik Timur di AS), nilai yang ditampilkan adalah 12 siang.
|
Metode
DateFormat
mendukung metode berikut:
Metode | Deskripsi |
---|---|
google.visualization.DateFormat(options) |
Konstruktor. Lihat bagian opsi di atas untuk info selengkapnya. |
format(dataTable, columnIndex) |
Metode format() standar untuk menerapkan pemformatan ke kolom yang ditentukan. |
formatValue(value) |
Menampilkan nilai berformat dari nilai yang diberikan.
Metode ini tidak memerlukan |
Kode contoh
function drawDateFormatTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date (Long)'); data.addColumn('date', 'Start Date (Medium)'); data.addColumn('date', 'Start Date (Short)'); data.addRows([ ['Mike', new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26)], ['Bob', new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0)], ['Alice', new Date(2006, 7, 16), new Date(2006, 7, 16), new Date(2006, 7, 16)] ]); // Create three formatters in three styles. var formatter_long = new google.visualization.DateFormat({formatType: 'long'}); var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'}); var formatter_short = new google.visualization.DateFormat({formatType: 'short'}); // Reformat our data. formatter_long.format(data, 1); formatter_medium.format(data,2); formatter_short.format(data, 3); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }
Selengkapnya tentang Pola Tanggal
Berikut adalah beberapa detail tentang pola yang didukung:
Polanya mirip dengan format tanggal dan waktu ICU, tetapi pola berikut belum didukung: e D F g Y u w W. Untuk
menghindari konflik dengan pola, setiap teks literal yang ingin Anda tampilkan dalam output harus
diapit oleh tanda kutip tunggal, kecuali untuk tanda petik tunggal, yang harus digandakan: mis.,
"K 'o''clock.'"
.
Pola | Deskripsi | Contoh Output |
---|---|---|
GG | Penanda era. | "IKLAN" |
yy atau tttt | tahun. | 1996 |
M |
Bulan dalam tahun. Untuk Januari:
|
"Juli" "7" |
h | Hari dalam bulan. Nilai 'd' ekstra akan menambahkan angka nol di depan. | 10 |
j | Jam dalam skala 12 jam. Nilai 'h' ekstra akan menambahkan awalan nol. | 12 |
H | Jam dalam skala 24 jam. Nilai ekstrak Hk akan menambah angka nol di depan. | 0 |
m | Menit dalam jam. Nilai 'M' ekstra akan menambahkan awalan nol. | 30 |
s | Detik dalam menit. Nilai 's' ekstra akan menambahkan awalan nol. | 55 |
4 | Pecahan detik. Nilai tambahan 'S' akan diberi padding di sebelah kanan dengan nol. | 978 |
1 |
Hari. Output berikut untuk "Selasa":
|
"Sel" "Selasa" |
Aa | AM/PM | "PM" |
k | Jam dalam hari (1~24). Nilai 'k' ekstra akan menambahkan nol di awal. | 24 |
rb | Jam dalam AM/PM (0~11). Nilai 'k' ekstra akan menambahkan nol di awal. | 0 |
z | Zona waktu. Untuk zona waktu 5, menghasilkan "UTC+5" |
"UTC+5" |
Z |
Zona waktu dalam format RFC 822. Untuk zona waktu -5: Z, ZZ, ZZZ menghasilkan -0500 ZZZZ dan lainnya menghasilkan "GMT -05.00" |
"-0800" "GMT -05.00" |
sangat | Zona waktu (generik). |
"Dll/GMT-5" |
' | escape untuk teks | 'Tanggal=' |
" | tanda petik tunggal | 'yy |
FormatFormat
Menjelaskan cara memformat kolom numerik. Opsi pemformatan mencakup menentukan simbol awalan (seperti tanda dolar) atau tanda baca untuk digunakan sebagai penanda ribuan.
Opsi
NumberFormat
mendukung opsi berikut, yang diteruskan ke konstruktor:
Opsi | Deskripsi |
---|---|
decimalSymbol |
Karakter yang akan digunakan sebagai penanda desimal. Defaultnya adalah titik (.). |
fractionDigits |
Angka yang menentukan jumlah digit yang akan ditampilkan setelah desimal. Jumlah defaultnya adalah 2. Jika Anda menentukan lebih banyak digit dari yang ada di angka, angka untuk nilai yang lebih kecil akan ditampilkan. Nilai terpotong akan dibulatkan (5 dibulatkan ke atas). |
groupingSymbol |
Karakter yang akan digunakan untuk mengelompokkan angka di sebelah kiri desimal menjadi tiga rangkaian. Default-nya adalah koma (,). |
negativeColor |
Warna teks untuk nilai negatif. Tidak ada nilai default. Nilai dapat berupa nilai warna HTML apa pun yang dapat diterima, misalnya "merah" atau "#FF0000". |
negativeParens |
Boolean, di mana true menunjukkan bahwa nilai negatif harus diapit dengan tanda kurung. Defaultnya adalah true (benar). |
pattern |
String format. Jika disediakan, semua opsi lainnya akan diabaikan, kecuali
String format adalah subset dari
kumpulan pola ICU
.
Misalnya, |
prefix |
Awalan string untuk nilai, misalnya "$". |
suffix |
Akhiran string untuk nilai, misalnya "%". |
Metode
NumberFormat
mendukung metode berikut:
Metode | Deskripsi |
---|---|
google.visualization.NumberFormat(options) |
Konstruktor. Lihat bagian opsi di atas untuk info selengkapnya. |
format(dataTable, columnIndex) |
Metode format() standar untuk menerapkan pemformatan ke kolom yang ditentukan. |
formatValue(value) |
Menampilkan nilai berformat dari nilai yang diberikan. Metode ini tidak memerlukan
|
Kode contoh
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('numberformat_div')); var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
Format Pola
Memungkinkan Anda menggabungkan nilai kolom yang ditentukan menjadi satu kolom, bersama dengan teks arbitrer. Jadi, misalnya, jika memiliki kolom untuk nama depan dan kolom untuk nama belakang, Anda dapat mengisi kolom ketiga dengan {last name}, {first name}. Pemformat ini tidak mengikuti konvensi untuk konstruktor dan metode format()
. Lihat bagian Metode di bawah untuk mendapatkan petunjuk.
Metode
PatternFormat
mendukung metode berikut:
Metode | Deskripsi |
---|---|
google.visualization.PatternFormat(pattern) |
Konstruktor. Tidak menggunakan objek opsi. Sebagai gantinya, diperlukan parameter pattern
string. Ini adalah string yang menjelaskan nilai kolom yang akan dimasukkan ke kolom
tujuan, beserta teks arbitrer. Sematkan placeholder di string untuk menunjukkan nilai
dari kolom lain yang akan disematkan. Placeholder adalah
Kode contohContoh berikut menunjukkan konstruktor untuk pola
yang membuat elemen anchor, dengan elemen pertama dan kedua diambil dari
metode var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
Panggilan pemformatan standar, dengan beberapa parameter tambahan:
Lihat contoh pemformatan setelah tabel. |
Berikut beberapa contoh input dan output untuk tabel empat kolom.
Row before formatting (4 columns, last is blank): John | Paul | Jones | [empty] var formatter = new google.visualization.PatternFormat("{0} {1} {2}"); formatter.format(data, [0,1,2], 3); Output: John | Paul | Jones | John Paul Jones var formatter = new google.visualization.PatternFormat("{1}, {0}"); formatter.format(data, [0,2], 3); Output: John | Paul | Jones | Jones, John
Kode contoh
Contoh berikut menunjukkan cara menggabungkan data dari dua kolom untuk membuat alamat email. Properti ini menggunakan objek DataView untuk menyembunyikan kolom sumber asli:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Email'); data.addRows([ ['John Lennon', 'john@beatles.co.uk'], ['Paul McCartney', 'paul@beatles.co.uk'], ['George Harrison', 'george@beatles.co.uk'], ['Ringo Starr', 'ringo@beatles.co.uk'] ]); var table = new google.visualization.Table(document.getElementById('patternformat_div')); var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [0, 1]); var view = new google.visualization.DataView(data); view.setColumns([0]); // Create a view with the first column only. table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
GadgetHelper
Class helper untuk menyederhanakan penulisan Gadget yang menggunakan Google Visualization API.
Konstruktor
google.visualization.GadgetHelper()
Metode
Metode | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
createQueryFromPrefs(prefs) |
google.visualization.Query |
Statis. Buat instance google.visualization.Query baru dan tetapkan propertinya sesuai dengan nilai dari preferensi gadget. Jenis parameter
prefs adalah _IG_Prefs
|
validateResponse(response) |
Boolean |
Statis. Parameter response adalah jenis
google.visualization.QueryResponse. Menampilkan true jika respons berisi data. Menampilkan false jika eksekusi kueri gagal dan responsnya tidak berisi data. Jika terjadi error, metode ini akan menampilkan pesan error.
|
Class Kueri
Objek berikut tersedia untuk mengirim kueri data ke sumber data eksternal, seperti Google Spreadsheet.
- Kueri - Menggabungkan permintaan data keluar.
- QueryResponse - Menangani respons dari sumber data.
Kueri
Merepresentasikan kueri yang dikirim ke sumber data.
Konstruktor
google.visualization.Query(dataSourceUrl, opt_options)
Parameter
- URLSumberData
- URL [Wajib, String] untuk mengirimkan kueri. Lihat dokumentasi Diagram dan Spreadsheet untuk Google Spreadsheet.
- opsi_pengoptimalan
-
[Opsional, Objek] Peta opsi untuk permintaan ini. Catatan: Jika Anda
mengakses
sumber data yang dibatasi
,
Anda tidak boleh menggunakan parameter ini. Berikut adalah properti yang didukung:
-
sendMethod - [Opsional, String] Menentukan metode yang akan digunakan untuk mengirim kueri. Pilih salah satu nilai string berikut:
- 'xhr' - Kirim kueri menggunakan XmlHttpRequest.
- 'scriptInjection' - Kirim kueri menggunakan injeksi skrip.
-
'makeRequest' - [Hanya tersedia untuk gadget, yang sudah tidak digunakan lagi] Kirim kueri menggunakan metode Gadget API
makeRequest()
. Jika ditentukan, Anda juga harus menentukan makeRequestParams. -
'auto' - Gunakan metode yang ditentukan oleh parameter URL
tqrt
dari URL sumber data.tqrt
dapat memiliki nilai berikut: 'xhr', 'scriptInjection', atau 'makeRequest'. Jikatqrt
tidak ada atau memiliki nilai yang tidak valid, defaultnya adalah 'xhr' untuk permintaan domain yang sama dan 'scriptInjection' untuk permintaan lintas-domain.
-
makeRequestParams - [Objek] Peta parameter untuk kueri
makeRequest()
. Digunakan dan diperlukan hanya jika sendMethod adalah 'makeRequest'.
-
sendMethod - [Opsional, String] Menentukan metode yang akan digunakan untuk mengirim kueri. Pilih salah satu nilai string berikut:
Metode
Metode | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
abort() |
Tidak ada |
Menghentikan pengiriman kueri otomatis yang dimulai dengan setRefreshInterval() .
|
setRefreshInterval(seconds)
|
Tidak ada |
Menetapkan kueri untuk otomatis memanggil metode Jika menggunakan metode ini, Anda harus memanggilnya sebelum memanggil metode
Batalkan metode ini dengan memanggilnya lagi dengan nol (default), atau dengan memanggil
|
setTimeout(seconds) |
Tidak ada |
Menetapkan jumlah detik untuk menunggu sumber data merespons sebelum menampilkan error waktu tunggu. seconds adalah angka yang lebih besar dari nol. Waktu tunggu default adalah 30 detik. Metode ini, jika digunakan, harus dipanggil sebelum memanggil metode send .
|
setQuery(string) |
Tidak ada |
Menetapkan string kueri. Nilai parameter string harus berupa kueri yang valid. Metode ini, jika digunakan, harus dipanggil sebelum memanggil metode send .
Pelajari bahasa Kueri lebih lanjut.
|
send(callback) |
Tidak ada |
Mengirim kueri ke sumber data. callback harus berupa fungsi yang akan dipanggil saat sumber data merespons. Fungsi callback akan menerima parameter tunggal jenis google.visualization.QueryResponse.
|
KueriRespons
Merepresentasikan respons eksekusi kueri seperti yang diterima dari sumber data. Instance class ini diteruskan sebagai argumen ke fungsi callback yang ditetapkan saat Query.send dipanggil.
Metode
Metode | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
getDataTable() |
Tabel Data |
Menampilkan tabel data seperti yang ditampilkan oleh sumber data. Menampilkan null jika eksekusi kueri gagal dan tidak ada data yang ditampilkan.
|
getDetailedMessage() |
String | Menampilkan pesan error mendetail untuk kueri yang gagal. Jika eksekusi kueri berhasil, metode ini akan menampilkan string kosong. Pesan yang dikembalikan adalah pesan yang ditujukan bagi developer, dan mungkin berisi informasi teknis, misalnya 'Kolom {salary} tidak ada. |
getMessage() |
String | Menampilkan pesan error singkat untuk kueri yang gagal. Jika eksekusi kueri berhasil, metode ini akan menampilkan string kosong. Pesan yang ditampilkan adalah pesan singkat yang ditujukan bagi pengguna akhir, misalnya 'Kueri Tidak Valid' atau 'Akses Ditolak'. |
getReasons() |
Array string |
Menampilkan array nol dari entri lainnya. Setiap entri merupakan string pendek dengan error atau kode peringatan yang dimunculkan saat menjalankan kueri. Kode yang mungkin:
|
hasWarning() |
Boolean | Menampilkan true jika eksekusi kueri memiliki pesan peringatan. |
isError() |
Boolean |
Menampilkan true jika eksekusi kueri gagal, dan responsnya tidak berisi tabel data apa pun. Menampilkan <false> jika eksekusi kueri berhasil dan responsnya
berisi tabel data.
|
Tampilan Error
API ini menyediakan beberapa fungsi untuk membantu Anda menampilkan pesan error kustom kepada pengguna. Untuk
menggunakan fungsi ini, sediakan elemen penampung di halaman (biasanya
<div>
), tempat API akan menggambar pesan error yang diformat. Penampung ini
dapat berupa elemen penampung visualisasi, atau penampung hanya untuk error. Jika Anda menentukan
elemen berisi visualisasi, pesan error akan ditampilkan di atas visualisasi.
Kemudian, panggil fungsi yang sesuai di bawah untuk menampilkan, atau menghapus, pesan error.
Semua fungsi adalah fungsi statis dalam namespace google.visualization.errors
.
Banyak visualisasi yang dapat menampilkan peristiwa error; lihat peristiwa error di bawah untuk mempelajarinya lebih lanjut.
Anda dapat melihat contoh error kustom dalam Contoh Kode wrapper Kueri.
Fungsi | Nilai yang Ditampilkan | Deskripsi |
---|---|---|
addError(container, message, opt_detailedMessage,
opt_options)
|
Nilai ID string yang mengidentifikasi objek error yang dibuat. Ini adalah nilai unik pada halaman, dan dapat digunakan untuk menghapus error atau menemukan elemen yang memuatnya. |
Menambahkan blok tampilan error ke elemen halaman yang ditentukan, dengan teks dan format yang ditentukan.
|
addErrorFromQueryResponse(container, response) |
Nilai ID string yang mengidentifikasi objek error yang dibuat, atau null jika responsnya tidak menunjukkan error. Ini adalah nilai unik pada halaman, dan dapat digunakan untuk menghapus error atau menemukan elemen yang memuatnya. |
Teruskan respons kueri dan penampung pesan error ke metode ini: jika respons kueri menunjukkan error kueri, pesan error akan ditampilkan di elemen halaman yang ditentukan. Jika respons kueri null, metode akan menampilkan error JavaScript. Teruskan QueryResponse Anda yang diterima di pengendali kueri ke pesan ini untuk menampilkan error. Tindakan ini juga akan menetapkan gaya tampilan yang sesuai dengan jenisnya (error atau peringatan, mirip dengan
|
removeError(id) |
Boolean: true jika error dihapus; false jika tidak. |
Menghapus error yang ditetapkan oleh ID dari halaman.
|
removeAll(container) |
Tidak ada |
Menghapus semua blok error dari penampung yang ditentukan. Jika penampung yang ditentukan tidak ada, akan muncul error.
|
getContainer(errorId) |
Tangani elemen DOM yang menyimpan error yang ditentukan, atau null jika tidak dapat ditemukan. |
Mengambil handle ke elemen container yang menyimpan error yang ditentukan oleh errorID.
|
Acara
Sebagian besar visualisasi mengaktifkan peristiwa untuk menunjukkan sesuatu yang telah terjadi. Sebagai pengguna diagram, Anda mungkin ingin memproses peristiwa ini. Jika Anda mengkodekan visualisasi Anda sendiri, Anda juga dapat memicu peristiwa tersebut sendiri.
Metode berikut memungkinkan developer untuk memproses peristiwa, menghapus pengendali peristiwa yang ada, atau memicu peristiwa dari dalam visualisasi.
- google.visualization.events.addListener() dan google.visualization.events.addOneTimeListener() memproses peristiwa.
- google.visualization.events.removeListener() menghapus pemroses yang ada
- google.visualization.events.removeAllListeners() menghapus semua pemroses pada diagram tertentu
- google.visualization.events.trigger() mengaktifkan peristiwa.
addListener()
Panggil metode ini untuk mendaftar guna menerima peristiwa yang diaktifkan oleh visualisasi yang dihosting di halaman Anda. Anda harus mendokumentasikan argumen peristiwa, jika ada, yang akan diteruskan ke fungsi penanganan.
google.visualization.events.addListener(source_visualization, event_name, handling_function)
- visualisasi sumber
- Handle ke instance visualisasi sumber.
- event_name
- Nama string peristiwa yang akan diproses. Visualisasi harus mendokumentasikan peristiwa mana yang ditampilkan.
- handling_function
- Nama fungsi JavaScript lokal yang akan dipanggil saat source_visualization mengaktifkan peristiwa event_name. Fungsi penanganan akan meneruskan argumen peristiwa apa pun sebagai parameter.
Pengembalian
Pengendali pemroses untuk pemroses baru. Pengendali ini dapat digunakan untuk menghapus pemroses ini nanti jika diperlukan dengan memanggil google.visualization.events.removeListener().
Contoh
Berikut adalah contoh pendaftaran untuk menerima acara pemilihan
var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, options); google.visualization.events.addListener(table, 'select', selectHandler); function selectHandler() { alert('A table row was selected'); }
addOneTimeListener()
Ini identik dengan addListener()
, tetapi ditujukan untuk peristiwa yang hanya boleh
didengarkan sekali. Lemparan peristiwa berikutnya tidak akan memanggil fungsi penanganan.
Contoh saat hal ini berguna: setiap gambar menyebabkan peristiwa ready
dilempar. Jika
hanya ingin ready
pertama yang mengeksekusi kode, Anda akan menginginkan
addOneTimeListener
, bukan addListener
.
removeListener()
Panggil metode ini untuk membatalkan pendaftaran pemroses peristiwa yang ada.
google.visualization.events.removeListener(listener_handler)
- pemroses_handler (hanya dalam bahasa Inggris)
- Pengendali pemroses yang akan dihapus, seperti yang ditampilkan oleh google.visualization.events.addListener().
removeAllListeners()
Panggil metode ini untuk membatalkan pendaftaran semua pemroses peristiwa dari instance visualisasi tertentu.
google.visualization.events.removeAllListeners(source_visualization)
- visualisasi sumber
- Suatu handle ke instance visualisasi sumber tempat semua pemroses peristiwa harus dihapus.
pemicu()
Dipanggil oleh implementasier visualisasi. Panggil metode ini dari visualisasi Anda untuk mengaktifkan peristiwa dengan nama arbitrer dan kumpulan nilai.
google.visualization.events.trigger(source_visualization, event_name, event_args)
- visualisasi sumber
-
Handle ke instance visualisasi sumber. Jika Anda memanggil fungsi ini dari dalam metode yang ditentukan oleh visualisasi pengiriman, Anda cukup meneruskan kata kunci
this
. - event_name
- Nama string untuk memanggil peristiwa. Anda dapat memilih nilai string apa pun yang diinginkan.
- peristiwa_args
- [opsional] Peta pasangan nama/nilai yang akan diteruskan ke metode penerima. Misalnya:{message: "Hello there!", skor: 10, nama: "Fred"}. Anda dapat meneruskan null jika tidak ada peristiwa yang diperlukan; penerima harus siap menerima null untuk parameter ini.
Contoh
Berikut adalah contoh visualisasi yang menampilkan metode bernama "select" saat metode onclick-nya dipanggil. Metode ini tidak meneruskan kembali nilai apa pun.
MyVisualization.prototype.onclick = function(rowIndex) { this.highlightRow(this.selectedRow, false); // Clear previous selection this.highlightRow(rowIndex, true); // Highlight new selection // Save the selected row index in case getSelection is called. this.selectedRow = rowIndex; // Trigger a select event. google.visualization.events.trigger(this, 'select', null); }
Metode dan Properti Visualisasi Standar
Setiap visualisasi harus mengekspos kumpulan metode dan properti wajib dan opsional berikut. Namun, perhatikan bahwa tidak ada pemeriksaan jenis untuk menerapkan standar ini, jadi Anda harus membaca dokumentasi untuk setiap visualisasi.
- Konstruktor
- gambar()
- getAction() [opsional]
- getSelection() [opsional]
- removeAction() [opsional]
- setAction() [opsional]
- setSelection() [opsional]
Catatan: Metode ini berada dalam namespace visualisasi, bukan namespace google.visualization.
Konstruktor
Konstruktor harus memiliki nama class visualisasi, dan menampilkan instance class tersebut.
visualization_class_name(dom_element)
- elemen_dom
- Pointer ke elemen DOM tempat visualisasi harus disematkan.
Contoh
var org = new google.visualization.OrgChart(document.getElementById('org_div'));
gambar()
Menggambar visualisasi pada halaman. Di balik layar, tindakan ini dapat mengambil grafis dari server atau membuat grafis di halaman menggunakan kode visualisasi yang ditautkan. Anda harus memanggil metode ini setiap kali data atau opsi berubah. Objek harus digambar di dalam elemen DOM yang diteruskan ke konstruktor.
draw(data[, options])
- data
-
DataTable
atauDataView
yang menyimpan data yang akan digunakan untuk menggambar diagram. Tidak ada metode standar untuk mengekstrakDataTable
dari diagram. - opsi
-
[Opsional] Peta pasangan nama/nilai opsi kustom. Contohnya mencakup tinggi dan lebar, warna latar belakang, dan teks. Dokumentasi visualisasi harus mencantumkan opsi yang tersedia dan akan mendukung opsi default jika Anda tidak menentukan parameter ini.
Anda dapat menggunakan sintaksis literal objek JavaScript untuk meneruskan peta opsi: misalnya,
{x:100, y:200, title:'An Example'}
Contoh
chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
getAction()
Ini ditampilkan secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip.
Menampilkan objek tindakan tooltip dengan actionID
yang diminta.
Contoh:
// Returns the action object with the ID 'alertAction'. chart.getAction('alertAction');
getSelection()
Hal ini secara opsional diekspos oleh visualisasi yang memungkinkan Anda mengakses data yang saat ini dipilih dalam grafik.
selection_array getSelection()
Pengembalian
selection_array Array objek yang dipilih, masing-masing menjelaskan elemen
data dalam tabel yang mendasari yang digunakan untuk membuat visualisasi (DataView
atau
DataTable
). Setiap objek memiliki properti row
dan/atau column
,
dengan indeks baris dan/atau kolom item yang dipilih di
DataTable
pokok. Jika properti row
bernilai null, maka pilihannya adalah kolom;
jika properti column
adalah null, maka pilihannya adalah baris; jika keduanya bukan null,
maka item data tersebut adalah item data tertentu. Anda dapat memanggil metode
DataTable.getValue()
untuk mendapatkan nilai
item yang dipilih. Array yang diambil dapat diteruskan ke
setSelection()
.
Contoh
function myClickHandler(){ var selection = myVis.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) { message += '{row:' + item.row + ',column:' + item.column + '}'; } else if (item.row != null) { message += '{row:' + item.row + '}'; } else if (item.column != null) { message += '{column:' + item.column + '}'; } } if (message == '') { message = 'nothing'; } alert('You selected ' + message); }
removeAction()
Ini ditampilkan secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip.
Menghapus objek tindakan tooltip dengan actionID
yang diminta dari diagram.
Contoh:
// Removes an action from chart with the ID of 'alertAction'. chart.removeAction('alertAction');
setAction()
Ini ditampilkan secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip. Metode ini hanya berfungsi untuk diagram inti (panel, kolom, garis, area, sebar, kombinasi, balon, lingkaran, donat, batang lilin, histogram, area bertahap).
Menetapkan tindakan tooltip yang akan dijalankan saat pengguna mengklik teks tindakan.
setAction(action object)
Metode setAction
menggunakan objek sebagai parameter tindakannya. Objek ini harus
menentukan 3 properti: id
— ID tindakan yang ditetapkan, text
—teks yang akan muncul di tooltip untuk tindakan, dan action
— fungsi yang harus dijalankan saat pengguna mengklik teks tindakan.
Setiap dan semua tindakan tooltip harus ditetapkan sebelum memanggil metode draw()
diagram.
Contoh:
// Sets a tooltip action which will pop an alert box on the screen when triggered. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); } });
Metode setAction
juga dapat menentukan dua properti tambahan: visible
dan enabled
. Properti ini harus berupa fungsi yang menampilkan nilai boolean
yang menunjukkan apakah tindakan tooltip akan terlihat dan/atau diaktifkan.
Contoh:
// The visible/enabled functions can contain any logic to determine their state // as long as they return boolean values. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); }, visible: function() { return true; }, enabled: function() { return true; } });
setSelection()
Secara opsional, pilih entri data dalam visualisasi—misalnya, titik dalam diagram area, atau batang
dalam diagram batang. Saat metode ini dipanggil, visualisasi harus secara visual menunjukkan pilihan baru. Implementasi setSelection()
tidak boleh mengaktifkan peristiwa "select". Visualisasi dapat mengabaikan bagian dari pilihan. Misalnya, tabel
yang hanya dapat menampilkan baris yang dipilih dapat mengabaikan elemen sel atau kolom dalam
implementasi setSelection()
, atau dapat memilih seluruh baris.
Setiap kali metode ini dipanggil, semua item yang dipilih akan dibatalkan pilihannya, dan daftar pilihan baru yang diteruskan harus diterapkan. Tidak ada cara eksplisit untuk membatalkan pilihan item satu per satu; untuk membatalkan pilihan
masing-masing item, panggil setSelection()
dengan item untuk tetap dipilih; untuk
membatalkan pilihan semua elemen, panggil setSelection()
, setSelection(null)
,
atau setSelection([])
.
setSelection(selection_array)
- array_pilihan
-
Array objek, masing-masing dengan baris numerik dan/atau properti kolom.
row
dancolumn
adalah baris atau nomor kolom berbasis nol dari item di tabel data yang akan dipilih. Untuk memilih seluruh kolom, tetapkanrow
ke null; untuk memilih seluruh baris, tetapkancolumn
ke null. Contoh:setSelection([{row:0,column:1},{row:1, column:null}])
memilih sel di (0,1) dan seluruh baris 1.
Berbagai Metode Statis
Bagian ini berisi berbagai metode berguna yang ditampilkan dalam namespace google.visualization
.
arrayToDataTable()
Metode ini menggunakan array dua dimensi dan mengonversinya menjadi DataTable.
Jenis data kolom ditentukan secara otomatis oleh data yang diberikan. Jenis data kolom juga dapat ditentukan menggunakan notasi literal objek di baris pertama (baris header kolom) array (yaitu {label: 'Start Date', type: 'date'}
). Peran data opsional juga dapat digunakan, tetapi harus ditentukan secara eksplisit menggunakan notasi literal objek. Notasi literal objek juga dapat digunakan untuk sel apa pun, sehingga Anda dapat menentukan Objek Sel).
Sintaksis
google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
- duaDArray
- Array dua dimensi, dengan setiap baris mewakili baris dalam tabel data. Jika opt_firstRowIsData bernilai salah (default), baris pertama akan ditafsirkan sebagai label header. Jenis data setiap kolom ditafsirkan secara otomatis dari data yang diberikan. Jika sel tidak memiliki nilai, tentukan nilai null atau kosong yang sesuai.
- opt_firstRowIsData
- Apakah baris pertama menentukan baris header atau tidak. Jika true (benar), semua baris akan diasumsikan sebagai data. Jika salah, baris pertama diasumsikan sebagai baris header, dan nilainya ditetapkan sebagai label kolom. Nilai defaultnya adalah false (salah).
Pengembalian
DataTable
baru.
Contoh
Kode berikut menunjukkan tiga cara untuk membuat objek DataTable
yang sama:
// Version 1: arrayToDataTable method var data2 = google.visualization.arrayToDataTable([ [{label: 'Country', type: 'string'}, {label: 'Population', type: 'number'}, {label: 'Area', type: 'number'}, {type: 'string', role: 'annotation'}], ['CN', 1324, 9640821, 'Annotated'], ['IN', 1133, 3287263, 'Annotated'], ['US', 304, 9629091, 'Annotated'], ['ID', 232, 1904569, 'Annotated'], ['BR', 187, 8514877, 'Annotated'] ]); // Version 2: DataTable.addRows var data3 = new google.visualization.DataTable(); data3.addColumn('string','Country'); data3.addColumn('number','Population'); data3.addColumn('number','Area'); data3.addRows([ ['CN', 1324, 9640821], ['IN', 1133, 3287263], ['US', 304, 9629091], ['ID', 232, 1904569], ['BR', 187, 8514877] ]); // Version 3: DataTable.setValue var data = new google.visualization.DataTable(); data.addColumn('string','Country'); data.addColumn('number', 'Population'); data.addColumn('number', 'Area'); data.addRows(5); data.setValue(0, 0, 'CN'); data.setValue(0, 1, 1324); data.setValue(0, 2, 9640821); data.setValue(1, 0, 'IN'); data.setValue(1, 1, 1133); data.setValue(1, 2, 3287263); data.setValue(2, 0, 'US'); data.setValue(2, 1, 304); data.setValue(2, 2, 9629091); data.setValue(3, 0, 'ID'); data.setValue(3, 1, 232); data.setValue(3, 2, 1904569); data.setValue(4, 0, 'BR'); data.setValue(4, 1, 187); data.setValue(4, 2, 8514877);
drawChart()
Metode ini membuat diagram dalam satu panggilan. Keuntungan menggunakan metode ini adalah metode tersebut memerlukan kode yang sedikit lebih sedikit, dan Anda dapat membuat serialisasi dan menyimpan visualisasi sebagai string teks untuk digunakan kembali. Metode ini tidak menampilkan handle ke diagram yang dibuat, sehingga Anda tidak dapat menetapkan pemroses metode untuk menangkap peristiwa diagram.
Sintaksis
google.visualization.drawChart(chart_JSON_or_object)
- diagram_JSON_atau_objek
- String literal JSON atau objek JavaScript, dengan properti berikut (peka huruf besar/kecil):
Properti | Jenis | Wajib | Default | Deskripsi |
---|---|---|---|---|
ChartType | String | Wajib | tidak ada |
Nama class visualisasi. Nama paket google.visualization dapat
dihilangkan untuk diagram Google. Jika library visualisasi yang sesuai belum dimuat, metode ini akan memuatkan library untuk Anda jika ini adalah visualisasi Google; Anda harus memuat visualisasi pihak ketiga secara eksplisit. Contoh: Table ,
PieChart , example.com.CrazyChart .
|
ID penampung | String | Wajib | tidak ada | ID elemen DOM di halaman Anda yang akan menghosting visualisasi. |
opsi | Object | Opsional | tidak ada |
Objek yang menjelaskan opsi visualisasi. Anda dapat menggunakan notasi literal JavaScript, atau memberikan handle ke objek. Contoh:
"options": {"width": 400, "height": 240,
"is3D": true, "title": "Company Performance"}
|
TabelData | Object | Opsional | Tidak ada |
DataTable yang digunakan untuk mengisi visualisasi. Ini dapat berupa representasi string JSON literal dari DataTable, seperti yang dijelaskan di atas, atau handle ke objek google.visualization.DataTable yang diisi, atau array 2 dimensi seperti yang diterima oleh
arrayToDataTable(opt_firstRowIsData=false)
.
Anda harus menentukan properti ini atau properti dataSourceUrl .
|
dataSourceUrl | String | Opsional | Tidak ada |
Kueri sumber data untuk mengisi data diagram (misalnya, Google Spreadsheet). Anda harus menentukan
properti ini atau properti dataTable .
|
kueri | String | Opsional | Tidak ada |
Jika menentukan dataSourceUrl , Anda dapat secara opsional menentukan string kueri yang mirip SQL menggunakan bahasa kueri Visualisasi untuk memfilter atau memanipulasi data.
|
intervalInterval | Angka | Opsional | Tidak ada |
Seberapa sering, dalam hitungan detik, visualisasi harus memuat ulang sumber kuerinya. Hanya gunakan opsi ini saat
menentukan dataSourceUrl .
|
view | Objek ATAU Array | Opsional | Tidak ada |
Menetapkan objek penginisialisasi DataView , yang berfungsi sebagai filter di atas data
pokok, seperti yang ditentukan oleh parameter dataTable atau dataSourceUrl .
Anda dapat meneruskan string atau objek penginisialisasi DataView , seperti yang
ditampilkan oleh dataview.toJSON() .
Contoh: "view": {"columns": [1, 2]} Anda juga dapat meneruskan array objek penginisialisasi DataView , dalam hal ini DataView pertama dalam array diterapkan ke data pokok untuk membuat tabel data baru, dan DataView kedua diterapkan ke tabel data yang dihasilkan dari penerapan DataView pertama, dan seterusnya.
|
Contoh
Membuat diagram tabel berdasarkan sumber data spreadsheet, dan menyertakan kueri SELECT A,D WHERE D > 100 ORDER BY D
<script type="text/javascript"> google.charts.load('current'); // Note: No need to specify chart packages. function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
Contoh berikutnya membuat tabel yang sama, tetapi membuat DataTable
secara lokal:
<script type='text/javascript'> google.charts.load('current'); function drawVisualization() { var dataTable = [ ["Country", "Population Density"], ["Indonesia", 117], ["China", 137], ["Nigeria", 142], ["Pakistan", 198], ["India", 336], ["Japan", 339], ["Bangladesh", 1045] ]; google.visualization.drawChart({ "containerId": "visualization_div", "dataTable": dataTable, "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true, } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
Contoh ini meneruskan representasi string JSON dari diagram, yang mungkin telah Anda muat dari file:
<script type="text/javascript"> google.charts.load('current'); var myStoredString = '{"containerId": "visualization_div",' + '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' + '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' + '"refreshInterval": 5,' + '"chartType": "Table",' + '"options": {' + ' "alternatingRowStyle": true,' + ' "showRowNumber" : true' + '}' + '}'; function drawVisualization() { google.visualization.drawChart(myStoredString); } google.charts.setOnLoadCallback(drawVisualization); </script>
drawToolbar()
Ini adalah konstruktor untuk elemen toolbar yang dapat dilampirkan ke banyak visualisasi. Toolbar ini memungkinkan pengguna mengekspor data visualisasi ke dalam berbagai format, atau menyediakan versi visualisasi yang dapat disematkan untuk digunakan di berbagai tempat. Lihat halaman toolbar untuk informasi selengkapnya dan contoh kode.