Kontrol dan Dasbor

Di halaman ini, Anda akan melihat cara menggabungkan beberapa diagram ke dasbor dan memberi pengguna kontrol untuk memanipulasi data yang mereka tampilkan.

Ringkasan

Dasbor adalah cara mudah untuk mengatur bersama dan mengelola beberapa diagram yang memiliki data pokok yang sama. Dengan menggunakan API yang dijelaskan di halaman ini, Anda dapat membebaskan diri dari beban kerja sama 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 serta pendistribusian 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 menjalankan data yang dikelola oleh dasbor dan diagram yang merupakan bagian dari dasbor.

Kontrol ditetapkan menggunakan class google.visualization.ControlWrapper. Anda dapat menambahkan instance ControlWrapper ke dasbor, yang berperilaku seperti pipa dan katup dalam sistem pipa dan katup. Mereka mengumpulkan input pengguna dan menggunakan informasi tersebut untuk memutuskan data mana yang dikelola dasbor yang harus tersedia untuk diagram yang merupakan bagian dari dasbor.

Lihat contoh berikut saat pemilih 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 penting untuk membuat dasbor dan menyematkannya di halaman Anda. Anda akan menemukan cuplikan kode yang menunjukkan semua langkah ini di bawah, diikuti dengan informasi mendetail tentang setiap langkah.

  1. 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 serta diagram yang merupakan bagian darinya. Biasanya Anda akan menggunakan <div> untuk setiap modul.
  2. Muat library Anda. Dasbor hanya memerlukan dua library untuk disertakan atau dimuat di halaman: Google AJAX API dan paket controls Google Visualization.
  3. Siapkan data Anda. Anda harus menyiapkan data yang akan divisualisasikan; ini berarti menentukan sendiri data tersebut dalam kode, atau membuat kueri situs jarak jauh untuk mendapatkan data.
  4. Membuat instance dasbor. Buat instance dasbor Anda dengan memanggil konstruktornya dan meneruskan referensi ke elemen <div> yang akan menyimpannya.
  5. Buat kontrol dan instance diagram sebanyak yang Anda butuhkan. Buat instance google.visualization.ChartWrapper dan google.visualization.ControlWrapper untuk mendeskripsikan setiap diagram dan kontrol yang dikelola dasbor.
  6. Menetapkan dependensi. Panggil bind() di dasbor Anda dan teruskan instance kontrol dan diagram untuk memberi tahu dasbor apa yang harus dikelola. Setelah kontrol dan diagram diikat, dasbor akan memperbarui diagram agar sesuai dengan batasan yang diterapkan oleh kontrol terhadap data.
  7. Gambar dasbor. Panggil draw() di dasbor dan teruskan data untuk menggambar seluruh dasbor di halaman.
  8. Perubahan terprogram setelah pengundian. Secara opsional, setelah penggambaran awal, Anda dapat secara terprogram mengarahkan kontrol yang merupakan bagian dari dasbor, dan meminta dasbor memperbarui diagram sebagai respons terhadap hal tersebut.

Berikut contoh sederhana halaman yang membuat dasbor sederhana dengan penggeser rentang yang menggerakkan 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>

Inilah dasbor yang dibuat oleh kode ini.

1. Buat Skeleton HTML untuk Dasbor Anda

Halaman Anda harus memiliki elemen HTML (biasanya <div>) untuk menampung dasbor itu sendiri serta semua kontrol dan diagram yang ada di dalamnya. Saat membuat instance dasbor, kontrol, dan diagram, Anda harus meneruskan referensi ke elemennya, jadi tetapkan ID ke 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 memosisikan setiap elemen HTML sesuai keinginan Anda pada dasbor.

2. Memuat Library Anda

Dasbor hanya memerlukan dua library untuk disertakan atau dimuat di halaman: Google AJAX API dan paket controls Google Visualization. API (khususnya, google.visualization.ChartWrapper) otomatis mengidentifikasi paket lain yang diperlukan (misalnya, gauge jika Anda menggunakan diagram Meteran) 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. Siapkan Data Anda

Setelah Visualization API dimuat, google.charts.setOnLoadCallback() akan memanggil fungsi pengendali, sehingga Anda tahu bahwa semua metode dan class bantuan yang diperlukan akan siap untuk mulai menyiapkan data.

