2013-06-15 4 views
6

Google 차트 api를 사용하여 데이터를 막대 차트의 형태로 표시하는 jsp 페이지가 있습니다. Here은 그 코드입니다. 이 페이지를 툴팁 (cluetip)으로 표시하고 싶습니다.
브라우저에서 해당 페이지를 직접 열면 내 Google 차트 코드가 잘 작동합니다. 하지만 아약스를 통해 툴팁에 표시하려고하면 툴팁에 차트가 그려지지 않습니다. 툴팁이 비어 있습니다. 바 차트 jsp 페이지 내부로 가져온 외부 자바 스크립트 때문에 용의자입니다.Google 차트 api를 사용하고 cluetip에서 ajax를 통해 콘텐츠를 표시

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

동일한 원산지 정책을 위반하고 있습니까? 맞습니까? 그것을 작동시키는 어떤 방법이 있습니까?



편집 # 1

Google 크롬 개발자 콘솔은 (구글 차트를 사용하는) 웹 페이지에 전송 요청을 보여주고 있지만 요청이 외부 자바 스크립트로 전송되지 않습니다 그 해당 페이지 (위의 외부 자바 스크립트)에서 가져옵니다.

편집 # 2

난 안 외부 자바 스크립트를 가져 만들어지고 요청에 대한 이유는

당신이 아약스를 통해 페이지를로드 할 때 생각, 해당 페이지의 모든 스크립트 태그 이 실행되지 않습니다. 자바 스크립트가 실행되지 않습니다.

아약스에서 데이터를 가져온 후 javscript를 수동으로 실행할 수 있습니까? 3



편집 # 사실 나는 내 JSP에서 많은 행이있는 테이블을 가지고있다. 그리고 각 row contains a LINK; 여기에 Google 막대 차트를 가져 가면 도구 설명 (각 행마다 다른 차트)에 차트가 표시됩니다. 따라서 각 행을 가리키면 가져올 차트의 URL이 달라집니다. I want to pass this URL as a parameter. 그리고이 URL은 ajax에서 도구 설명으로 데이터를 가져 오는 데 사용됩니다.

답변

3

이것은 이미 chart.jsp 페이지가 준비되어 있다고 가정하기 때문에 일종의 의사 코드입니다. PHP로 테스트를했는데 정상적으로 작동했습니다. 나는 또한 QTip2을 사용하고 있습니다. 다른 측면에서

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

은 chart.jsp 페이지입니다 현재 코드? Chrome 개발자 콘솔에서 외부 자바 스크립트에 대한 요청이 없습니다. – Ashwin

+0

'현재 코드'란 무엇입니까? – Fabi

+0

툴팁 안에 차트가있는 페이지를 호출하기를 원한다고 생각합니다. 음, cluetip에는 옵션이 있습니다. 모든 Google 문서/코드가 차트를 그리는 페이지 내에 있는지 확인하십시오. 다른 차트를 그리기 위해 매개 변수를 페이지에 보내야하는 경우, 우리가 더 잘 도와 줄 수 있도록 피들을 만들 수 있다면 더 좋을 것입니다. – Fabi