getSelection() 从 Google Chart API 中的行获取数据答案

【问题标题】：getSelection() to get data from row in Google Chart APIgetSelection() 从 Google Chart API 中的行获取数据
【发布时间】：2026-02-09 13:10:01
【问题描述】：

当用户单击特定条形图时，我正在尝试使用 Google 的图表 API 触发新条形图的创建。我想我理解这些概念，并希望至少让 getSelection() 函数工作并显示用户单击的栏。但是每次，当您单击该栏时，它只会随着显示而冻结，并且没有 Java 警报。有什么想法吗？

代码如下：

<script type="text/javascript">
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var visualization = new google.visualization.BarChart(document.getElementById('acctmeta'));
                var json_data = new google.visualization.DataTable({{acctmeta_json}});          

                visualization.draw(json_data, {width: 850, height: 600, title: 'Collection Level Populated Metadata Fields',
                                  chartArea: {width:"50%"},
                                  vAxis: {title: 'Collection Title/ID', titleTextStyle: {color: 'green'}},
                                  hAxis: {logScale:false, title:'Fields Populated', titleTextStyle: {color: 'green'}}
                                 });

                // Add our selection handler.
                google.visualization.events.addListener(visualization, 'select', selectHandler);


                // The selection handler.
                // Loop through all items in the selection and concatenate
                // a single message from all of them.
                function selectHandler() {        
                  alert(data.getValue(chart.getSelection()[0].row, 0));
                }

            } //end of draw chart function          
            </script>

【问题讨论】：

标签： google-visualization bar-chart getselection

【解决方案1】：

只是想知道，应该行

alert(data.getValue(chart.getSelection()[0].row, 0));

成为

alert(data.getValue(visualization.getSelection()[0].row, 0));

这是我的一个工作示例。我不得不将数据和图表设置为全局变量：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);    
  var data; 
  var chart;
  function drawChart() {
   data = new google.visualization.DataTable();  
   data.addColumn('string', 'Where');
   data.addColumn('number', 'What');
   data.addRows([['ABC',87],['ERT',70],['KLJ',38],['UPP',-67],['SSD',27],['UKG',42],['NUS',60],['WEB',96]]);
   var options = {'title':'my chart','width':'600','height':'400','is3D':'true'};
   chart = new google.visualization.ColumnChart(document.getElementById('test3_chart'));
   chart.draw(data, options);
   google.visualization.events.addListener(chart, 'select', selectHandler2);
  }

  function selectHandler2() {
      var selection = chart.getSelection();
      alert('That\'s column no. '+selection[0].row);
  }
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id=test3_chart>Please wait...</div>
</body>
</html>

【讨论】：