2016-10-10 6 views
1

У нас есть проект Silverstripe, который использует модуль silverstripe-wkhtmltopdf для вывода HTML/CSS/Javascript в формате PDF.Использование wkhtmltopdf для вывода графиков Google в PDF

Простой Javascript как document.write работает, но я хочу вывод Google Charts, используя их API визуализации:

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

формат PDF не показывает какой-либо выход визуализации, поэтому я использовал QTBrowser для отладки Javascript - как предложено здесь: Debugging javascript in wkhtmltopdf

ошибка я получаю в QTBrowser является: 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.

У кого-нибудь был опыт/успех с использованием wkhtmltopdf для вывода графиков Google?

+0

Вы пробовали это решение HTTP://stackoverflow.com/a/22465495/http://codingexplained.com/cod ing/php/using-google-visualization-with-wkhtmltopdf? И спасибо за использование моего модуля;) –

+0

@csy_dot_io - спасибо за отличный модуль! Ваша вторая ссылка меня охватила - если вы можете отправить ответ в качестве ответа, я соглашусь с ней: 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>