这是一种伪代码,因为我假设您已经准备好 Chart.jsp 页面。我用 PHP 做了测试,效果很好。我也在用QTip2 http://craigsworks.com/projects/qtip2/.
这是您的 Chart.jsp 页面:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
int foo = Integer.parseInt(request.getParameter("foo"));
switch(foo) {
case 1:
print
<script>
google.load('visualization', '1', {packages:['corechart']});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart);
</script>
break;
...
}
<div id="visualization"></div>
另一方面,您通过 iframe 调用工具提示内的 Chart.jsp:
<script>
$(function() {
$('.tip').qtip({
content: function(){
var rel = $(this).attr('rel');
return $('<iframe id="tip" frameBorder="0" src="chart.jsp?foo='+ rel +'" />')
},
hide: 'unfocus, click'
});
});
</script>
<a class="tip" href="javascript:void(0)" rel="1">Hover</a>