javascript - 在 cluetip 中使用 google charts api 并通过 ajax 显示内容

Question

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

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

这是否违反了同源政策？我说得对吗？有什么办法让它发挥作用吗？

编辑#1

Google Chrome 开发人员控制台 仅显示发送到网页(使用 Google Chart)的请求，但没有向该页面中导入的外部 javascript 发送请求(上面显示的外部 javascript)。

编辑#2

我认为不请求获取外部 javascript 的原因是

when you load a page via ajax,any script tags in that page will not be executed. So the javascript is not getting executed.

ajax获取数据后如何手动执行javscript？

编辑 #3

实际上我的 JSP 中有一个包含很多行的表。每个行包含一个LINK；如果您将鼠标悬停在其上，Google 条形图将显示在工具提示中(每行不同的一个)。因此，在悬停每一行时，要获取的图表的 URL 将不同。 我想将此 URL 作为参数传递。 并且此 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>