Визуализация Google - Выберите Обработчик не работает

#google-visualization

Вопрос:

Я надеюсь, что эту проблему действительно легко решить. Скопировав весь необходимый код с сайта визуализации Google, все работает за одним исключением. У меня есть таблица данных, в которой, если я выбираю строку, вызывается обработчик выбора, но я не могу заставить table.getSelection() работать

Я видел предположение, что мне, возможно, потребуется включить getChart (), но это не исправляет ситуацию (по крайней мере, ни одним из способов, которые я пробовал).

В приведенной ниже выдержке я получаю первое предупреждающее сообщение при выборе строки, но не второе, так как код перестает выполняться в строке 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>

Ответ №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>

1. есть ли какой-то другой код в обработчике, вызывающий проблему?

2. Спасибо УайтхЭту — используя пересмотренный код, который вы предложили, теперь это, кажется, работает идеально!