Tương tác với biểu đồ

Những gì chúng tôi đã đề cập trong phần này đến nay đã đủ về nhiều trang web: bạn đã vẽ biểu đồ trên trang. Tuy nhiên, nếu muốn nắm bắt các lượt nhấp của người dùng hoặc cần thao túng các thuộc tính hay dữ liệu trong biểu đồ mà bạn đã vẽ, bạn cần theo dõi các sự kiện do biểu đồ gửi.

Tất cả biểu đồ đều tạo ra một số loại sự kiện. Sau đây là những lý do phổ biến nhất:

  • Sẵn sàng – Gửi khi biểu đồ được vẽ trên trang và sẵn sàng phản hồi các phương thức. Hãy theo dõi sự kiện này nếu bạn cần yêu cầu thông tin từ biểu đồ.
  • chọn – Được gửi khi người dùng chọn nội dung nào đó trên biểu đồ: thường bằng cách nhấp vào thanh hoặc lát bánh.
  • lỗi – Được gửi khi biểu đồ không thể hiển thị dữ liệu được truyền vào, thường là do định dạng DataTable không chính xác.
  • on Dự án chuột và onchuột – Được gửi khi người dùng di chuột qua hoặc tắt một phần tử biểu đồ cụ thể tương ứng.

Việc theo dõi các sự kiện rất đơn giản; chỉ cần gọi google.visualization.events.addListener() trong tên người dùng được đưa vào biểu đồ, tên sự kiện cần phát và tên của trình xử lý cần gọi khi sự kiện được gửi. Bạn có thể gọi phương thức này bằng bất kỳ ô điều khiển biểu đồ nào, ngay cả khi bạn chưa gọi draw(). Lưu ý rằng bạn có thể gọi google.visualization.events.addOneTimeListener() nếu muốn người nghe được gọi chính xác một lần trước khi xoá chính nó.

Đoạn mã sau đây cho thấy cách đăng ký nắm bắt sự kiện select của biểu đồ:

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

}

Sau đây là ví dụ về mã Xin chào trong biểu đồ với một trình nghe sự kiện chọn lọc mới. Hãy tự mình dùng thử.

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

 

Thêm thông tin