javascript Google Charts API 中的事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8223378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event Listener in Google Charts API
提问by Mic
I'm busy using Google Chartsin one of my projects to display data in a table. Everything is working great. Except that I need to see what line a user selected once they click a button.
我正忙于在我的一个项目中使用Google Charts在表格中显示数据。一切都很好。除了我需要查看用户单击按钮后选择了哪一行。
This would obviously be done with Javascript, but I've been struggling for days now to no avail. Below I've pasted code for a simple example of the table, and the Javascript function that I want to use (that doesn't work).
这显然可以用 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, ',000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Jim');
data.setCell(1, 1, 8000, ',000');
data.setCell(1, 2, false);
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 12500, ',500');
data.setCell(2, 2, true);
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 7000, ',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>
Thanks in advance for anyone taking the time to look at this. I've honestly tried my best with this, hope someone out there can help me out a bit.
预先感谢任何人花时间看这个。老实说，我已经尽力了，希望有人能帮助我一下。
回答by Mic
Here is a working version.
There was no listener to the select event, and you mixed up, dataand tablefor the getValuecall.
这是一个工作版本。
没有选择事件的侦听器，并且您混淆了，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, ',000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Jim');
data.setCell(1, 1, 8000, ',000');
data.setCell(1, 2, false);
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 12500, ',500');
data.setCell(2, 2, true);
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 7000, ',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>
回答by Idham Perdameian
Hard for me to know what wrong with your code, here example code from the documentationexplain how to handle select event:
我很难知道你的代码有什么问题，这里的文档示例代码解释了如何处理选择事件：
// 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);
}
You can give it try live code from jsfiddle
你可以试试来自jsfiddle 的实时代码
