Javascript GoogleCharts API中的事件侦听器_Javascript_Html_Event Handling_Google Visualization

Javascript GoogleCharts API中的事件侦听器

javascript html google-visualization

Javascript GoogleCharts API中的事件侦听器,javascript,html,event-handling,google-visualization,Javascript,Html,Event Handling,Google Visualization,我正忙于在我的一个项目中使用以在表中显示数据。一切都很顺利。除了我需要查看用户单击按钮后选择的行这显然可以用Javascript来完成，但我已经挣扎了好几天，但都没有用。下面我粘贴了一个简单的表示例的代码，以及我想要使用的Javascript函数（不起作用） load（'visualization'，'1'，{packages:['table']}）； setOnLoadCallback（drawTable）； var表=”；函数drawTable（）{ var data=new goog

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

这显然可以用Javascript来完成，但我已经挣扎了好几天，但都没有用。下面我粘贴了一个简单的表示例的代码，以及我想要使用的Javascript函数（不起作用）


load（'visualization'，'1'，{packages:['table']}）；
setOnLoadCallback（drawTable）；
var表=”；
函数drawTable（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Salary'）；
data.addColumn（'boolean'，'全职雇员'）；
数据。添加行（4）；
setCell（0,0，'Mike'）；
setCell（0,1,10000，$10000'）；
data.setCell（0，2，true）；
setCell（1,0，'Jim'）；
数据集单元（1，1，8000，$8000'）；
data.setCell（1,2，false）；
setCell（2,0，'Alice'）；
setCell（2,112500，$12500'）；
data.setCell（2，2，true）；
setCell（3,0，'Bob'）；
setCell（3,1700，$7000'）；
data.setCell（3，2，true）；
table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（数据，{showRowNumber:true}）；
}
函数selectionHandler（）{
selectedData=table.getSelection（）；
行=所选数据[0]。行；
item=table.getValue（第0行）；
警报（“您选择：+项”）；
}

提前感谢所有花时间看这个的人。老实说，我已经尽了最大努力，希望有人能帮我一点忙。

我很难知道您的代码有什么问题，下面是解释如何处理选择事件的示例代码：

// 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);
}

//创建我们的表。
var table=新的google.visualization.table（document.getElementById（'table_div'）；
表.绘制（数据、选项）；
//添加我们的选择处理程序。
google.visualization.events.addListener（表'select'，selectHandler）；
//选择处理程序。
//循环选择中的所有项目并连接
//他们所有人的一条信息。
函数selectHandler（）{
var selection=table.getSelection（）；
var消息=“”；
对于（变量i=0；i


您可以从
中尝试使用实时代码。这是一个工作版本。

select事件没有侦听器，因此您将getValue
调用的data
和table
混在一起
<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>


load（'visualization'，'1'，{packages:['table']}）；
setOnLoadCallback（drawTable）；
var表，数据；
函数drawTable（）{
data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Salary'）；
data.addColumn（'boolean'，'全职雇员'）；
数据。添加行（4）；
setCell（0,0，'Mike'）；
setCell（0,1,10000，$10000'）；
data.setCell（0，2，true）；
setCell（1,0，'Jim'）；
数据集单元（1，1，8000，$8000'）；
data.setCell（1,2，false）；
setCell（2,0，'Alice'）；
setCell（2,112500，$12500'）；
data.setCell（2，2，true）；
setCell（3,0，'Bob'）；
setCell（3,1700，$7000'）；
data.setCell（3，2，true）；
table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（数据，{showRowNumber:true}）；
//添加侦听器
google.visualization.events.addListener（表'select'，selectionHandler）；
}
函数selectionHandler（）{
var selectedData=table.getSelection（），行，项；
行=所选数据[0]。行；
item=data.getValue（行，0）；
警报（“您选择：+项”）；
}
非常感谢：-）这实际上非常有用。hhaahh终于从您的链接中得到了我的错误。谢谢你，伙计
<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>