使用谷歌图表api并通过ajax在cluetip中显示内容

Question

我有一个jsp页面,使用谷歌图表api以条形图的形式显示数据.这是代码.我想在工具提示中显示此页面(cluetip).
当我在浏览器中直接打开该页面时,我的Google Chart代码效果很好.但是当我尝试通过ajax在工具提示中显示它时,工具提示中没有绘制图表.工具提示是空白的.我怀疑是因为在条形图jsp页面内导入了外部javascript.

<script type="text/javascript" src="https://www.google.com/jsapi"></script

它违反了相同的原产地政策吗？我是对的吗？有没有办法使它工作？

EDIT#1

的谷歌浏览器开发者控制台仅示出了发送到Web页面(它使用谷歌图)的请求,但没有请求被发送到所述外部JavaScript,其设置在页进口(如上所示的外部JavaScript).

编辑#2

我认为没有获取外部JavaScript的请求的原因是

当您通过ajax加载页面时,该页面中的任何脚本标记都不会被执行.所以javascript没有被执行.

在ajax中获取数据后,我们如何手动执行javscript？

编辑#3

实际上我的JSP中有一个包含许多行的表.每一个row contains a LINK; 如果您将鼠标悬停在Google条形图上,图表将显示在工具提示内(每行不同).因此,在悬停每一行时,要获取的图表的URL将不同.I want to pass this URL as a parameter.此URL将在ajax中用于将数据提取到工具提示中.

Answer 1

这是一种伪代码，因为我假设您已经准备好 Chart.jsp 页面。我用 PHP 做了测试，效果很好。我也在使用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>