2013-10-19 4 views
5

Google 차트를 사용하여 PDF에서 여러 차트를 생성하려고합니다. PDF의 경우 CakePDF를 Wkhtmltopdf 엔진과 함께 사용하고 있습니다. 실제로 PDF 차트에 Google 차트 코드를로드하는 데 문제가있는 것으로 보입니다. 이것은 내 자바 스크립트에 대한 현재 코드입니다.Google 차트가 Wkhtmltopdf와 작동하지 않습니다.

<script type="text/javascript" src="https://www.google.com/jsapi"> 
</script> 
<script type="text/javascript"> 
google.load('visualization', '1.0', {'packages':['corechart']}); 
//setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100); 
google.setOnLoadCallback(drawChart); 
function drawChart(doIt,taken, total, element) 
{ 
    if (typeof doIt === 'boolean') 
    { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Type'); 
     data.addColumn('number', 'Courses'); 
     data.addRows([ 
      ['Taken', taken], 
      ['Remaining', total - taken] 
     ]); 
     var options = { 
         'width':40, 
         'height':40}; 
     var chart = new google.visualization.PieChart(document.getElementById(element)); 
     chart.draw(data, options); 
    } 
} 
</script> 

문제는 내가 시각화 패키지의 google.load를 할 때, 그것은 오류가 엔진이 데이터를 반환한다는으로 돌아 Wkhtmltopdf이 발생한다는 것입니다. 내가 생각했던 문제가 Why does google.load cause my page to go blank?에서 발생 했으므로 setTimeout (function() {google.load ('visualization', '1.0', { 'packages': [ 'corechart']})}}, 100); 이 솔루션의 문제점은 지연이 너무 낮 으면 페이지가 오류없이 돌아 오지만 완전히 비어있는 것입니다. 그러나, 내가 너무 높은 지연 시간을 설정하면, 페이지는 패키지를로드 할 수 없습니다 나는이 함수를 호출 할 때 자바 스크립트는

var data = new google.visualization.DataTable(); 

에 중단됩니다. 또한, 해당 포스터 document.write(), 문제가 진술하지만 이전에 document.write() 줄을 추가 할 경우 또는 페이지에 콘텐츠를 추가 한 후 아무 문제가 있습니다. 만약 누군가가 Google Charts를 Wkhtmltopdf와 함께 사용할 수있는 방법을 알고 나를 도울 수 있다면 고맙겠습니다. 나는 PHP의 끝으로 함수를 호출 할 경우


좋아,이 API를로드하는 데 더 많은 시간을 제공하기 위해, 나는 움직였다. 이제는 그래프를 그려야하는 요소 배열과 적절한 값을 설정 한 다음 배열의 값으로 함수를 호출합니다. 지금은 문제가 무엇인지 확실하지 않지만 지금은 chart.draw(data, options);에 도달했습니다. 올바른 값과 요소가 전달 된 것 같습니다.

이것은 정말 원형 같아 보입니다. 어떤 이유로 든 Wkhtmltopdf는 자바 스크립트 태그에 넣은 것을 읽을 수 없습니다. 나는 그것을 읽을 수있는 모든 것을 다 해봤지만, 단지 하하가되지는 않는다. CakePDF 플러그인은 Javascript를 읽을 수 있으므로 내 JS 코드는 기본 PDF 레이아웃에 있습니다. 그런 다음 WkhtmltoPdf에 의해 렌더링 된 실제보기에서 요소 및 값의 배열을 만듭니다. 나는 다음이

for ($i = 0; $i < sizeof($grade_array); $i++) 
{ 
    $element = $grade_array[$i][2]; 
    echo '<script type="text/javascript">drawChart(true, '.$this->Js->value($grade_array[$i][0]).', '.$this->Js->value($grade_array[$i][1]).','.json_encode($element).');</script>'; 
} 

가 올바른 모든 데이터를 전달하는 표시 (여러 가지 가능한 해결 한 후,이 내가 JS 함수를 호출 할 수 있었던 유일한 방법입니다) 않습니다. 함수를 호출 할 때마다 매개 변수를 인쇄하는 디버그 라인이 있고 모든 매개 변수가 올바르게 인쇄됩니다. 또한 chart.draw()와 같은 위치에서 document.write ('test')를 수행하면 오류없이 'test'가 작성됩니다. 어떤 이유로 Chart.draw()를 수행하면 Wkhtmltopdf가 데이터를 반환하지 않는다고합니다.

+0

