Ringkasan
Dasbor adalah cara sederhana untuk mengatur bersama dan mengelola beberapa diagram yang memiliki data pokok yang sama. Dengan menggunakan API yang dijelaskan di halaman ini, Anda dapat membebaskan beban dari beban berkabel dan mengoordinasikan semua diagram yang merupakan bagian dari dasbor.
Dasbor ditentukan menggunakan class google.visualization.Dashboard
.
Instance Dashboard
menerima DataTable
yang berisi data untuk memvisualisasikan dan menangani penggambaran dan distribusi data ke semua diagram yang merupakan bagian dari dasbor.
Kontrol adalah widget antarmuka pengguna (seperti pemilih kategori, penggeser rentang, pelengkapan otomatis...) yang berinteraksi dengan Anda untuk mendorong data yang dikelola oleh dasbor dan diagram yang merupakan bagiannya.
Kontrol ditentukan menggunakan class google.visualization.ControlWrapper
.
Anda dapat menambahkan instance ControlWrapper
ke dasbor, yang berperilaku seperti pipa dan katup dalam sistem perpipaan. Mereka mengumpulkan input pengguna dan menggunakan informasi tersebut untuk memutuskan data mana yang dikelola oleh dasbor agar tersedia untuk diagram yang merupakan bagian darinya.
Lihat contoh berikut di mana alat pilih kategori dan penggeser rentang digunakan untuk mendorong data yang divisualisasikan oleh diagram lingkaran.
Catatan: Dasbor bersifat interaktif. Coba operasikan kontrol dan lihat perubahan diagram secara real time.
Menggunakan Kontrol dan Dasbor
Berikut adalah langkah-langkah utama untuk membuat dasbor dan menyematkannya di halaman Anda. Anda akan menemukan cuplikan kode yang menunjukkan semua langkah di bawah ini, diikuti dengan informasi mendetail tentang setiap langkah.
- Buat kerangka HTML untuk dasbor Anda. Halaman Anda harus memiliki elemen HTML sebanyak yang diperlukan untuk menampung setiap anggota dasbor. Ini mencakup dasbor itu sendiri dan semua kontrol dan diagram yang merupakan bagian darinya. Biasanya Anda akan menggunakan <div> untuk masing-masing kolom.
-
Muat library Anda. Dasbor hanya memerlukan
dua library untuk disertakan atau dimuat di halaman: Google AJAX API dan paket
controls
Visualisasi Google. - Siapkan data Anda. Anda harus menyiapkan data untuk divisualisasikan; ini berarti menentukan data Anda sendiri dalam kode, atau membuat kueri untuk situs jarak jauh untuk data.
- Buat instance dasbor. Buat instance dasbor dengan memanggil konstruktornya dan meneruskan referensi ke elemen <div> yang akan menampungnya.
-
Buat instance kontrol dan diagram sebanyak yang Anda butuhkan.
Buat instance
google.visualization.ChartWrapper
dangoogle.visualization.ControlWrapper
untuk mendeskripsikan setiap diagram dan kontrol yang dikelola dasbor. -
Buat dependensi. Panggil
bind()
di dasbor Anda dan teruskan instance kontrol dan diagram untuk memberi tahu dasbor tentang apa yang harus dikelola. Setelah kontrol dan diagram diikat, dasbor akan memperbarui diagram agar sesuai dengan batasan yang diterapkan oleh kontrol atas data. -
Gambar dasbor Anda. Panggil
draw()
di dasbor Anda dan teruskan data Anda untuk menggambar seluruh dasbor di halaman. - Perubahan terprogram setelah penarikan. Secara opsional, setelah penggambaran awal, Anda dapat secara terprogram mendorong kontrol yang merupakan bagian dari dasbor, dan membuat dasbor memperbarui diagram sebagai respons terhadapnya.
Berikut contoh sederhana dari halaman yang membuat dasbor sederhana dengan penggeser rentang yang mendorong diagram lingkaran. Dasbor yang dihasilkan akan ditampilkan di bawah cuplikan.
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, pieChart); // Draw the dashboard. dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div> </body> </html>
Berikut adalah dasbor yang dibuat oleh kode ini.
1. Membuat Kerangka HTML untuk Dasbor
Halaman Anda harus memiliki sebanyak mungkin elemen HTML (biasanya <div>) untuk menyimpan dasbor itu sendiri serta semua kontrol dan diagram di dalamnya. Saat membuat instance dasbor, kontrol, dan diagram, Anda harus meneruskan referensi ke elemen tersebut, jadi tetapkan ID untuk setiap elemen HTML.
<!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div>
Anda bebas untuk memposisikan setiap elemen HTML bagaimana pun tampilan dasbor yang Anda inginkan.
2. Memuat Library Anda
Dasbor hanya memerlukan dua library untuk disertakan atau dimuat di halaman: Google AJAX API dan paket controls
Visualisasi Google. API (khususnya,
google.visualization.ChartWrapper
) otomatis mengidentifikasi paket lain
yang diperlukan (misalnya, gauge
jika Anda menggunakan diagram Pengukur) dan memuatnya dengan cepat
tanpa intervensi lebih lanjut dari Anda.
Anda harus menggunakan google.charts.load()
untuk mengambil library kontrol.
<!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. // Packages for all the other charts you need will be loaded // automatically by the system. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); function drawDashboard() { // Everything is loaded. Assemble your dashboard... } </script>
3. Menyiapkan Data Anda
Setelah Visualization API telah dimuat, google.charts.setOnLoadCallback()
akan memanggil fungsi pengendali, sehingga Anda tahu bahwa semua metode dan class helper yang diperlukan akan siap untuk mulai menyiapkan data Anda.
Dasbor menerima data di DataTable, sama seperti diagram.
4. Membuat Instance Dasbor
Setelah membuat data, Anda dapat membuat instance objek dasbor. Konstruktor dasbor memerlukan satu parameter: referensi ke elemen DOM untuk menggambar dasbor.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
Dasbor diekspos sebagai class JavaScript. Setelah membuat instance dasbor, Anda dapat melakukan beberapa langkah opsional seperti menambahkan pemroses peristiwa (misalnya, mendapatkan notifikasi setelah dasbor 'siap'). Dasbor menangani peristiwa dengan cara yang sama seperti diagram, jadi lihat Menangani Peristiwa Visualisasi atau Menampilkan Error dengan Baik di bagian diagram untuk informasi selengkapnya.
5. Membuat Instance Kontrol dan Diagram
Tentukan sebanyak mungkin instance yang dibutuhkan untuk setiap kontrol dan diagram yang akan menjadi bagian dari dasbor.
Gunakan
google.visualization.ChartWrapper
dan
google.visualization.ControlWrapper
untuk menentukan diagram dan kontrol masing-masing.
// Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'label' } });
Saat membuat instance ChartWrapper
dan ControlWrapper
, jangan tentukan parameter dataTable
atau dataSourceUrl
. Dasbor menangani feed ke setiap dasbor dengan data yang sesuai. Namun, pastikan Anda menentukan parameter yang diperlukan: chartType
dan containerId
untuk diagram, controlType
dan containerId
untuk kontrol.
Beberapa tips tentang mengonfigurasi kontrol dan diagram:
-
Anda harus memberikan
filterColumnIndex
kontrol (ataufilterColumnLabel
) untuk menentukan kolomgoogle.visualization.DataTable
yang dioperasikan kontrol (dalam contoh di atas, kontrol beroperasi pada kolom berlabel Donat yang dimakan), -
Gunakan opsi konfigurasi
state
pada kontrol untuk menginisialisasinya dengan status eksplisit saat pertama kali digambar. Misalnya, gunakan setelan ini untuk memperbaiki posisi awal thumb kontrol rentang rentang.var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'minValue': 1, 'maxValue': 10 }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 3, 'highValue': 8} });
-
Semua diagram yang merupakan bagian dari dasbor memiliki dataTableTable dasar yang sama dengan yang Anda siapkan pada langkah Menyiapkan Data. Namun, diagram sering kali memerlukan pengaturan kolom tertentu agar ditampilkan dengan benar: misalnya, diagram lingkaran memerlukan kolom string untuk label, diikuti dengan kolom angka untuk nilai tersebut.
Gunakan opsi
view
saat mengonfigurasi setiap instanceChartWrapper
untuk mendeklarasikan kolom yang relevan untuk diagram, seperti dalam contoh berikut.var data = google.visualization.arrayToDataTable([ ['Name', 'Gender', 'Age', 'Donuts eaten'], ['Michael' , 'Male', 12, 5], ['Elisa', 'Female', 20, 7], ['Robert', 'Male', 7, 3], ['John', 'Male', 54, 2], ['Jessica', 'Female', 22, 6], ['Aaron', 'Male', 3, 1], ['Margareth', 'Female', 42, 8] ]); var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'title': 'Donuts eaten per person' }, // The pie chart will use the columns 'Name' and 'Donuts eaten' // out of all the available ones. 'view': {'columns': [0, 3]} }); // The rest of dashboard configuration follows // ...
6. Menetapkan Dependensi
Setelah Anda membuat instance dasbor serta semua kontrol dan diagram yang akan menjadi bagiannya, gunakan metode bind()
untuk memberi tahu dasbor tentang dependensi yang ada antara kontrol dan diagram.
Setelah kontrol dan diagram diikat bersama, dasbor akan memperbarui diagram agar sesuai dengan batasan yang diterapkan oleh kontrol atas data. Di dasbor contoh yang Anda buat, penggeser rentang dan diagram lingkaran akan diikat bersama, sehingga setiap kali Anda berinteraksi dengan yang pertama, yang terakhir akan diperbarui untuk hanya menampilkan data yang cocok dengan rentang yang dipilih.
// 'pieChart' will update whenever you interact with 'donutRangeSlider' // to match the selected range. dashboard.bind(donutRangeSlider, pieChart);
Anda dapat mengikat kontrol dan diagram dalam berbagai konfigurasi: one-to-one, one-to-many, many-to-one, dan many-to-many. Setiap kali beberapa kontrol terikat ke diagram, dasbor akan memperbarui diagram agar sesuai dengan batasan gabungan yang diterapkan oleh semua kontrol terikat. Pada saat yang sama, kontrol dapat mendorong beberapa diagram secara serentak. Untuk menentukan beberapa binding
sekaligus, teruskan array ke metode bind()
, bukan satu instance. Anda juga dapat
merangkai beberapa panggilan bind()
secara bersamaan. Berikut ini beberapa contohnya.
// Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes. dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot); // One-to-many binding where 'ageSelector' drives two charts. dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]); // bind() chaining where each control drives its own chart. dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);
Untuk penggunaan lanjutan, Anda juga dapat mengikat kontrol ke kontrol lain untuk membuat rantai dependensi .
dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);
7. Menggambar Dasbor
Panggil metode draw()
pada instance dasbor untuk merender seluruh dasbor.
Metode draw()
hanya menggunakan satu parameter: DataTable
(atau DataView
) yang mendukung dasbor.
Anda harus memanggil draw()
setiap kali mengubah komposisi dasbor (misalnya dengan menambahkan kontrol atau diagram baru ke dalamnya) atau mengubah keseluruhan DataTable
yang mendukungnya.
Instance dasbor mengaktifkan peristiwa ready
setiap kali draw()
berhenti menggambar semua kontrol dan diagram yang merupakan bagian darinya. Peristiwa error
diaktifkan jika salah satu kontrol atau diagram terkelola gagal menggambar. Untuk mempelajari cara menangani peristiwa lebih lanjut, lihat Menangani Peristiwa.
Catatan: Anda harus memproses peristiwa ready
sebelum mencoba
mengubah komposisi dasbor atau menggambarnya lagi.
8. Perubahan Terprogram Setelah Menggambar
Setelah menyelesaikan draw()
awal, dasbor akan aktif dan merespons secara otomatis ke setiap tindakan yang Anda lakukan padanya (seperti mengubah rentang penggeser kontrol yang dipilih yang merupakan bagian dari dasbor).
Jika Anda perlu mengubah status dasbor secara terprogram, Anda dapat melakukannya dengan beroperasi langsung pada instance ControlWrapper
dan ChartWrapper
yang merupakan bagian darinya.
Aturan praktisnya adalah melakukan perubahan yang Anda perlukan langsung di instance ControlWrapper
(atau ChartWrapper
) tertentu: misalnya, mengubah opsi atau status kontrol melalui setOption()
dan setState()
, lalu panggil metode draw()
setelahnya. Dasbor kemudian akan diperbarui agar sesuai dengan perubahan yang diminta.
Contoh berikut menunjukkan kasus tersebut.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart', 'controls']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // We omit "var" so that programmaticSlider is visible to changeRange. var programmaticSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'programmatic_control_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'ui': {'labelStacking': 'vertical'} } }); var programmaticChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value' } }); var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); dashboard.bind(programmaticSlider, programmaticChart); dashboard.draw(data); changeRange = function() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); }; changeOptions = function() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); }; } </script> </head> <body> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> <div> <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button><br /> <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> </div> </td> <td> <div id="programmatic_chart_div"></div> </td> </tr> </table> </div> </body> </html>
Referensi API
Bagian ini mencantumkan objek yang diekspos oleh Controls and Dashboards API, dan metode standar yang diekspos oleh semua kontrol.
Dasbor
Mewakili kumpulan kontrol dan diagram yang berkolaborasi, dengan data dasar yang sama.
Konstruktor
Dashboard(containerRef)
- containerRef
- Referensi ke elemen penampung yang valid di halaman yang akan menyimpan konten dasbor.
Metode
Dasbor menampilkan metode berikut:
Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|
bind(controls, charts) |
google.visualisasi.Dasbor |
Mengikat satu atau beberapa Kontrol ke satu atau beberapa peserta dasbor lainnya (baik diagram maupun kontrol lainnya), sehingga semua yang terakhir digambar ulang setiap kali salah satu yang pertama mengumpulkan interaksi terprogram atau pengguna yang memengaruhi data yang dikelola oleh dasbor. Menampilkan
instance dasbor itu sendiri untuk merangkai beberapa panggilan
|
draw(dataTable) |
Tidak ada | Menggambar dasbor.
|
getSelection() |
Array objek |
Menampilkan array entitas visual yang dipilih dari diagram di dasbor. Metode
Catatan: Pemroses peristiwa untuk peristiwa tertentu masih harus dilampirkan ke setiap diagram yang ingin Anda dengarkan. |
Peristiwa
Objek Dashboard melemparkan peristiwa berikut. Perhatikan bahwa Anda harus memanggil Dashboard.draw()
sebelum peristiwa apa pun ditampilkan.
Name | Deskripsi | Properti |
---|---|---|
error |
Dipicu jika terjadi error saat mencoba merender dasbor. Satu atau beberapa kontrol dan diagram yang merupakan bagian dari dasbor mungkin gagal dirender. | id, pesan |
ready |
Dasbor telah selesai menggambar dan siap menerima perubahan. Semua kontrol dan
diagram yang merupakan bagian dari dasbor siap untuk panggilan metode eksternal dan interaksi
pengguna. Jika ingin mengubah dasbor (atau data yang ditampilkan) setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode Peristiwa
|
Tidak ada |
ControlWrapper
Objek ControlWrapper adalah wrapper di sekitar representasi JSON dari instance kontrol yang dikonfigurasi. Class ini mengekspos metode praktis untuk menentukan kontrol dasbor, menggambarnya, dan mengubah statusnya secara terprogram.
Konstruktor
ControlWrapper(opt_spec)
- spesifikasi_pengoptimalan
- [Opsional] - Objek JSON yang menentukan kontrol atau versi string serial dari objek tersebut. Properti objek JSON yang didukung ditampilkan dalam tabel berikut. Jika tidak ditentukan, Anda harus menetapkan semua properti yang sesuai menggunakan metode set... yang diekspos oleh ControlWrapper.
Properti | Jenis | Wajib | Default | Deskripsi |
---|---|---|---|---|
controlType | String | Wajib | tidak ada |
Nama class kontrol. Nama paket google.visualization dapat dihilangkan untuk kontrol Google. Contoh: CategoryFilter ,
NumberRangeFilter .
|
ID penampung | String | Wajib | tidak ada | ID elemen DOM di halaman Anda yang akan menghosting kontrol. |
opsi | Object | Opsional | tidak ada |
Objek yang menjelaskan opsi kontrol. Anda dapat menggunakan notasi literal JavaScript, atau memberikan handle ke objek. Contoh:
"options": {"filterColumnLabel": "Age",
"minValue": 10, "maxValue": 80}
|
status | Object | Opsional | tidak ada |
Objek yang menjelaskan status kontrol. Status ini mengumpulkan semua variabel yang dapat dipengaruhi oleh pengguna yang mengoperasikan kontrol. Misalnya, status penggeser rentang dapat dijelaskan dalam
posisi posisi yang ditempati ibu jari rendah dan tinggi. Anda dapat menggunakan notasi literal JavaScript, atau memberikan handle ke objek. Contoh: "state": {"lowValue": 20, "highValue": 50}
|
Metode
ControlWrapper mengekspos metode tambahan berikut:
Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|
draw() |
Tidak ada |
Menggambar kontrol. Biasanya, dasbor yang memegang kontrol akan menggambarnya.
Anda harus memanggil |
toJSON() |
String | Menampilkan versi string dari representasi JSON kontrol. |
clone() |
ControlWrapper | Menampilkan salinan dalam dari wrapper kontrol. |
getControlType() |
String |
Nama class kontrol. Jika ini adalah kontrol Google, nama tidak akan memenuhi syarat
dengan google.visualization . Jadi, misalnya, jika ini adalah kontrol KategoriFilter, kontrol akan menampilkan "CategoryFilter", bukan "google.visualization.CategoryFilter".
|
getControlName() |
String | Menampilkan nama kontrol yang ditetapkan oleh setControlName() . |
getControl() |
Referensi objek kontrol |
Menampilkan referensi ke kontrol yang dibuat oleh ControlWrapper ini. Ini akan menampilkan null sampai Anda memanggil draw() pada objek ControlWrapper (atau pada dasbor yang menampungnya), dan peristiwa siap muncul. Objek yang ditampilkan hanya menampilkan satu metode: resetControl() , yang mereset status kontrol ke status yang diinisialisasi (seperti mereset elemen formulir HTML).
|
getContainerId() |
String | ID elemen penampung DOM kontrol. |
getOption(key, opt_default_val) |
Jenis apa saja | Menampilkan nilai opsi kontrol yang ditentukan
|
getOptions() |
Object | Menampilkan objek opsi untuk kontrol ini. |
getState() |
Object | Menampilkan status kontrol. |
setControlType(type) |
Tidak ada |
Menetapkan jenis kontrol. Teruskan nama class kontrol untuk membuat instance. Jika ini adalah
kontrol Google, jangan memenuhi syarat dengan google.visualization .
Jadi, misalnya, untuk penggeser rentang di atas kolom numerik, teruskan "NumberRangeFilter".
|
setControlName(name) |
Tidak ada | Menetapkan nama arbitrer untuk kontrol. Ini tidak ditampilkan di mana pun pada kontrol, tetapi hanya untuk referensi Anda. |
setContainerId(id) |
Tidak ada | Menetapkan ID elemen DOM yang memuatnya untuk kontrol. |
setOption(key, value) |
Tidak ada |
Menetapkan satu nilai opsi kontrol, dengan key adalah nama opsi dan value
sebagai nilainya. 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 kontrol. |
setState(state_obj) |
Tidak ada | Menetapkan status kontrol. Status ini mengumpulkan semua variabel yang dapat dipengaruhi oleh pengguna yang mengoperasikan kontrol. Misalnya, status penggeser rentang dapat dijelaskan dalam hal posisi yang ditempati ibu jari rendah dan tinggi dari penggeser. |
Peristiwa
Objek ControlWrapper menampilkan peristiwa berikut. Perhatikan bahwa Anda harus memanggil ControlWrapper.draw()
(atau menggambar dasbor yang memegang kontrol) sebelum peristiwa apa pun akan ditampilkan.
Name | Deskripsi | Properti |
---|---|---|
error |
Dipicu jika terjadi error saat mencoba merender kontrol. | id, pesan |
ready |
Kontrol siap menerima interaksi pengguna dan panggilan metode eksternal. Jika ingin berinteraksi dengan kontrol, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode draw , dan memanggilnya hanya setelah peristiwa diaktifkan. Atau, Anda dapat memproses peristiwa ready di dasbor yang menyimpan kontrol dan metode kontrol panggilan hanya setelah peristiwa diaktifkan.
|
Tidak ada |
statechange |
Dipicu saat pengguna berinteraksi dengan kontrol, yang memengaruhi statusnya. Misalnya, peristiwa
statechange akan dipicu setiap kali Anda memindahkan thumb kontrol penggeser
rentang. Untuk mengambil status kontrol yang diperbarui setelah peristiwa diaktifkan, panggil ControlWrapper.getState() .
|
Tidak ada |
ChartWrapper
Lihat dokumentasi google.visualization.ChartWrapper
di bagian referensi API visualisasi.
Catatan berikut berlaku saat menggunakan ChartWrapper
sebagai bagian dari dasbor:
-
Jangan menetapkan atribut
dataTable
,query
,dataSourceUrl
, danrefreshInterval
secara eksplisit. Dasbor yang menyimpan diagram akan menangani pemberian data yang diperlukan. -
Tetapkan atribut
view
-nya untuk mendeklarasikan kolom mana, dari semua yang ada didataTable
yang diberikan ke dasbor, yang relevan untuk diagram, seperti yang ditampilkan di Membuat Instance Kontrol dan Diagram.
Galeri Kontrol
Filter adalah elemen grafis yang dapat digunakan orang untuk secara interaktif memilih data yang ditampilkan di diagram. Bagian ini menjelaskan filter Google Chart: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter, dan StringFilter.
Anda dapat menggunakan salah satunya sebagai parameter untuk ControlWrapper.setControlType()
.
Catatan: Dalam menjelaskan opsi, notasi titik digunakan untuk mendeskripsikan atribut objek
bertingkat. Misalnya, opsi bernama 'ui.label'
harus dideklarasikan dalam objek opsi sebagai var options = {"ui": {"label": "someLabelValue"} };
KategoriFilter
Pemilih untuk memilih satu atau beberapa kumpulan nilai yang ditentukan.
Negara bagian
Name | Jenis | Default | Deskripsi |
---|---|---|---|
nilai yang dipilih | Array objek atau jenis primitif | tidak ada |
Kumpulan nilai yang saat ini dipilih. Nilai yang dipilih harus berupa kumpulan nilai yang dapat dipilih secara keseluruhan yang ditentukan oleh opsi values (nilai yang tidak relevan akan diabaikan). Jika CategoryFilter tidak mengizinkan pilihan ganda, hanya nilai pertama array yang akan dipertahankan.
|
Opsi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
filterKolomIndeks | angka | tidak ada |
Kolom tabel data tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnLabel . Jika keduanya ada, opsi ini akan diprioritaskan.
|
filterColumnLabel | string | tidak ada |
Label kolom tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnIndex . Jika keduanya ada,
filterColumnIndex akan diprioritaskan.
|
values | Array | otomatis |
Daftar nilai yang dapat dipilih. Jika array Objek digunakan, array tersebut harus memiliki representasi toString() yang sesuai untuk ditampilkan kepada pengguna. Jika null atau belum ditentukan, daftar nilai akan otomatis dihitung dari nilai yang ada dalam kolom DataTable yang dikontrol oleh kontrol ini.
|
useFormattedValue | boolean | salah | Saat mengisi daftar nilai yang dapat dipilih secara otomatis dari kolom DataTable, filter ini beroperasi, baik menggunakan nilai sel yang sebenarnya atau nilai yang diformat. |
ui | Object | null |
Objek dengan anggota untuk mengonfigurasi berbagai aspek UI kontrol.
Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini:
{label: 'Metric', labelSeparator: ':'} |
ui.teks | string | 'Pilih nilai...' | Teks yang akan ditampilkan di dalam widget pemilih nilai saat tidak ada item yang dipilih. |
ui.sortValues | boolean | benar | Apakah nilai yang akan dipilih harus diurutkan. |
ui.SelectedValuesLayout | string | 'sisi' | Cara menampilkan nilai yang dipilih, jika beberapa pilihan diizinkan. Nilainya dapat berupa:
|
ui.allowNone | boolean | benar |
Apakah pengguna diizinkan untuk tidak memilih nilai apa pun. Jika false , pengguna harus memilih setidaknya satu nilai dari nilai yang tersedia. Selama inisialisasi kontrol, jika opsi ditetapkan ke false dan tidak ada status selectedValues yang diberikan, nilai pertama dari yang tersedia akan otomatis dipilih.
|
ui.allowMultiple | boolean | benar | Apakah beberapa nilai dapat dipilih, bukan hanya satu. |
ui.allowTyping | boolean | benar | Apakah pengguna diizinkan untuk mengetik dalam kolom teks untuk mempersempit daftar kemungkinan pilihan (melalui pelengkapan otomatis), atau tidak. |
label.ui | string | otomatis | Label yang akan ditampilkan di samping alat pilih kategori. Jika tidak ditentukan, label kolom yang dioperasikan oleh kontrol akan digunakan. |
ui.labelSeparator | string | tidak ada | String pemisah yang ditambahkan ke label, untuk memisahkan label secara visual dari pemilih kategori. |
ui.labelStacking | string | 'horizontal' |
Apakah label harus ditampilkan di atas (menumpuk vertikal) atau di samping (menumpuk horizontal)
pemilih kategori. Gunakan 'vertical' atau 'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-categoryfilter' | Class CSS yang akan ditetapkan ke kontrol, untuk penataan gaya kustom. |
DiagramRangeFilter
Penggeser dengan dua thumb yang ditumpangkan ke diagram, untuk memilih rentang nilai dari sumbu berkelanjutan diagram.
Negara bagian
Name | Jenis | Default | Deskripsi |
---|---|---|---|
rentang.mulai | angka, tanggal, tanggal/waktu, atau waktu | Nilai awal rentang | Awal dari rentang yang dipilih, inklusif. |
rentang.akhir | angka, tanggal, tanggal/waktu, atau waktu | Nilai akhir rentang | Akhir rentang yang dipilih, inklusif. |
Opsi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
filterKolomIndeks | angka | tidak ada |
Indeks kolom dalam tabel data tempat filter beroperasi.
Anda harus memberikan opsi ini atau filterColumnLabel . Jika keduanya ada, opsi ini akan diprioritaskan.
Perhatikan bahwa kita hanya perlu menentukan indeks kolom domain yang diwujudkan dalam sumbu berkelanjutan diagram yang digambar di dalam kontrol. |
filterColumnLabel | string | tidak ada |
Label kolom tabel data tempat filter beroperasi. Anda harus memberikan opsi ini atau filterColumnIndex . Jika keduanya ada, filterColumnIndex akan diprioritaskan.
Perhatikan bahwa kita hanya perlu menentukan label kolom domain yang diwujudkan dalam sumbu berkelanjutan pada diagram yang digambar di dalam kontrol. |
ui | Object | null |
Objek dengan anggota untuk mengonfigurasi berbagai aspek UI kontrol.
Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}} |
ui.chartType | string | 'ComboChart' |
Jenis diagram yang digambar di dalam kontrol. Dapat berupa salah satu dari: 'AreaChart', 'LineChart', 'ComboChart', atau 'ScatterChart'. |
ui.chartOptions | Object |
{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } } |
Opsi konfigurasi diagram yang digambar di dalam kontrol.
Mengizinkan tingkat konfigurasi yang sama seperti diagram di dasbor, dan mematuhi format yang sama seperti yang diterima oleh ChartWrapper.setOptions().
Anda dapat menentukan opsi tambahan atau mengganti opsi default (perhatikan bahwa default telah dipilih dengan cermat untuk tampilan yang optimal). |
ui.chartView | Objek atau string (Objek serial) | null |
Spesifikasi tampilan yang akan diterapkan ke tabel data yang digunakan untuk menggambar diagram di dalam kontrol. Mengizinkan tingkat konfigurasi yang sama seperti diagram di dasbor, dan mematuhi format yang sama seperti yang diterima oleh ChartWrapper.setView(). Jika tidak ditentukan, tabel data itu sendiri akan digunakan untuk menggambar diagram.
Perhatikan bahwa sumbu horizontal dari diagram yang digambar harus berkelanjutan,
jadi pastikan untuk menentukan |
ui.minRangeSize | angka | Perbedaan nilai data diinterpretasikan sebagai 1 piksel |
Ukuran rentang minimum yang dapat dipilih (range.end - range.start ), ditentukan dalam unit
nilai data. Untuk sumbu numerik, sumbunya adalah angka (tidak harus bilangan bulat).
Untuk sumbu tanggal, tanggal/waktu, atau sumbu waktu, bilangan tersebut adalah bilangan bulat yang menentukan perbedaan dalam milidetik.
|
ui.snapToData | boolean | salah |
Jika true (benar), rentang thumb dipaskan ke titik data terdekat.
Dalam hal ini, titik akhir dari rentang yang ditampilkan oleh getState() haruslah
nilai-nilai dalam tabel data.
|
Peristiwa
Penambahan pada peristiwa ControlWrapper:
Name | Deskripsi | Properti |
---|---|---|
statechange |
Sama seperti yang didokumentasikan untuk setiap ControlWrapper, hanya memiliki properti boolean tambahan,
inProgress yang menentukan apakah status saat ini sedang diubah
(salah satu thumb atau rentang itu sedang ditarik).
|
sedang Berlangsung |
TanggalRentangFilter
Penggeser bernilai ganda untuk memilih rentang tanggal.
Coba gerakkan penggeser untuk mengubah baris yang ditampilkan dalam tabel di bawah.
Negara bagian
Name | Jenis | Default | Deskripsi |
---|---|---|---|
NilaiRendah | angka | tidak ada | Tingkat yang lebih rendah dari rentang yang dipilih, inklusif. |
NilaiTinggi | angka | tidak ada | Tingkat yang lebih tinggi dari rentang yang dipilih, inklusif. |
lowThumbAtMinimum | boolean | tidak ada |
Apakah thumb bawah penggeser dikunci pada rentang minimum yang diizinkan. Jika ditetapkan,
akan menggantikan lowValue .
|
highThumbAtmaksimum | boolean | tidak ada |
Apakah thumb penggeser yang lebih tinggi terkunci pada rentang maksimum yang diizinkan. Jika ditetapkan,
akan menggantikan highValue .
|
Opsi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
filterKolomIndeks | angka | tidak ada |
Kolom tabel data tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnLabel . Jika keduanya ada, opsi ini akan diprioritaskan.
Harus mengarah ke kolom dengan jenis number .
|
filterColumnLabel | string | tidak ada |
Label kolom tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnIndex . Jika keduanya ada,
filterColumnIndex akan diprioritaskan. Harus mengarah ke kolom dengan jenis
number .
|
minValue | Tanggal | otomatis | Nilai minimum yang diizinkan untuk rentang yang lebih rendah. Jika tidak ditentukan, nilai akan disimpulkan dari konten DataTable yang dikelola oleh kontrol. |
nilaimaks | Tanggal | otomatis | Nilai maksimum yang diizinkan untuk rentang yang lebih tinggi. Jika tidak ditentukan, nilai akan disimpulkan dari konten DataTable yang dikelola oleh kontrol. |
ui | Object | null |
Objek dengan anggota untuk mengonfigurasi berbagai aspek UI kontrol.
Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini:
{label: 'Age', labelSeparator: ':'} |
format.ui | Object | tidak ada | Cara menampilkan tanggal sebagai string. Menerima format tanggal yang valid. |
ui.step | string | hari | Perubahan minimum yang mungkin terjadi saat menarik ibu jari penggeser: dapat berupa satuan waktu hingga "hari". ("month" dan "year" belum didukung.) |
ui.ticks | angka | otomatis | Jumlah tick (posisi tetap di panel rentang) yang dapat ditempati ibu jari penggeser. |
peningkatan ui.unit | string | '1' | Jumlah yang akan ditingkatkan untuk penambahan unit tingkat rentang. Penambahan unit sama dengan menggunakan tombol panah untuk memindahkan ibu jari penggeser. |
ui.blockIncrement | angka | 10 | Jumlah yang akan ditingkatkan untuk peningkatan blok rentang rentang. Penambahan blok setara dengan menggunakan tombol pgUp dan pgDown untuk memindahkan ibu jari penggeser. |
ui.showRangeValues | boolean | benar | Apakah akan memiliki label di samping penggeser yang menampilkan luasan rentang yang dipilih. |
ui.orientation | string | 'horizontal' | Orientasi penggeser. Salah satu dari 'horizontal' atau 'vertical' . |
label.ui | string | otomatis | Label yang akan ditampilkan di samping penggeser. Jika tidak ditentukan, label kolom yang dioperasikan oleh kontrol akan digunakan. |
ui.labelSeparator | string | tidak ada | String pemisah ditambahkan ke label, untuk memisahkan label secara visual dari penggeser. |
ui.labelStacking | string | 'horizontal' |
Apakah label harus ditampilkan di atas (menumpuk vertikal) atau di samping (menumpuk horizontal)
penggeser. Gunakan 'vertical' atau 'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-rangefilter' | Class CSS yang akan ditetapkan ke kontrol, untuk penataan gaya kustom. |
Filter RentangRentang
Penggeser bernilai ganda untuk memilih rentang nilai numerik.
Negara bagian
Name | Jenis | Default | Deskripsi |
---|---|---|---|
NilaiRendah | angka | tidak ada | Tingkat yang lebih rendah dari rentang yang dipilih, inklusif. |
NilaiTinggi | angka | tidak ada | Tingkat yang lebih tinggi dari rentang yang dipilih, inklusif. |
lowThumbAtMinimum | boolean | tidak ada |
Apakah thumb bawah penggeser dikunci pada rentang minimum yang diizinkan. Jika ditetapkan,
akan menggantikan lowValue .
|
highThumbAtmaksimum | boolean | tidak ada |
Apakah thumb penggeser yang lebih tinggi terkunci pada rentang maksimum yang diizinkan. Jika ditetapkan,
akan menggantikan highValue .
|
Opsi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
filterKolomIndeks | angka | tidak ada |
Kolom tabel data tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnLabel . Jika keduanya ada, opsi ini akan diprioritaskan.
Harus mengarah ke kolom dengan jenis number .
|
filterColumnLabel | string | tidak ada |
Label kolom tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnIndex . Jika keduanya ada,
filterColumnIndex akan diprioritaskan. Harus mengarah ke kolom dengan jenis
number .
|
minValue | angka | otomatis | Nilai minimum yang diizinkan untuk rentang yang lebih rendah. Jika tidak ditentukan, nilai akan disimpulkan dari konten DataTable yang dikelola oleh kontrol. |
nilaimaks | angka | otomatis | Nilai maksimum yang diizinkan untuk rentang yang lebih tinggi. Jika tidak ditentukan, nilai akan disimpulkan dari konten DataTable yang dikelola oleh kontrol. |
ui | Object | null |
Objek dengan anggota untuk mengonfigurasi berbagai aspek UI kontrol.
Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini:
{label: 'Age', labelSeparator: ':'} |
format.ui | Object | tidak ada | Cara menampilkan angka sebagai string. Menerima format angka yang valid. |
ui.step | angka | 1, atau dihitung dari ticks jika ditentukan |
Perubahan minimum yang mungkin terjadi saat menarik ibu jari penggeser. |
ui.ticks | angka | otomatis | Jumlah tick (posisi tetap di panel rentang) yang dapat ditempati ibu jari penggeser. |
peningkatan ui.unit | angka | 1 | Jumlah yang akan ditingkatkan untuk penambahan unit tingkat rentang. Penambahan unit sama dengan menggunakan tombol panah untuk memindahkan ibu jari penggeser. |
ui.blockIncrement | angka | 10 | Jumlah yang akan ditingkatkan untuk peningkatan blok rentang rentang. Penambahan blok setara dengan menggunakan tombol pgUp dan pgDown untuk memindahkan ibu jari penggeser. |
ui.showRangeValues | boolean | benar | Apakah akan memiliki label di samping penggeser yang menampilkan luasan rentang yang dipilih. |
ui.orientation | string | 'horizontal' | Orientasi penggeser. Salah satu dari 'horizontal' atau 'vertical' . |
label.ui | string | otomatis | Label yang akan ditampilkan di samping penggeser. Jika tidak ditentukan, label kolom yang dioperasikan oleh kontrol akan digunakan. |
ui.labelSeparator | string | tidak ada | String pemisah ditambahkan ke label, untuk memisahkan label secara visual dari penggeser. |
ui.labelStacking | string | 'horizontal' |
Apakah label harus ditampilkan di atas (menumpuk vertikal) atau di samping (menumpuk horizontal)
penggeser. Gunakan 'vertical' atau 'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-rangefilter' | Class CSS yang akan ditetapkan ke kontrol, untuk penataan gaya kustom. |
FilterString
Kolom input teks sederhana yang memungkinkan Anda memfilter data melalui pencocokan string. Setelan ini diperbarui setelah setiap
penekanan tombol: coba ketik j
untuk mempersempit tabel di bawah ke John dan Jessica.
Negara bagian
Name | Jenis | Default | Deskripsi |
---|---|---|---|
value | string atau objek | tidak ada | Teks yang saat ini dimasukkan di kolom input kontrol. |
Opsi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
filterKolomIndeks | angka | tidak ada |
Kolom tabel data tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnLabel . Jika keduanya ada, opsi ini akan diprioritaskan.
|
filterColumnLabel | string | tidak ada |
Label kolom tempat filter akan beroperasi. Anda harus memberikan opsi ini atau filterColumnIndex . Jika keduanya ada,
filterColumnIndex akan diprioritaskan.
|
matchType | string | 'awalan' |
Apakah kontrol hanya boleh cocok dengan nilai yang tepat ('exact' ), awalan yang dimulai dari awal nilai ('prefix' ) atau substring apa pun ('any' ).
|
peka huruf besar/kecil | boolean | salah | Apakah pencocokan harus peka huruf besar/kecil atau tidak. |
useFormattedValue | boolean | salah | Apakah kontrol harus cocok dengan nilai berformat sel atau dengan nilai aktual. |
ui | Object | null |
Objek dengan anggota untuk mengonfigurasi berbagai aspek UI kontrol.
Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini:
{label: 'Name', labelSeparator: ':'} |
ui.realtimeTrigger | boolean | benar | Apakah kontrol akan cocok setiap kali tombol ditekan atau hanya ketika kolom input 'berubah' (kehilangan fokus atau menekan tombol Enter). |
label.ui | string | otomatis | Label yang akan ditampilkan di samping kolom input. Jika tidak ditentukan, label kolom yang dioperasikan oleh kontrol akan digunakan. |
ui.labelSeparator | string | tidak ada | String pemisah ditambahkan ke label, untuk memisahkan label secara visual dari kolom input. |
ui.labelStacking | string | 'horizontal' |
Apakah label harus ditampilkan di atas (menumpuk vertikal) atau di samping (menumpuk horizontal)
kolom input. Gunakan 'vertical' atau 'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-stringfilter' | Class CSS yang akan ditetapkan ke kontrol, untuk penataan gaya kustom. |