Interakcja z wykresem

Ilość informacji, jaką omówiliśmy do tej pory, jest wystarczająca w przypadku wielu stron internetowych: wykres został przez Ciebie narysowany na tej stronie. Jeśli jednak chcesz wykrywać kliknięcia użytkowników lub chcesz zmieniać właściwości lub dane na narysowanym już wykresie, musisz nasłuchiwać zdarzeń rejestrowanych przez wykres.

Wszystkie wykresy zwracają pewne zdarzenia. Poniżej podajemy najczęstsze z nich:

  • gotowy – przycisk, który jest wyświetlany, gdy wykres na stronie jest gotowy do reagowania na metody. Wykrywaj to zdarzenie, jeśli potrzebujesz informacji z wykresu.
  • select – gdy użytkownik kliknie element na wykresie, zwykle jest to kliknięcie paska lub wycinka koła.
  • błąd – pojawia się, gdy wykres nie może wyrenderować przekazywanych danych, zwykle z powodu nieprawidłowego formatu DataTable.
  • onmouseover i onmouseout – opcja rzucenia, gdy użytkownik najedzie odpowiednio na konkretny element wykresu lub go z niego wyjdzie.

Monitorowanie zdarzeń jest proste. Wystarczy, że wywołasz na wykresie identyfikator google.visualization.events.addListener(), nazwę zdarzenia, które chcesz zarejestrować, i nazwę modułu obsługi, która ma być wywoływana po wywołaniu zdarzenia. Możesz wywołać tę metodę za pomocą dowolnego uchwytu wykresu, nawet jeśli jeszcze nie wywołano funkcji draw(). Pamiętaj, że możesz wywołać funkcję google.visualization.events.addOneTimeListener(), jeśli chcesz, aby odbiornik był wywoływany dokładnie raz, zanim sam się usunie.

Oto częściowy fragment kodu pokazujący, jak zarejestrować zdarzenie select na wykresie:

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...

}

Poniżej znajduje się przykład kodu Hello Charts przedstawiający nowy odbiornik zdarzenia. Wypróbuj tę funkcję.

<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>

 

Więcej informacji