Dasbor menerima data dalam DataTable, sama seperti diagram.

4. Membuat Instance Dasbor

Setelah membuat data, Anda dapat membuat instance objek dasbor. Konstruktor dasbor mengambil satu parameter: referensi ke elemen DOM tempat menggambar dasbor. 

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

Dasbor ditampilkan sebagai class JavaScript. Setelah membuat instance dasbor, Anda dapat melakukan beberapa langkah opsional seperti menambahkan pemroses peristiwa (misalnya, untuk diberi tahu 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 Anda perlukan 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 akan memberikan data yang sesuai kepada setiap pengguna. Namun, pastikan untuk 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 (atau filterColumnLabel) kepada semua kontrol untuk menentukan kolom google.visualization.DataTable tempat kontrol beroperasi (pada contoh di atas, kontrol beroperasi di kolom berlabel Donuts dimakan),

  • Gunakan opsi konfigurasi state pada kontrol untuk menginisialisasinya dengan status eksplisit saat pertama kali digambar. Misalnya, gunakan setelan ini untuk memperbaiki posisi awal jempol kontrol penggeser 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 dataTable pokok yang sama dengan yang Anda siapkan pada langkah Menyiapkan Data Anda. Namun, diagram sering kali memerlukan pengaturan kolom tertentu agar dapat ditampilkan dengan benar: misalnya, diagram lingkaran memerlukan kolom string untuk label, diikuti dengan kolom angka untuk nilai.

    Gunakan opsi view saat mengonfigurasi setiap instance ChartWrapper untuk mendeklarasikan kolom mana 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, dasbor akan memperbarui diagram agar sesuai dengan batasan yang diterapkan oleh kontrol terhadap data. Pada dasbor contoh yang Anda buat, penggeser rentang dan diagram lingkaran saling terkait, sehingga setiap kali Anda berinteraksi dengan diagram pertama, diagram yang kedua 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 diberlakukan oleh semua kontrol terikat. Pada saat yang sama, sebuah kontrol dapat menjalankan beberapa diagram secara serentak. Untuk menentukan beberapa binding sekaligus, teruskan array ke metode bind(), bukan instance tunggal. Anda juga dapat menggabungkan beberapa panggilan bind(). 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 Anda

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 dasbor) 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 digambar. Untuk mempelajari lebih lanjut cara menangani peristiwa, lihat Menangani Peristiwa.

Catatan: Anda harus memproses peristiwa ready sebelum mencoba mengubah komposisi dasbor atau menggambarnya lagi.

8. Perubahan Terprogram Setelah Penarikan

Setelah menyelesaikan draw() awal, dasbor akan menjadi live dan otomatis merespons setiap tindakan yang Anda lakukan (seperti mengubah rentang penggeser kontrol yang dipilih yang merupakan bagian dari dasbor).

Jika perlu mengubah status dasbor secara terprogram, Anda dapat melakukannya dengan beroperasi langsung pada instance ControlWrapper dan ChartWrapper yang merupakan bagian darinya. Prinsipnya adalah melakukan perubahan yang diperlukan langsung pada instance ControlWrapper (atau ChartWrapper) tertentu: misalnya, ubah opsi kontrol atau status masing-masing melalui setOption() dan setState(), dan panggil metode draw() setelahnya. Dasbor kemudian akan diperbarui agar sesuai dengan perubahan yang diminta.

Contoh berikut menunjukkan kasus tersebut.
Halaman Web Lengkap
<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, serta metode standar yang diekspos oleh semua kontrol.

Dasbor

Mewakili kumpulan kontrol dan diagram yang berkolaborasi yang memiliki data pokok 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.visualization.Dashboard

Mengikat satu atau beberapa Kontrol ke satu atau beberapa peserta dasbor lainnya (baik diagram maupun kontrol lainnya), sehingga semua Kontrol tersebut digambar ulang setiap kali salah satu Kontrol pertama mengumpulkan interaksi terprogram atau pengguna yang memengaruhi data yang dikelola oleh dasbor. Menampilkan instance dasbor itu sendiri untuk merangkai beberapa panggilan bind() bersama-sama.

  • controls - Satu atau array instance google.visualization.ControlWrapper yang menentukan kontrol yang akan diikat.
  • charts - Satu atau array instance google.visualization.ChartWrapper menentukan diagram yang akan dikendalikan oleh kontrol.