google.load 호출의 콜백에는 매개 변수가 없기 때문에 게시 된 코드가 주어지면'if (typeof doIt === 'boolean')'이 true를 반환 할 방법이 없습니다 ('doIt'는 항상 null이된다). 'var data = new google.visualization.DataTable();'줄에 오류가 발생하면 'drawChart' 함수를 호출해야합니다. 이 코드가 전체 코드입니까, 아니면 더 많이 있습니까? – asgallant

+0

죄송합니다. 나중에 함수 자체를 호출하여 필요한 매개 변수를 전달합니다. 나는 실제로 각 행 다음에 메시지를 인쇄하는 디버깅 라인이 있기 때문에 그 행에서 깨지기 때문에 어디에 있는지 알 수있다. 코드를 쉽게 읽을 수 있도록 코드를 제거했습니다. 나는 함수가 올바른 매개 변수로 호출되고 있다는 것을 확신합니다. –

+0

API가로드되기 전에 함수가 호출되는 경우 오류가 발생할 수 있습니다. 콜백의 목적은 모든 것이 먼저로드되도록하는 것입니다. 'drawChart' 호출을위한 트리거가 Google loader ('drawChart' 함수 자체 일 필요는 없음)의 콜백 내부에서 발생하도록 코드를 정렬 해보십시오. – asgallant

답변

2

나는 오늘이 문제를 직접 해결 했으므로 여기 나와있는 것이 해결되었습니다. 더 자세한 연습을 보려면이 주제에 대한 저의 blog post을 읽어주십시오.

  1. 공급합니다 javascript-delay 인수, 예를 :

    난 단지 그것이 작동되도록하는 두 가지 간단한 변경했습니다 javascript-delay 1000.이는 1000 밀리 초

  2. 을위한 자바 스크립트 코드의 실행이 그릴 수있는

function init() { 
 
    google.load("visualization", "1.1", { 
 
    packages: ["corechart"], 
 
    callback: 'drawCharts' 
 
    }); 
 
}

이 그럼 당신은 단순히 drawCharts 기능을 구현할 수있는 Google 시각화 API를로드 할 때 콜백을 추가 지연하여 차트는 평상시와 똑같습니다.

확인 마크 업에는 다음이 포함됩니다 :

<body onload="init()"> 
    <div id="my-chart"></div> 
</body> 

간단하게 위의 ID와 사업부에 차트를 그릴, 당신은 갈 수 있어야한다.

참고 : 사용 가능한 최신 이진 파일 (현재로서는 0.12.0)을 사용하고 있습니다. 64 비트 Ubuntu 설치에서 테스트되었습니다.

+0

안녕하세요 @ Andy0708 - 나는 행운 없이이 방법을 시도했습니다. Ubuntu 14.04.4, Windows 10 및 OSX 10.11.6에서 최신 버전의 wkhtmltopdf를 사용하여 테스트되었습니다. - 실용 예제가 있습니까? – BaronGrivet

2

javascript-delay 옵션을 사용하는 대신 window-status을 사용하여 실제로 차트가 렌더링 될 때까지 기다려야합니다. window-status은 창 상태가 원하는 값이 될 때까지 wkhtmltopdf를 대기시킵니다.

google.visualization.events.addListener(tableChart, 'ready', myReadyHandler); 
function myReadyHandler(){ 
    window.status = "ready"; 
} 

의 표를 사용하여 실행 wkhtmltopdf를 이벤트 리스너를 추가 --window-status ready

6

문제 : (구글 차트)을 HTML 페이지에 wkhtmltopdf/wkhtmltoimage PDF 파일/이미지를 사용하여, 그것은 구글 차트를 포함하지 않았다. 출력 (pdf/png)은 Google Chart가 표시되어야하는 위치에서 단순히 공백이었습니다. 원래 html 페이지는 괜찮 았습니다.

솔루션 : 내가 대체하여이 문제를 (구글 차트 + wkhtmltopdf를) 해결 :

<script src="http://www.gstatic.com/charts/loader.js"></script> 

<script src="http://www.google.com/jsapi"></script> 

에 의해 어떻게 든 구글 차트 HTML 페이지를 처리 ​​할 수있는 wkhtmltopdf 라이브러리되는 첫 번째 자바 스크립트 포함을 포함합니다.

+1

그러나 이렇게하면 Google Charts API의 새로운 기능을 놓치고 있습니다. – Adambean

+0

나를 위해 일해도되었습니다. – jbmyid

+0

@Adambean 그런 다음 해결책은 무엇입니까? – jbmyid

관련 문제