Fancybox 내 Google 시각화 API 표시 (JS 팝업)

기본적으로 Google 시각화 차트를 Fancybox (JS 팝업)에 포함하려고합니다. 도표는 페이지에 올바르게 표시되지만 fancybox에는 표시되지 않습니다. 어떤 아이디어? 여기 Fancybox 내 Google 시각화 API 표시 (JS 팝업)

는

$(".view_research").fancybox({ 

'onStart' : drawChart 

});

이 **이 편집 중 하나가 작동하지 않습니다 --- 내가

$(".class").fancybox(function() { 

     drawChart(); 

});

---

편집을 사용하고 코드이지만, 적어도 인수 중 하나가 허용 된 사용 팬시 박스

링크를 클릭하면 fancybox 로딩 이미지가 표시되지만 실제 팝업은 절대로드되지 않습니다.

팝업이로드하려고하는 페이지에서 Google 차트를 제거하면 팝업이 장애없이로드됩니다. 사전에

감사합니다, 필

출처

2011-10-21 psarid

내가 인수로 함수를 취하는 fancybox 기능을 찾을 수 없습니다 :

어쨌든, 여기 fancybox 및 gviz (google code playground에서 가져온 파이 차트 코드)를 사용하는 작업 예입니다. http://fancybox.net/ 다시 확인하십시오. –

맞습니다. drawChart() 메서드 및 관련 div가 실제로 포함 된 다른 URl을로드하는 경우 해당 문서의 document onload 이벤트를 호출하지 않고 drawChart() 함수를 호출 할 수 있다는 내용의 업데이트에 대한 업데이트 된 답변 ( – psarid

)을 참조하십시오. fancybox 기능을 통해. –

는해야

가 fancybox 호출의 onComplete 옵션을 사용
명시 적으로 차트를 그려 질하는 사업부의 폭과 높이 스타일 속성을 지정

사업부가 볼 수 있도록하는 것은 충분히 gviz 공통의은/다른 당신이 렌더링하려고 할 때 어떤 일이 일어나는지 확실하지 꽤 이상한 찾고 차트 (끝낼 수 있고, 그 안에 차트를 넣어하기 전에 그려 보이지 않는 div의 차트 ..) . onComplete가이를 처리합니다. 다른 경우에는 gviz 이미지 라이브러리를 사용하는 것이 좋습니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script> 
     <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
     <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['piechart']}); 
     </script> 
     <script type="text/javascript"> 
     </script> 
     <script> 

     function drawVisualization() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Task'); 
     data.addColumn('number', 'Hours per Day'); 
     data.addRows(5); 
     data.setValue(0, 0, 'Work'); 
     data.setValue(0, 1, 11); 
     data.setValue(1, 0, 'Eat'); 
     data.setValue(1, 1, 2); 
     data.setValue(2, 0, 'Commute'); 
     data.setValue(2, 1, 2); 
     data.setValue(3, 0, 'Watch TV'); 
     data.setValue(3, 1, 2); 
     data.setValue(4, 0, 'Sleep'); 
     data.setValue(4, 1, 7); 
     // Create and draw the visualization. 
     new google.visualization.PieChart(document.getElementById('data')).draw(data); 
     } 

     $(document).ready(function() { 
     $("a#inline").fancybox({ 
      'hideOnContentClick': true, 
      onComplete: drawVisualization 
     }); 
     }); 

     </script> 
    </head> 
    <body> 
     <a id="inline" href="#data">Click here to see chart</a> 
     <div style="display:none"><div style='height:200px;width:200px' id="data"></div></div> 
    </body> 
    </html>

출처

2011-10-23 17:46:30 oli

잘 했어. 매우 감사. – psarid

drawChart 기능은 특히 단지 좋은하지 않습니다 콜백 내부의 함수를 호출, fancybox에 의해 생성 된 팝업에 차트를 작성하여야한다. 이 당신을 작동하도록하기 위해

출처

2011-10-21 15:24:27 airportyh

당신이 무슨 말을하는지 설명하기 위해 몇 가지 코드를 제공 할 수 있습니까? thx – psarid

Fancybox 내 Google 시각화 API 표시 (JS 팝업)

답변

관련 문제