如何獲取有關Google圖表中選定欄的信息？

Question

我有通過谷歌圖表API呈現的圖表。當用戶點擊一個欄時，如何獲取有關所選欄的數據。我明白這一點，我做了「getSelection」調用來輸出選擇信息。當我點擊一個酒吧，我得到這個。 enter image description here

我的代碼是

 <div class="row"> 
 
    <script type="text/javascript"> 
 
     google.charts.load('current', {'packages':['bar']}); 
 
     google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
      
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['Salesman', 'Visit'], 
 
     
 
     //Some PHP Code 
 
     
 
     ]); 
 

 
     var options = { 
 
      chart: { 
 
      title: '', 
 
      subtitle: '', 
 
      } 
 
     }; 
 

 
     var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
     google.visualization.events.addListener(chart, 'select', selectHandler); 
 
     } 
 

 
function selectHandler() { 
 

 
    var selectedItem = chart.getSelection()[0]; 
 
if (selectedItem) { 
 
    var selectedValue = data.getValue(selectedItem.row, 0); 
 
    console.log('The user selected ' + selectedValue); 
 
} 
 

 
}

Answer 1

的selectHandler需要在同一範圍被定義爲chart

在這種情況下

，只是移動selectHandler成drawChart

見下文摹工作片段...

google.charts.load('current', {'packages':['bar']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Salesman', 'Visit'], 
 
    ['A', 2], 
 
    ['B', 3] 
 
    ]); 
 

 
    var options = { 
 
    chart: { 
 
     title: '', 
 
     subtitle: '', 
 
    } 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
 

 
    function selectHandler() { 
 
    var selectedItem = chart.getSelection()[0]; 
 
    if (selectedItem) { 
 
     var selectedValue = data.getValue(selectedItem.row, 0); 
 
     console.log('The user selected ' + selectedValue); 
 
    } 
 
    } 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="columnchart_material"></div>