如何获取有关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>