Kontrol dan Dasbor

Di halaman ini, Anda akan melihat cara menggabungkan beberapa diagram ke dalam dasbor dan memberikan kontrol kepada pengguna untuk memanipulasi data yang ditampilkan.

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.

  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 dan diagram yang merupakan bagian darinya. Biasanya Anda akan menggunakan <div> untuk masing-masing kolom.
  2. Muat library Anda. Dasbor hanya memerlukan dua library untuk disertakan atau dimuat di halaman: Google AJAX API dan paket controls Visualisasi Google.
  3. 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.
  4. Buat instance dasbor. Buat instance dasbor dengan memanggil konstruktornya dan meneruskan referensi ke elemen <div> yang akan menampungnya.
  5. Buat instance kontrol dan diagram sebanyak yang Anda butuhkan. Buat instance google.visualization.ChartWrapper dan google.visualization.ControlWrapper untuk mendeskripsikan setiap diagram dan kontrol yang dikelola dasbor.
  6. 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.
  7. Gambar dasbor Anda. Panggil draw() di dasbor Anda dan teruskan data Anda untuk menggambar seluruh dasbor di halaman.
  8. 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 (atau filterColumnLabel) untuk menentukan kolom google.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 instance ChartWrapper 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.

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, 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 bind() secara bersamaan.

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

Menggambar dasbor.

getSelection() Array objek

Menampilkan array entitas visual yang dipilih dari diagram di dasbor. Metode getSelection(), saat dipanggil di dasbor, akan menampilkan gabungan semua pilihan yang dibuat pada semua diagram di dalamnya, yang memungkinkan penggunaan satu referensi saat menangani pilihan diagram.

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

Deskripsi yang diperluas

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 draw, lalu menerapkan perubahan hanya setelah peristiwa diaktifkan.

Peristiwa ready juga akan diaktifkan:

  • setelah selesai memuat 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)
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 draw() untuk memaksa penggambaran ulang kontrol terprogram setelah mengubah salah satu setelan lainnya, seperti opsi atau status.

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

  • key - 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() 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, dan refreshInterval secara eksplisit. Dasbor yang menyimpan diagram akan menangani pemberian data yang diperlukan.
  • Tetapkan atribut view-nya untuk mendeklarasikan kolom mana, dari semua yang ada di dataTable yang diberikan ke dasbor, yang relevan untuk diagram, seperti yang ditampilkan di Membuat Instance Kontrol dan Diagram.

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:
  • '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 dapat dimasukkan dalam alat pilih akan digabungkan ke baris baru,
  • 'belowStacked': nilai yang dipilih akan ditampilkan dalam kolom di bawah widget.
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.chartView dengan sesuai.

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.