Google Charts API 中的事件监听器答案

【问题标题】：Event Listener in Google Charts APIGoogle Charts API 中的事件监听器
【发布时间】：2011-11-22 07:30:21
【问题描述】：

我正忙于在我的一个项目中使用Google Charts 在表格中显示数据。一切都很好。除了我需要查看用户单击按钮后选择了哪一行。

这显然可以使用 Javascript 完成，但我已经苦苦挣扎了好几天，但无济于事。下面我粘贴了表格的简单示例的代码，以及我想要使用的 Javascript 函数（这不起作用）。

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script type='text/javascript'>
  google.load('visualization', '1', {packages:['table']});
  google.setOnLoadCallback(drawTable);
  var table = "";

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows(4);
    data.setCell(0, 0, 'Mike');
    data.setCell(0, 1, 10000, '$10,000');
    data.setCell(0, 2, true);
    data.setCell(1, 0, 'Jim');
    data.setCell(1, 1, 8000, '$8,000');
    data.setCell(1, 2, false);
    data.setCell(2, 0, 'Alice');
    data.setCell(2, 1, 12500, '$12,500');
    data.setCell(2, 2, true);
    data.setCell(3, 0, 'Bob');
    data.setCell(3, 1, 7000, '$7,000');
    data.setCell(3, 2, true);

    table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {showRowNumber: true});
  }

    function selectionHandler() {
        selectedData = table.getSelection();
        row = selectedData[0].row;
        item = table.getValue(row,0);

        alert("You selected :" + item);         

    }

</script>
</head>

<body>
<div id='table_div'></div>

<input type="button" value="Select" onClick="selectionHandler()">   

</body>
</html>

提前感谢任何花时间查看此内容的人。老实说，我已经尽力了，希望有人可以帮助我。

【问题讨论】：

标签： javascript html event-handling google-visualization

【解决方案1】：

这是一个工作版本。
选择事件没有侦听器，您混淆了 data 和 table 用于 getValue 调用。

<html>
<head>
<script src='https://www.google.com/jsapi'></script>

<script>
    google.load('visualization', '1', {packages:['table']});
    google.setOnLoadCallback(drawTable);
    var table, data;

    function drawTable() {
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows(4);
        data.setCell(0, 0, 'Mike');
        data.setCell(0, 1, 10000, '$10,000');
        data.setCell(0, 2, true);
        data.setCell(1, 0, 'Jim');
        data.setCell(1, 1, 8000, '$8,000');
        data.setCell(1, 2, false);
        data.setCell(2, 0, 'Alice');
        data.setCell(2, 1, 12500, '$12,500');
        data.setCell(2, 2, true);
        data.setCell(3, 0, 'Bob');
        data.setCell(3, 1, 7000, '$7,000');
        data.setCell(3, 2, true);

        table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
        //add the listener
        google.visualization.events.addListener(table, 'select', selectionHandler);
    }

    function selectionHandler() {
        var selectedData = table.getSelection(), row, item;
        row = selectedData[0].row;
        item = data.getValue(row,0);
        alert("You selected :" + item);         
    }

</script>
</head>

<body>
<div id='table_div'></div>

<input type="button" value="Select" onClick="selectionHandler()">   

</body>
</html>

【讨论】：

【解决方案2】：

我很难知道你的代码有什么问题，这里来自documentation的示例代码解释了如何处理选择事件：

// Create our table.
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

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

// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
  var selection = table.getSelection();
  var message = '';
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      var str = data.getFormattedValue(item.row, item.column);
      message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
    } else if (item.row != null) {
      var str = data.getFormattedValue(item.row, 0);
      message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
    } else if (item.column != null) {
      var str = data.getFormattedValue(0, item.column);
      message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

你可以试试jsfiddle的实时代码

【讨论】：

非常感谢 :-) 这实际上很有帮助。
hhaahhhh 终于从你的链接中得到了我的错误。谢谢朋友