使用谷歌图表API和通过AJAX在cluetip显示内容 [英] Using google charts api and displaying content via ajax in cluetip

问题描述

我有一个使用谷歌图表API以条形图的形式显示数据的jsp页面。 这里是code为。我想在工具提示中显示此页面（ cluetip ）。
我的谷歌图code效果很好，当我直接在浏览器中打开该网页。但是，当我试图在通过AJAX工具提示中显示它，没有图表中的工具提示绘制。工具提示为空。我怀疑，因为那是柱状图的JSP页面中输入的外部JavaScript的。

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.

<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?

修改＃1

在谷歌Chrome浏览器开发者控制台只显示发送到Web页（使用谷歌图）的请求，但没有请求被发送到外部JavaScript 入口即在该页面（如上图所示的外部JavaScript）。

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).

编辑＃2

我认为不是正在获取外部JavaScript的请求的理由是，

EDIT#2

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

在加载通过AJAX页面，在该页面中的任何脚本标记不会   执行。因此，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？

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

修改＃3

其实我有一个表在我的JSP多行。而每行包含一个链接;在其上，如果你将鼠标悬停一个谷歌条形图会提示（另一个用于每一行）内显示。等盘旋的每一行，要获取将是不同的URL图表。 我想通过这个URL作为一个参数。键，此URL将被用于AJAX将数据提取到工具提示。

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.

推荐答案

这是种伪code，因为我假设你已经有了chart.jsp页面蓄势待发。我做了我的测试在PHP和它工作得很好。我还使用 QTip2 。

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.

这是你的chart.jsp页：

This is your chart.jsp page:

<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：

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

<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>

这篇关于使用谷歌图表API和通过AJAX在cluetip显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！