Grafikle Etkileşim

Şu ana kadar ele aldığımız konular birçok web sayfası için yeterlidir: Grafiğinizi sayfada çizdiniz. Bununla birlikte, kullanıcı tıklamalarını almak istiyorsanız veya daha önce çizdiğiniz bir grafikteki özellikleri ya da verileri değiştirmek istiyorsanız, grafiğin attığı etkinlikleri dinlemeniz gerekir.

Tüm grafikler bazı etkinlik türleri oluşturur. Bu sorunların en yaygın olanları şunlardır:

  • hazır - Grafik sayfada çizildiğinde ve yöntemlere yanıt vermeye hazır olduğunda gösterilir. Grafikten bilgi istemeniz gerekiyorsa bu etkinliği dinleyin.
  • seç: Kullanıcı, grafikte bir şey seçtiğinde kaydedilir. Genellikle bir çubuk veya pasta dilimi tıklanır.
  • error - Genellikle DataTable biçimi yanlış olduğu için grafik iletilen verileri işleyemez.
  • onmouseover ve onmouseout: Kullanıcı, sırasıyla belirli bir grafik öğesinin üzerine geldiğinde veya faresini uzaklaştırdığında ortaya çıkar.

Etkinlik dinlemek basittir. Grafiğe bir herkese açık kullanıcı adı ile iletilen google.visualization.events.addListener() numarasını, yakalanacak etkinliğin adını ve etkinlik yayınlandığında bir işleyicinin adını çağırmanız yeterlidir. draw() yöntemini henüz aramamış olsanız bile bu yöntemi herhangi bir grafik tutma yeri ile çağırabilirsiniz. Kendini kaldırmadan önce dinleyicinin tam olarak bir kez aranmasını istiyorsanız google.visualization.events.addOneTimeListener()'i çağırabileceğinizi unutmayın.

Bir grafiğin select etkinliğini yakalamak için nasıl kaydolacağınızı gösteren kısmi bir kod snippet'ini burada bulabilirsiniz:

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

}

Aşağıdaki örnekte, yeni bir etkinlik dinleyicisi içeren Hello Listeleri kod örneği gösterilmektedir. Kendiniz deneyin.

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

 

Daha Fazla Bilgi