如何使用 Google Visualization 实现自定义事件？

Question

我在下面使用 Google 的图表可视化库编写了以下代码。 目前，我有一个selectHandler函数，它返回列行的警报。

而不是列号的警报，我正在尝试实现一些 Javascript 来发送如下所示的项目“键”的警报。 我怎么得到这个？

<% @frequency.each do |key,value| %>
    ['<%= key %>', <%= value %>],
   <% end %>    

Javascript

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() {

      // OPTIONS
        var options = {
        title: 'Most common phrases in pro-Microsoft Reviews (<%= @reviews.count %> reviews analyzed)',
        vAxis: {title: 'Phrases',  titleTextStyle: {color: 'red'}},
        tooltip: {isHtml: true},
        animation:{
           duration: 2000,
           easing: 'out',
        }
      };

      // DATA
      var data = google.visualization.arrayToDataTable([
        ['Phrase', 'Frequency'],
            <% @frequency.each do |key,value| %>
                ['<%= key %>', <%= value %>],
               <% end %>
      ]);

      // CHART DRAWING
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
      google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);

      //setup listener
      google.visualization.events.addListener(chart, 'select', selectHandler);

      // The select handler. Call the chart's getSelection() method
       function selectHandler() {
          var selection = chart.getSelection();
          alert('That\'s column no. '+selection[0].row);
      }



  }


</script>

Answer 1

下面是一个简单的示例，它显示了如何使用data.getValue()使用自定义处理程序获取第 0 列（所选项目的“键”）中该行的值：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Department');
  data.addColumn('number', 'Revenues Change');
  data.addRows([
    ['Computer', {v: 12, f: '12.0%'}],
    ['Sports', {v: -7.3, f: '-7.3%'}],
    ['Toys', {v: 0, f: '0%'}],
    ['Electronics', {v: -2.1, f: '-2.1%'}],
    ['Food', {v: 22, f: '22.0%'}]
  ]);

  // Create and draw the visualization.
  var table = new google.visualization.Table(document.getElementById('visualization'));

  var formatter = new google.visualization.TableArrowFormat();
  formatter.format(data, 1); // Apply formatter to second column

  table.draw(data, {allowHtml: true, showRowNumber: true});

  //setup listener
  google.visualization.events.addListener(table, 'select', selectHandler);

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selection = table.getSelection();
    alert('That\'s row '+ data.getValue(selection[0].row, 0));
  }

}

只需更改此行，您就应该能够对自己的代码执行相同的操作：

alert('That\'s column no. '+selection[0].row);

对此：

alert('That\'s row '+ data.getValue(selection[0].row, 0));