Google 可视化 - Select 处理程序不工作

Question

我希望这是一个很容易解决的问题。从 Google 可视化站点复制了所有必要的代码后，一切正常，只有一个例外。我有一个数据 table ，如果我 select 一行， select 处理程序被调用 - 但我无法让 table.getSelection() 工作

我看到有人建议我可能需要包含 getChart()，但这并不能解决问题（至少在我尝试过的任何方法中都没有解决）。

在下面的摘录中，当 select 一行时我收到第一条警告消息，但第二条没有，因为代码在运行停止在 table.getSelection() 行.

任何人都可以提出可能是什么问题吗？

非常感谢！

<html>

</body>

<head>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable_1);

function drawTable_1() {

js_booking = <?php echo json_encode($arr_booking); ?>;
js_name = <?php echo json_encode($arr_name); ?>;

var data = new google.visualization.DataTable();
data.addColumn('string', 'Booking');

data.addColumn('string', 'Name');

for (i = 0; i < 5; i++) {

data.addRows([
[js_booking[i], js_name[i]]
]);

}

var table = new google.visualization.Table(document.getElementById('table_div_1'));

table.draw(data, {showRowNumber: false, sort: 'disable', width: '95%', allowHtml:true});

google.visualization.events.addListener(table, 'select', selectHandler);
}

function selectHandler(e) {

alert('A table row was selected');

var selection = table.getSelection();

alert('Selection identified');

}

</script>

</head>
<body>
<div id="table_div_1">Loading...</div>
</body>

<br>

</html>

Answer 1

没看出代码有什么问题，这里似乎工作正常。

只是小问题...
通常，图表事件应在图表创建之后但在绘制图表之前分配。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['table']
}).then(function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Booking');
  data.addColumn('string', 'Name');
  
  for (var i = 0; i < 5; i++) {
    data.addRow(['Booking ' + (i + 1), 'Name ' + (i + 1)]);
  }


  var table = new google.visualization.Table(document.getElementById('table_div_1'));

  google.visualization.events.addListener(table, 'select', selectHandler);

  table.draw(data, {showRowNumber: false, sort: 'disable', width: '95%', allowHtml:true});

  function selectHandler(e) {
    console.log('A table row was selected');
    var selection = table.getSelection();
    console.log('Selection identified', JSON.stringify(selection));
  }
});

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

Google 可视化 - Select 处理程序不工作

Google Visualization - Select Handler not working

google-visualization