Google ChartsがWkhtmltopdfで動作しない

Google Chartsを使用して複数のチャートをPDFで生成しようとしています。 PDFについては、WkhtmltopdfエンジンでCakePDFを使用しています。私はPDFに実際にGoogle Chartのコードを読み込むことに問題があるようです。これは私のJavascriptのための私の現在のコードです。Google Chartsが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 ）;このソリューションの問題点は、遅延が低すぎる場合、ページはエラーなしで返されますが、完全に空白になります。しかし、遅延を高く設定しすぎると、ページがパッケージをロードせず、関数を呼び出すときにJavascriptが破損して

になります。さらに、そのポスターはdocument.write（）の問題を述べましたが、ページにコンテンツを追加する前または後にdocument.write（）行を追加しても問題はありません。もし誰かがGoogle ChartsをWkhtmltopdfで動作させる方法を知っていて、助けてくれれば幸いです。

[OK]をクリックすると、読み込みに時間がかかるようになりましたが、ここでは関数をPHPの最後に移動しました。今度は、グラフを描画する必要がある要素の配列と適切な値を設定するだけで、配列の値で関数を呼び出します。今はchart.draw(data, options);に違反しているので、今問題が何であるか分かりません。それは正しい値と要素が渡されているように見えます。

これは本当に丸いようです。何らかの理由で、Wkhtmltopdfは私がjavascriptタグに入れたものを読み取ることができません。私はそれを読むために私ができるすべてを試しましたが、それはただではありません。 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はデータを返さなかったとだけ言います。

出典

2013-10-19 Isaac Senior

google.load呼び出しのコールバックにはパラメータがないため、あなたが投稿したコードがあれば、 'if（typeof doIt === 'boolean'）'がtrueを返す方法はありません（ 'doIt'は常にnullになります）。 'var data = new google.visualization.DataTable（）;'行にエラーが発生した場合は、別の場所で 'drawChart'関数を呼び出す必要があります。これはあなたのコード全体ですか、それとももっとありますか？ – asgallant

申し訳ありません。私は後で必要なパラメータを渡すところで関数自体を呼び出します。私は実際には各行の後にメッセージを出力するためにデバッグ行を持っているので、それがどこで壊れているのかを知っているので、それはその行で壊れていることを知っています。コードを誰かが読みやすくするためにそれらを削除しました。私は関数が正しいパラメータで呼び出されていることは確かです。 –

APIが読み込まれる前に関数が呼び出されていると、エラーが発生することがあります。コールバックの目的は、すべてが最初に読み込まれるようにすることです。 'drawChart'呼び出しのトリガーがGoogleローダー（' drawChart'関数である必要はありません）からのコールバックの内部で発生するようにコードを整理してみてください。 – asgallant

私は今この問題を自分で解決しました。だからここで私にとってうまくいきました。詳細なウォークスルーについては、私のblog postを読んで歓迎します。

サプライjavascript-delay引数、例えばを：

私はそれを動作させるために2つの簡単な変更をしなければなりませんでしたjavascript-delay 1000。これは

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

、Googleの可視化APIをロードするときに1000ミリ秒

ためのJavaScriptコードの実行は、コールバックを追加遅らせるその後、あなたは単にあなたがあなたを描くことができdrawCharts機能を実装することができますあなたが通常と同じようにチャートを作成します。

は、あなたのマークアップは次のものが含まれていることを確認してください：

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

は、単に上記のIDでのdivにチャートを描画し、あなたが行くように良いことがあります。

注：最新のバイナリ（0.12.0現在）を使用しています。 64ビットのUbuntuインストールでテストされています。

出典

2014-03-17 21:11:21 Andy0708

こんにちは@ Andy0708 - 私は運がないこのメソッドを試してみました。 Ubuntu 14.04.4、Windows 10およびOSX 10.11.6でwkhtmltopdfの最新バージョンを使用してテストしました - あなたが見ることのできる実例はありますか？ – BaronGrivet

javascript-delayオプションを使用する代わりに、実際にはwindow-statusを使用してグラフをレンダリングするのを待ちます。 window-statusは、ウィンドウのステータスが希望の値になるまでwkhtmltopdfを待ちます。

が

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

チャートに使用して実行wkhtmltopdfをイベントリスナーを追加します--window-status ready

出典

2016-02-24 10:56:21 sk904861

問題： （Googleのチャートで）htmlページ上のwkhtmltopdf/wkhtmltoimage PDF /画像を使用して、それはGoogleの図表を含んでいなかった。出力（pdf/png）は、Google Chartが表示される位置では単に空白になっていました。オリジナルのhtmlページは大丈夫でした。

ソリューション： 私は置き換えることで、この問題（Googleのチャート+ wkhtmltopdf）を解く：

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

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

によってどういうわけか、GoogleのチャートのHTMLページを扱うことができませんでしたwkhtmltopdfライブラリました最初のjavascriptインクルードが含まれています。

出典

2016-03-18 08:10:21

これを行うと、Google Charts APIの新機能がすべて失われてしまいます。 – Adambean

私のためにも働きました。 – jbmyid

@Adambeanそれでは、それに対する解決策は何ですか？ – jbmyid

Google ChartsがWkhtmltopdfで動作しない

答えて

関連する問題