Google visualization 在谷歌可视化折线图中创建可点击元素
是否可以将onclick方法附加到Google可视化折线图中的元素？例如，如果用户单击图表中的某个点，我希望将用户发送到包含更多详细信息的页面。我已经阅读了所有的文档，但找不到一个例子来说明如何做到这一点 我看到有一些事件的方法（从中），但是没有明确的例子，这没有多大意义Google visualization 在谷歌可视化折线图中创建可点击元素,google-visualization,Google Visualization,是否可以将onclick方法附加到Google可视化折线图中的元素？例如，如果用户单击图表中的某个点，我希望将用户发送到包含更多详细信息的页面。我已经阅读了所有的文档，但找不到一个例子来说明如何做到这一点 我看到有一些事件的方法（从中），但是没有明确的例子，这没有多大意义 谢谢 您可以使用“选择”事件来执行此操作，用户每次单击折线图上的某个点时都会触发该事件。我在下面提供了一个工作示例，包括带有几个值的重定向。GoogleCode游乐场有一个相同的功能，可以在大多数可视化中使用相同类型的功能 &
谢谢 您可以使用“选择”事件来执行此操作，用户每次单击折线图上的某个点时都会触发该事件。我在下面提供了一个工作示例，包括带有几个值的重定向。GoogleCode游乐场有一个相同的功能，可以在大多数可视化中使用相同类型的功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
// a click handler which grabs some values then redirects the page
google.visualization.events.addListener(chart, 'select', function() {
// grab a few details before redirecting
var selection = chart.getSelection();
var row = selection[0].row;
var col = selection[0].column;
var year = data.getValue(row, 0);
location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
load（'visualization'，'1.1'，{packages:['barchart']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'number'，'Sales'）；
data.addColumn（“数字”、“费用”）；
数据。添加行（4）；
数据集值（0,0，'2004'）；
数据设置值（0，1，1000）；
数据设置值（0,2400）；
数据。设定值（1,0，'2005'）；
数据设置值（1,1170）；
数据。设定值（1，2460）；
数据。设定值（2,0，'2006'）；
数据。设定值（2，1660）；
数据设置值（2,21120）；
数据集值（3,0，'2007'）；
数据。设定值（3，1，1030）；
数据设置值（3,2540）；
chart=新的google.visualization.LineChart（document.getElementById（'visualization'）；
图表.绘图（数据，{宽：400，高：240，标题：'公司业绩'，
变量：{title:'Year'，titleTextStyle:{color:'red'}
});
//一个点击处理程序，它获取一些值，然后重定向页面
google.visualization.events.addListener（图表'select'，函数（）{
//在重定向之前获取一些详细信息
var selection=chart.getSelection（）；
var row=选择[0]。行；
var col=selection[0]。列；
var year=data.getValue（行，0）；
location.href=http://www.google.com?row=“+行+”&列=“+列+”&年=“+年；
});
}
setOnLoadCallback（drawVisualization）；