如何为时间轴图表中的事件添加onclick功能。
我使用的服务从Almende图表(http://almende.github.io/chap-links-library/js/timeline/examples/example01_basis.html)，现在我想要一个功能，当我点击一个事件，以显示该事件的一些额外的信息。
我在这个例子中发现了这个函数(http://timeglider.com/widget/large.html)，因为我不擅长javascript，我不能在Almende图表脚本中实现这个。
<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="http://trego.al/skai/schedule/graph/timeline.js"></script>
<link rel="stylesheet" type="text/css" href="http://trego.al/skai/schedule/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;
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([
['FORAE','<span onclick="myFunction()">LZ122</span>', new Date( 2013,5,01,14,00,00 ), new Date( 2013,5,01,15,30,00 )],
['FORAE','<span onclick="myFunction()">LZ101</span>', new Date( 2013,5,01,16,10,00 ), new Date( 2013,5,01,17,50,00 )],
['FORAE','<span onclick="myFunction()">LZ102</span>', new Date( 2013,5,01,18,40,00 ), new Date( 2013,5,01,20,20,00 )],
['FORAE','<span onclick="myFunction()">LZ555</span>', new Date( 2013,5,02,04,00,00 ), new Date( 2013,5,02,07,00,00 )]
]);
// specify options
var options = {
width: "100%",
height: "99%",
layout: "box",
axisOnTop: true,
eventMargin: 15, // minimal margin between events
eventMarginAxis: 0, // minimal margin beteen 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);
}
</script>
<script>
function myFunction()
{
document.getElementById("demo");
alert("some information: here should the description appear");
}
</script>
</head>
<body onresize="timeline.redraw();" style="background:#F9F8F6">
<div id="mytimeline" style="background:#fff;min-width:900px;"></div>
</body>
</html>
假设您希望在单击网页上的元素时触发此事件，下面的代码应该可以解决您的问题:
var el = document.getElementById("myButton");
el.onclick = function () {
alert("some information");
};
显然，您将用您想要显示给用户的任何内容替换警报消息。