使用谷歌圖表api並通過ajax在cluetip中顯示內容

Question

我有一個jsp頁面，使用谷歌圖表api以條形圖的形式顯示數據。 這是代碼。 我想在工具提示中顯示此頁面（ cluetip ）。
當我在瀏覽器中直接打開該頁面時，我的Google Chart代碼效果很好。 但是當我嘗試通過ajax在工具提示中顯示它時，工具提示中沒有繪制圖表。 工具提示是空白的。 我懷疑是因為在條形圖jsp頁面內導入了外部javascript。

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

它違反了相同的原產地政策嗎？我是對的嗎？ 有沒有辦法使它工作？

編輯＃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>