在Google可视化折线图中创建可点击的元素 [英] Create clickable element in Google Visualization line chart
问题描述
是否可以将onclick方法附加到Google Visualization折线图中的元素上？例如，如果用户点击图表中的点，我想将用户发送到具有更多详细信息的页面。我已经完成了所有的文档，并且找不到如何执行此操作的示例。
我看到有些事件的方法（来自 documentation ），但没有明确的例子，这没什么意义。
谢谢！
您可以使用'select'事件来执行此操作，每次用户单击折线图上的点时都会触发该事件。我在下面包含了一个工作示例，其中包括重定向以及一些值。 Google代码游乐场的如何使用事件处理程序的一个很好的示例表格 - 可以在大多数可视化中使用相同类型的功能。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1.1'，{packages：['barchart']}）;
< / script>
< script type =text / javascript>
函数drawVisualization（）{
//创建并填充数据表。
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Year'）;
data.addColumn（'number'，'Sales'）;
data.addColumn（'number'，'费用'）;
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'}}
}）;
//一个抓取某些值然后重定向页面的点击处理程序
google.visualization.events.addListener（图表，'select'，function（）{
//抓取重定向
之前的一些细节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 =visualizationstyle =width：600px; height：400px;>< / div>
< / body>
< / html>
Is it possible to attach an onclick method to the elements within a Google Visualization line chart? For example, if a user clicks on point within the chart I want to send the user to a page with more details. I've gone all through the documentation and can't find an example of how to do this.
I see that there are methods for events (from the documentation) but with no clear example it's not making much sense.
Thanks!
You can do this using a 'select' event, which will be triggered each time a user clicks on a point on the line chart. I've included a working example below, including the redirect with a couple of values. The Google code playground has a nice example of how to use event handlers on a table - the same type of functionality can be used across most of the visualizations.
<!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>
这篇关于在Google可视化折线图中创建可点击的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