draw(dataTable) Tidak ada

Menggambar dasbor.
getSelection() Array objek

Menampilkan array entity visual yang dipilih pada diagram di dasbor. Metode getSelection(), saat dipanggil di dasbor, akan menampilkan gabungan semua pilihan yang dibuat pada semua pilihan yang dibuat pada semua diagram di dalamnya, sehingga memungkinkan penggunaan referensi tunggal saat bekerja dengan pilihan diagram.

Catatan: Pemroses peristiwa untuk peristiwa tertentu masih harus dilampirkan ke setiap diagram yang ingin Anda proses.

Deskripsi lengkap

Acara

Objek Dashboard menampilkan peristiwa berikut. Perhatikan bahwa Anda harus memanggil Dashboard.draw() sebelum peristiwa apa pun akan ditampilkan.

Name Deskripsi Properti
error Diaktifkan saat 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 ditampilkannya) setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode draw, lalu menerapkan perubahan hanya setelah peristiwa diaktifkan.

Peristiwa ready juga akan mengaktifkan:

  • setelah penyelesaian pemuatan ulang dasbor yang dipicu oleh interaksi pengguna atau terprogram dengan salah satu kontrol,
  • setelah panggilan terprogram ke metode draw() dari bagian diagram mana pun di dasbor.
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)
opt_spec
[Opsional] - Objek JSON yang menentukan kontrol, atau versi string serial dari objek tersebut. Properti objek JSON yang didukung ditunjukkan 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.
containerId String Wajib tidak ada ID elemen DOM di halaman Anda yang akan menghosting kontrol.
opsi Objek Opsional tidak ada Objek yang menjelaskan opsi untuk kontrol. Anda dapat menggunakan notasi literal JavaScript, atau memberikan handle ke objek. Contoh: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state Objek Opsional tidak ada Objek yang menjelaskan status kontrol. Status mengumpulkan semua variabel yang dapat dipengaruhi oleh pengguna yang mengoperasikan kontrol. Misalnya, status penggeser rentang dapat dijelaskan dalam posisi yang ditempati oleh jempol rendah dan tinggi penggeser. 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 draw() untuk memaksa penggambaran ulang kontrol secara terprogram setelah Anda mengubah setelan lainnya, seperti opsi atau status.

