Berinteraksi dengan Diagram

Hal yang telah dibahas sejauh ini sudah memadai untuk banyak halaman web: Anda telah menggambar diagram di halaman. Namun, jika ingin menangkap klik pengguna, atau perlu memanipulasi properti atau data dalam diagram yang sudah digambar, Anda perlu memproses peristiwa yang ditampilkan oleh diagram.

Semua diagram menampilkan beberapa jenis peristiwa. Berikut yang paling umum:

  • ready - Dilempar saat diagram digambar di halaman dan siap merespons metode. Proses peristiwa ini jika Anda perlu meminta informasi dari diagram.
  • select - Dilemparkan saat pengguna memilih sesuatu pada diagram: biasanya dengan mengklik bagian batang atau diagram lingkaran.
  • error - Dilempar jika diagram tidak dapat merender data yang diteruskan, biasanya karena format DataTable salah.
  • onmouseover dan onmouseout - Dilempar ketika pengguna mengarahkan mouse ke atas atau nonaktif pada elemen diagram tertentu.

Memproses peristiwa cukup sederhana; cukup panggil google.visualization.events.addListener() dengan meneruskan handle ke diagram, nama peristiwa yang akan ditangkap, dan nama pengendali yang akan dipanggil saat peristiwa ditampilkan. Anda dapat memanggil metode ini dengan handle diagram apa pun, meskipun belum memanggil draw(). Perhatikan bahwa Anda dapat memanggil google.visualization.events.addOneTimeListener() jika ingin pemroses dipanggil tepat satu kali sebelum menghapus dirinya sendiri.

Berikut cuplikan kode parsial yang menunjukkan cara mendaftar untuk menangkap peristiwa select diagram:

load libraries...

function drawChart() {

  prepare data...

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row, selectedItem.column);
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

  draw the chart...

}

Berikut adalah contoh kode Hello Chart dengan pemroses peristiwa pilih baru. Cobalah sendiri.

<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 piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1], 
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 0);
            alert('The user selected ' + topping);
          }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);    
        chart.draw(data, options);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Informasi Selengkapnya