Google Charts API中的事件侦听器 [英] Event Listener in Google Charts API
问题描述
我正在忙于使用 Google图表在我的一个项目中，在表中显示数据。一切都很好。除了我需要看到用户点击一个按钮之后选择哪一行。
这显然是用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 =;
函数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}）;
}
函数selectionHandler（）{
selectedData = table.getSelection（）;
row = selectedData [0] .row;
item = table.getValue（row，0）;
alert（您选择：+项目）;
}
< / script>
< / head>
< body>
< div id ='table_div'>< / div>
< input type =buttonvalue =SelectonClick =selectionHandler（）>
< / body>
< / 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}）;
//添加监听器
google.visualization.events.addListener（table，'select'，selectionHandler）;
}
函数selectionHandler（）{
var selectedData = table.getSelection（），row，item;
row = selectedData [0] .row;
item = data.getValue（row，0）;
alert（您选择：+项目）;
}
< / script>
< / head>
< body>
< div id ='table_div'>< / div>
< input type =buttonvalue =SelectonClick =selectionHandler（）>
< / body>
< / html>
I'm busy using Google Charts in 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.
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).
<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>
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.
Here is a working version.
There was no listener to the select event, and you mixed up, data and table for the getValue call.
<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>
这篇关于Google Charts API中的事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