toJSON() String Menampilkan versi string dari representasi JSON kontrol.
clone() ControlWrapper Menampilkan salinan mendalam wrapper kontrol.
getControlType() String Nama class kontrol. Jika ini adalah kontrol Google, nama ini tidak akan memenuhi syarat dengan google.visualization. Jadi, misalnya, jika ini adalah kontrol CategoryFilter, parameter ini 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. Tindakan ini akan menampilkan null sampai Anda memanggil draw() pada objek ControlWrapper (atau di dasbor yang menahannya), dan menampilkan peristiwa yang siap. Objek yang ditampilkan hanya menampilkan satu metode: resetControl(), yang mereset status kontrol ke status awal inisialisasi (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

  • kunci - Nama opsi yang akan diambil. Dapat berupa nama yang memenuhi syarat, seperti 'vAxis.title'.
  • opt_default_value [Opsional] - Jika nilai yang ditentukan tidak ditentukan atau null, nilai ini akan ditampilkan.
getOptions() Objek Menampilkan objek opsi untuk kontrol ini.
getState() Objek 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 nilai opsi kontrol tunggal, dengan kunci adalah nama opsi dan nilai adalah nilainya. Untuk membatalkan penetapan opsi, teruskan null untuk nilai tersebut. Perhatikan bahwa key 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 mengumpulkan semua variabel yang dapat dipengaruhi oleh kontrol oleh pengguna. Misalnya, status penggeser rentang dapat dijelaskan dalam hal posisi yang ditempati oleh jempol rendah dan tinggi penggeser.

Acara

Objek ControlWrapper menampilkan peristiwa berikut. Perhatikan bahwa Anda harus memanggil ControlWrapper.draw() (atau menggambar dasbor yang menyimpan kontrol) sebelum peristiwa apa pun akan ditampilkan.

Name Deskripsi Properti
error Diaktifkan saat 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 metode kontrol dan kontrol panggilan hanya setelah peristiwa diaktifkan. Tidak ada
statechange Diaktifkan saat pengguna berinteraksi dengan kontrol, sehingga memengaruhi statusnya. Misalnya, peristiwa statechange akan diaktifkan setiap kali Anda memindahkan jempol 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 setel atribut dataTable, query, dataSourceUrl, dan refreshInterval secara eksplisit. Dasbor yang menyimpan diagram bertanggung jawab untuk memasukkan data yang dibutuhkan.
  • Tetapkan atribut view untuk mendeklarasikan kolom mana, dari semua kolom yang ada di dataTable yang diberikan ke dasbor, yang relevan untuk diagram, seperti yang ditunjukkan di Membuat Instance Kontrol dan Bagan.

Filter adalah elemen grafis yang dapat digunakan orang untuk memilih secara interaktif data mana yang ditampilkan pada diagram Anda. 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 menjelaskan atribut objek bertingkat. Misalnya, opsi bernama 'ui.label' harus dideklarasikan dalam objek opsi sebagai var options = {"ui": {"label": "someLabelValue"} };

CategoryFilter

Pemilih untuk memilih satu atau beberapa di antara kumpulan nilai yang ditentukan.

Negara Bagian

Name Jenis Default Deskripsi
selectedValues Array objek atau jenis primitif tidak ada Kumpulan nilai yang saat ini dipilih. Nilai yang dipilih harus merupakan kumpulan keseluruhan nilai yang dapat dipilih dan ditentukan oleh opsi values (nilai yang tidak relevan akan diabaikan). Jika CategoryFilter tidak mengizinkan pilihan ganda, hanya nilai pertama array yang dipertahankan.

Opsi

Name Jenis Default Deskripsi
filterColumnIndex number tidak ada Kolom tabel data di mana filter harus beroperasi. Opsi ini atau filterColumnLabel harus diberikan. Jika keduanya ada, opsi ini akan diprioritaskan.
filterColumnLabel string tidak ada Label kolom di mana filter harus dioperasikan. Opsi ini atau filterColumnIndex harus diberikan. Jika keduanya ada, filterColumnIndex akan diprioritaskan.
values Array otomatis Daftar nilai yang dapat dipilih. Jika digunakan, array Objek harus memiliki representasi toString() yang sesuai untuk ditampilkan kepada pengguna. Jika null atau tidak ditentukan, daftar nilai akan otomatis dihitung dari nilai yang ada dalam kolom DataTable tempat kontrol ini dioperasikan.
useFormattedValue boolean false Saat mengisi daftar nilai yang dapat dipilih secara otomatis dari kolom DataTable, filter ini beroperasi, baik menggunakan nilai sel sebenarnya atau nilai yang telah diformat.
ui Objek 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.caption string 'Pilih nilai...' Caption yang akan ditampilkan di dalam widget pemilih nilai saat tidak ada item yang dipilih.
ui.sortValues boolean true Apakah nilai yang dipilih harus diurutkan atau tidak.
ui.selectedValuesLayout string 'selain' Cara menampilkan nilai yang dipilih, saat beberapa pilihan diizinkan. Kemungkinan nilainya adalah:
  • 'aside': nilai yang dipilih akan ditampilkan dalam satu baris teks di samping widget pemilih nilai,
  • 'below': nilai yang dipilih akan ditampilkan dalam satu baris teks di bawah widget,
  • 'belowWrapping': mirip dengan below, tetapi entri yang tidak muat dalam alat pilih akan digabungkan ke baris baru,
  • 'belowStacked': nilai yang dipilih akan ditampilkan di kolom di bawah widget.
ui.allowNone boolean true 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 nilai yang tersedia akan otomatis dipilih.
ui.allowMultiple boolean true Apakah beberapa nilai dapat dipilih, bukan hanya satu.
ui.allowTyping boolean true Apakah pengguna diizinkan mengetik kolom teks untuk mempersempit daftar pilihan yang memungkinkan (melalui pelengkapan otomatis), atau tidak.
ui.label string otomatis Label yang akan ditampilkan di samping pemilih kategori. Jika tidak ditentukan, label kolom tempat kontrol dioperasikan 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 akan ditampilkan di atas (penumpukan vertikal) atau di samping (penumpukan horizontal) alat pilih kategori. Gunakan 'vertical' atau 'horizontal'.
ui.cssClass string 'google-visualization-controls-categoryfilter' Class CSS yang akan ditetapkan ke kontrol, untuk gaya kustom.

ChartRangeFilter

Penggeser dengan dua ibu jari ditumpangkan pada diagram untuk memilih rentang nilai dari sumbu berkelanjutan diagram.

Negara Bagian

Name Jenis Default Deskripsi
range.start angka, tanggal, tanggal & waktu Nilai awal rentang Awal rentang yang dipilih, inklusif.
range.end angka, tanggal, tanggal & waktu Nilai akhir rentang Akhir rentang yang dipilih, inklusif.

Opsi

Name Jenis Default Deskripsi
filterColumnIndex number 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 Anda hanya dapat menentukan indeks kolom domain yang tercakup dalam sumbu berkelanjutan pada diagram yang digambar di dalam kontrol.

filterColumnLabel string tidak ada Label kolom tabel data tempat filter beroperasi. Opsi ini atau filterColumnIndex harus diberikan. Jika keduanya ada, filterColumnIndex akan diprioritaskan.

Perhatikan bahwa Anda hanya dapat menentukan label kolom domain yang tercantum dalam sumbu berkelanjutan pada diagram yang digambar dalam kontrol.

ui Objek 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 dalam kontrol.
Dapat berupa salah satu dari: 'AreaChart', 'LineChart', 'ComboChart', atau 'ScatterChart'.
ui.chartOptions Objek 
{
 '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. Memungkinkan tingkat konfigurasi yang sama dengan diagram mana pun di dasbor, dan sesuai dengan format yang sama seperti yang diterima oleh ChartWrapper.setOptions().

Anda dapat menentukan opsi tambahan atau mengganti opsi default (perhatikan bahwa opsi default telah dipilih dengan cermat untuk tampilan yang optimal).

ui.chartView Objek atau string (Objek yang diserialisasi) null Spesifikasi tampilan yang akan diterapkan ke tabel data yang digunakan untuk menggambar diagram di dalam kontrol. Memungkinkan tingkat konfigurasi yang sama dengan diagram mana pun di dasbor, dan sesuai dengan format yang sama seperti yang diterima oleh ChartWrapper.setView(). Jika tidak ditentukan, tabel data itu sendiri digunakan untuk menggambar diagram.

Perhatikan bahwa sumbu horizontal dari diagram yang digambar harus berkelanjutan, jadi Anda harus berhati-hati dalam menentukan ui.chartView.

ui.minRangeSize number Perbedaan nilai data ditafsirkan sebagai 1 piksel Ukuran rentang minimum yang dapat dipilih (range.end - range.start), yang ditentukan dalam unit nilai data. Untuk sumbu numerik, nilainya adalah angka (tidak harus bilangan bulat). Untuk sumbu tanggal, penanggalan, atau waktu, nilai ini berupa bilangan bulat yang menentukan perbedaan dalam milidetik.
ui.snapToData boolean false Jika true (benar), rentang jempol akan dipaskan ke titik data terdekat. Dalam hal ini, titik akhir rentang yang ditampilkan oleh getState() tentu saja merupakan nilai dalam tabel data.

Acara

Penambahan ke peristiwa ControlWrapper:

Name Deskripsi Properti
statechange Sama seperti yang didokumentasikan untuk setiap ControlWrapper, hanya memiliki properti boolean tambahan, inProgress, yang menentukan apakah status sedang diubah (salah satu thumb atau rentang itu sendiri sedang ditarik). inProgress

DateRangeFilter

Penggeser bernilai ganda untuk memilih rentang tanggal.

Coba gerakkan penggeser untuk mengubah baris yang ditampilkan pada tabel di bawah.

Negara Bagian

Name Jenis Default Deskripsi
lowValue number tidak ada Tingkat yang lebih rendah untuk rentang yang dipilih, inklusif.
highValue number tidak ada Cakupan rentang yang dipilih yang lebih tinggi, inklusif.
lowThumbAtMinimum boolean tidak ada Apakah jempol bawah penggeser dikunci pada rentang minimum yang diizinkan. Jika ditetapkan, lowValue akan diganti.
highThumbAtMaximum boolean tidak ada Apakah ibu jari penggeser yang lebih tinggi dikunci pada rentang maksimum yang diizinkan. Jika ditetapkan, highValue akan diganti.

Opsi

Name Jenis Default Deskripsi
filterColumnIndex number tidak ada Kolom tabel data di mana filter harus beroperasi. Opsi ini atau filterColumnLabel harus diberikan. Jika keduanya ada, opsi ini akan diprioritaskan. Harus mengarah ke kolom dengan jenis number.
filterColumnLabel string tidak ada Label kolom di mana filter harus dioperasikan. Opsi ini atau filterColumnIndex harus diberikan. 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.
maxValue 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 Objek 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: ':'}
ui.format Objek tidak ada Cara merepresentasikan tanggal sebagai string. Menerima semua format tanggal yang valid.
ui.step string hari Perubahan minimum yang memungkinkan saat menarik thumbnail penggeser: dapat berupa satuan waktu apa pun hingga "hari". ("bulan" dan "tahun" belum didukung).
ui.ticks number otomatis Jumlah titik skala (posisi tetap di panel rentang) yang dapat ditempati oleh ibu jari penggeser.
ui.unitIncrement string "1" Jumlah yang akan bertambah untuk penambahan satuan dari jangkauan rentang. Penambahan unit setara dengan menggunakan tombol panah untuk menggerakkan ibu jari penggeser.
ui.blockIncrement number 10 Jumlah yang akan ditambahkan untuk penambahan blok rentang rentang. Penambahan blok sama dengan menggunakan tombol pgUp dan pgDown untuk menggerakkan ibu jari penggeser.
ui.showRangeValues boolean true Apakah label di samping penggeser yang menampilkan cakupan rentang yang dipilih atau tidak.
ui.orientation string 'horizontal' Orientasi penggeser. Berupa 'horizontal' atau 'vertical'.
ui.label string otomatis Label yang akan ditampilkan di samping penggeser. Jika tidak ditentukan, label kolom tempat kontrol beroperasi akan digunakan.
ui.labelSeparator string tidak ada String pemisah yang ditambahkan ke label untuk memisahkan label dari penggeser secara visual.
ui.labelStacking string 'horizontal' Apakah label akan ditampilkan di atas (penumpukan vertikal) atau di samping (penumpukan horizontal) penggeser. Gunakan 'vertical' atau 'horizontal'.
ui.cssClass string 'google-visualization-controls-rangefilter' Class CSS yang akan ditetapkan ke kontrol, untuk gaya kustom.

NumberRangeFilter

Penggeser bernilai ganda untuk memilih rentang nilai numerik.

Negara Bagian

Name Jenis Default Deskripsi
lowValue number tidak ada Tingkat yang lebih rendah untuk rentang yang dipilih, inklusif.
highValue number tidak ada Cakupan rentang yang dipilih yang lebih tinggi, inklusif.
lowThumbAtMinimum boolean tidak ada Apakah jempol bawah penggeser dikunci pada rentang minimum yang diizinkan. Jika ditetapkan, lowValue akan diganti.
highThumbAtMaximum boolean tidak ada Apakah ibu jari penggeser yang lebih tinggi dikunci pada rentang maksimum yang diizinkan. Jika ditetapkan, highValue akan diganti.

Opsi

Name Jenis Default Deskripsi
filterColumnIndex number tidak ada Kolom tabel data di mana filter harus beroperasi. Opsi ini atau filterColumnLabel harus diberikan. Jika keduanya ada, opsi ini akan diprioritaskan. Harus mengarah ke kolom dengan jenis number.
filterColumnLabel string tidak ada Label kolom di mana filter harus beroperasi. Opsi ini atau filterColumnIndex harus diberikan. Jika keduanya ada, filterColumnIndex akan diprioritaskan. Harus mengarah ke kolom dengan jenis number.
minValue number otomatis Nilai minimum yang diizinkan untuk rentang yang lebih rendah. Jika tidak ditentukan, nilai akan disimpulkan dari konten DataTable yang dikelola oleh kontrol.
maxValue number otomatis Nilai maksimum yang diizinkan untuk rentang yang lebih tinggi. Jika tidak ditentukan, nilai akan disimpulkan dari konten DataTable yang dikelola oleh kontrol.
ui Objek 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: ':'}
ui.format Objek tidak ada Cara merepresentasikan angka sebagai string. Menerima semua format angka yang valid.
ui.step number 1, atau dihitung dari ticks jika ditentukan Perubahan seminimal mungkin saat menarik jempol penggeser.
ui.ticks number otomatis Jumlah titik skala (posisi tetap di panel rentang) yang dapat ditempati oleh ibu jari penggeser.
ui.unitIncrement number 1 Jumlah yang akan bertambah untuk penambahan satuan dari jangkauan rentang. Penambahan unit setara dengan menggunakan tombol panah untuk menggerakkan ibu jari penggeser.
ui.blockIncrement number 10 Jumlah yang akan ditambahkan untuk penambahan blok rentang rentang. Penambahan blok sama dengan menggunakan tombol pgUp dan pgDown untuk menggerakkan ibu jari penggeser.
ui.showRangeValues boolean true Apakah label di samping penggeser yang menampilkan cakupan rentang yang dipilih atau tidak.
ui.orientation string 'horizontal' Orientasi penggeser. Berupa 'horizontal' atau 'vertical'.
ui.label string otomatis Label yang akan ditampilkan di samping penggeser. Jika tidak ditentukan, label kolom tempat kontrol beroperasi akan digunakan.
ui.labelSeparator string tidak ada String pemisah yang ditambahkan ke label untuk memisahkan label dari penggeser secara visual.
ui.labelStacking string 'horizontal' Apakah label akan ditampilkan di atas (penumpukan vertikal) atau di samping (penumpukan horizontal) penggeser. Gunakan 'vertical' atau 'horizontal'.
ui.cssClass string 'google-visualization-controls-rangefilter' Class CSS yang akan ditetapkan ke kontrol, untuk gaya kustom.

