charts - 如何获取有关 Google 图表中所选栏的信息？

Question

我有一个通过 Google Charts 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>