谷歌图表上的点击事件
Posted
技术标签:
【中文标题】谷歌图表上的点击事件【英文标题】：Click event on google charts 【发布时间】：2015-02-04 09:33:59 【问题描述】：我做错了什么，我不知道是什么！ 我正在尝试创建一个功能，单击以打开一个弹出窗口或一个 div，我可以在其中显示有关单击的特定产品的相同更多信息。
链接到您可以看到示例的网站：http://trego.al/skai/schedule/
这是我的代码：
<html>
<head>
<title>Graphical Display - SKAI</title>
<!-- for mobile devices like android and iphone -->
<meta content="True" name="HandheldFriendly" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="graph/timeline.js"></script>
<link rel="stylesheet" type="text/css" href="graph/timeline.css">
<style type="text/css">
/* Styles for the page */
html, body
font: 10pt arial;
#mytimeline
#new
position: absolute;
left: 25px;
top: 8px;
text-transform: uppercase;
color: white;
font-weight: bold;
font-size: 10px;
text-decoration: none;
/* Custom styles for the Timeline */
div.timeline-frame
border-color: #5D99C3;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
div.timeline-axis
border-color: #5D99C3;
background-color: #5D99C3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #5D99C3, #3A6DA0); /* for firefox 3.6+ */
div.timeline-axis-grid
div.timeline-groups-axis
border-color: #5D99C3;
div.timeline-axis-text
color: white;
div.timeline-groups-text
color: #4D4D4D;
div.timeline-event
color: #000;
max-height:50px;
div.timeline-event-content
font-size:12px;
</style>
<script type="text/javascript">
var timeline = undefined;
var data = undefined;
function getSelectedRow()
var row = undefined;
var sel = timeline.getSelection();
if (sel.length)
if (sel[0].row != undefined)
row = sel[0].row;
return row;
google.load("visualization", "1");
google.setOnLoadCallback(drawVisualization);
function drawVisualization()
var data = new google.visualization.DataTable();
data.addColumn('string', 'group');
data.addColumn('string', 'content');
data.addColumn('datetime', 'start');
data.addColumn('datetime', 'end');
data.addRows([
<?php
$host="******"; //replace with your hostname
$username="******"; //replace with your username
$password="******"; //replace with your password
$db_name="******"; //replace with your database
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "SELECT ac,flt,start,end FROM schedule"; //replace emp_info with your table name
$result = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_array($result))
echo "['". $row['ac']. "','". $row['flt']. "', new Date( ". $row['start']. " ), new Date( ". $row['end']. " )], ";
?>
]);
// specify options
var options =
width: "100%",
height: "99%",
layout: "box",
axisOnTop: true,
eventMargin: 15, // minimal margin between events
eventMarginAxis: 15, // minimal margin between events and the axis
"min": new Date('2013-06-01'), // lower limit of visible range
"max": new Date('2013-06-30'), // upper limit of visible range
editable: false,
showNavigation: true,
OverlappingGridLines: true
;
// Instantiate our timeline object.
timeline = new links.Timeline(document.getElementById('mytimeline'));
// Draw our timeline with the created data and options
timeline.draw(data, options);
// Set a customized visible range
var start = new Date(now.getTime() - 4 * 60 * 60 * 1000);
var end = new Date(now.getTime() + 8 * 60 * 60 * 1000);
timeline.setVisibleChartRange(start, end);
function onselect()
var sel = mytimeline.getSelection();
if (sel.length)
if (sel[0].row != undefined)
var row = sel[0].row;
document.title = "event " + row + " selected";
google.visualization.events.addListener(mytimeline, 'select', onselect);
// Or, when not using the Google API:
// links.events.addListener(mytimeline, 'select', onselect);
</script>
</head>
<body onresize="timeline.redraw();" style="background:#F9F8F6">
<div id="mytimeline" style="background:#fff;min-width:900px;"></div>
<div id="info"></div>
</body>
</html>
【问题讨论】：
【参考方案1】：您可以使用 jquery，例如调用 Google 托管的 jquery： https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
然后尝试使用这个功能：
$( ".timeline-event" ).on( "click", function()
alert($(this).children('div').text());
);
上面的代码会提醒点击商品的商品名称。 用您需要的任何操作替换警报:)
【讨论】：
我仍然面临一些困难，我将相同的代码粘贴到页面上但仍然无法正常工作。我不擅长 javascript，所以如果你能告诉我在哪里粘贴脚本或一个工作示例，那将是完美的 你是否包含了 jquery 库？如果不将此添加到您的页眉以上是关于谷歌图表上的点击事件的主要内容，如果未能解决你的问题，请参考以下文章
echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
为啥不从谷歌地图标记上的点击事件中调用 navigator.getCurrentPosition (function (position) )