StringFilter

Kolom input teks sederhana yang memungkinkan Anda memfilter data melalui pencocokan string. Kolom ini diperbarui setelah setiap tombol ditekan: coba ketik j untuk mempersempit tabel di bawah ke Joni 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
filterColumnIndex number tidak ada Kolom tabel data di mana filter harus beroperasi. Opsi ini atau filterColumnLabel harus diberikan. Jika keduanya ada, opsi ini akan diprioritaskan.
filterColumnLabel string tidak ada Label kolom di mana filter harus dioperasikan. Opsi ini atau filterColumnIndex harus diberikan. Jika keduanya ada, filterColumnIndex akan diprioritaskan.
matchType string 'awalan' Apakah kontrol hanya boleh cocok dengan nilai tepat ('exact'), awalan yang dimulai dari awal nilai ('prefix'), atau substring ('any').
caseSensitive boolean false Apakah pencocokan harus peka huruf besar/kecil atau tidak.
useFormattedValue boolean false Apakah kontrol akan cocok dengan nilai berformat sel atau mengulangi nilai sebenarnya.
ui Objek 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 true Apakah kontrol akan cocok setiap kali tombol ditekan atau hanya saat kolom input 'berubah' (hilang fokus atau menekan tombol Enter).
ui.label string otomatis Label yang akan ditampilkan di samping kolom input. Jika tidak ditentukan, label kolom tempat kontrol dioperasikan akan digunakan.
ui.labelSeparator string tidak ada String pemisah yang ditambahkan ke label untuk memisahkan label dari kolom input secara visual.
ui.labelStacking string 'horizontal' Apakah label harus ditampilkan di atas (penumpukan vertikal) atau di samping (penumpukan horizontal) kolom input. Gunakan 'vertical' atau 'horizontal'.
ui.cssClass string 'google-visualization-controls-stringfilter' Class CSS yang akan ditetapkan ke kontrol, untuk gaya kustom.