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

I have a jsp page that uses google charts api to display data in the form of bar charts. Here is the code for that. I want to display this page in a tooltip (cluetip).
My Google Chart code works well when I directly open that page in the browser. But when I try to display it in a tooltip via ajax, there is no chart drawn in the tooltip. The tooltip is blank. I suspect because of the external javascript that is imported inside the bar chart jsp page.

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

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

Is it violating the same origin policy?Am I right about it? Is there any way to make it work?

它是否违反了相同的原产地政策?我说的对吗?有什么办法使它工作吗?

EDIT#1

The Google Chrome developer Console only shows a request sent to the Web Page(which uses the Google Chart) but no request is sent to the external javascript that is imported in that page (The external javascript shown above).

编辑#1谷歌Chrome开发人员控制台只显示发送到Web页面(使用谷歌图表)的请求，但没有发送到该页面中导入的外部javascript(上面显示的外部javascript)的请求。

EDIT#2

I think the reason for the request not being made to fetch the external javascript is that

编辑#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加载一个页面时，页面中的任何脚本标记都不会被执行。所以javascript不会被执行。

How can we manually execute the javscript after getting the data in ajax?

在获得ajax数据之后，我们如何手动执行javscript ?

EDIT#3

Actually I have a table with many rows in my JSP. And each row contains a LINK; on which if you hover a Google bar Chart will be displayed inside a tooltip(different one for each row). So on hovering each row, the URL for the chart to be fetched will be different. I want to pass this URL as a parameter. And this URL will be used in ajax to fetch the data into tooltip.

编辑#3实际上，我的JSP中有一个包含许多行的表。每一行都包含一个链接;如果悬停在上面，工具提示中会显示一个谷歌条形图(每行不同)。因此，在悬停每一行时，要获取的图表的URL将不同。我想把这个URL作为参数传递。这个URL将在ajax中用于将数据提取到工具提示中。

1 个解决方案

#1

This is kind of a pseudo-code since I'm assuming you already have the chart.jsp page ready to go. I did my tests in PHP and it worked fine. I'm also using QTip2.

这是一种伪代码，因为我假设你已经有图表了。jsp页面准备就绪。我用PHP做了测试，结果很好。我也使用QTip2。

This is your chart.jsp page:

这是你的图表。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>

On the other side, where you're calling the chart.jsp inside the tooltip via iframe:

在另一边，你在调用图表。在工具提示中通过iframe的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>

#1