2016-10-10 29 views
1

silverstripe-wkhtmltopdfモジュールを使用してHTML/CSS/JavascriptをPDFとして出力するSilverstripeプロジェクトがあります。 document.writeを作品のようなwkhtmltopdfを使用してGoogle ChartsをPDFに出力する

シンプルなJavascriptのが、私は彼らの可視化APIを使用して出力Googleのチャートにしたい:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script> 
    google.load('visualization', '1', {packages: ['corechart', 'bar']}); 
</script> 

PDFが可視化出力のいずれかを示していなかったので、私はJavascriptをデバッグするQTBrowserを使用 - ここで示唆したように:私はQTBrowserに取得していDebugging javascript in wkhtmltopdf

エラーがある:Error: one or more fonts could not be loaded.https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d05f5fbf/webfontloader,dygraph,format+en,default+en,ui+en,bar+en,corechart+en.I.js:737

からHTMLは私の終わりに正しく見えるが、私は知りませんQTBrowserの互換性、またはwkhtmltopdfとの関連性

Google Chartsを出力するためにwkhtmltopdfを使用したことがある人はいますか?

+0

を達成する方法を示します良いポストは、このソリューションのhttpを試してみましたです:/ /stackoverflow.com/a/22465495/ http://codingexplained.com/cod ing/php/using-google-visualization-with-wkhtmltopdf?私のモジュールを使用してくれてありがとう;) –

+0

@csy_dot_io - 優れたモジュールをありがとう!あなたの2番目のリンクが私を連れてきました。あなたが答えとして投稿できるなら、私はそれを受け入れます:http://codingexplained.com/coding/php/using-google-visualization-with-wkhtmltopdf – BaronGrivet

+0

あなたは幸せです。私は答えとしてそれを追加しました。後で私はコード例でそれを拡張します。 –

答えて

2

は、ここでは、このトピックを説明し、それを

http://codingexplained.com/coding/php/using-google-visualization-with-wkhtmltopdf

<script type="text/javascript"> 
     function init() { 
      google.load("visualization", "1.1", { packages:["corechart"], callback: 'drawCharts' }); 
     } 

     function drawCharts() { 
      drawAccountImpressions('chart-account-impressions'); 
     } 

     function drawAccountImpressions(containerId) { 
      var data = google.visualization.arrayToDataTable([ 
       ['Day', 'This month', 'Last month'], 
       ['01', 1000, 400], 
       ['05', 800, 700], 
       ['09', 1000, 700], 
       ['13', 1000, 400], 
       ['17', 660, 550], 
       ['21', 660, 500], 
       ['23', 750, 700], 
       ['27', 800, 900] 
      ]); 

      var options = { 
       width: 700, 
       height: 400, 
       hAxis: { title: 'Day', titleTextStyle: { color: '#333' } }, 
       vAxis: { minValue: 0 }, 
       curveType: 'function', 
       chartArea: { 
        top: 30, 
        left: 50, 
        height: '70%', 
        width: '100%' 
       }, 
       legend: 'bottom' 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById(containerId)); 
      chart.draw(data, options); 
     } 
    </script> 
</head> 

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

関連する問題