如何使用Google可視化實現自定義事件？

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