Выполнение API диаграммы Google (Javascript) в файле php

Я создаю почту в php, в плагине wordpress и хотел бы включить изображение, созданное диаграммой google. Я попробовал следующее:

<?php $message.= <<<HTML <script> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, vAxis: { minValue: 0 } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> HTML; $message.=<<<HTML <h1> test message </h1> HTML; $to = "test@test.com"; $subject = "test message"; $headers = "test message"; add_filter( 'wp_mail_content_type', 'set_html_content_type' ); wp_mail( $to, $subject, $message,$headers ); remove_filter( 'wp_mail_content_type', 'set_html_content_type' ); ?>

Моя проблема в том, что Javascript не может быть выполнен в доставке почты. Следовательно, я ищу способ выполнить Javascript внутри скрипта.

Любые предложения о том, как выполнить javascript в php-файле, чтобы получить полученную ссылку google-api?

Я ценю рабочий пример!

PS: Моя версия php:

 > php --version PHP 5.5.9-1ubuntu4.17 (cli) (built: May 19 2016 19:05:57) Copyright (c) 1997-2014 The PHP Group Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies with Xdebug v2.4.0, Copyright (c) 2002-2016, by Derick Rethans

В диаграммах google есть собственный метод ( getImageURI )
он создает строковое представление base64 диаграммы
который может быть включен в атрибут src элемента img
или сохранены в файл как .png

см. Печать графиков PNG для получения дополнительной информации

кроме того, вы должны дождаться, когда начнется « 'ready' событие графика,
перед захватом изображения

отправить изображение диаграммы по электронной почте, порекомендовать иметь страницу, которая рисует диаграмму
затем, когда 'ready' событие срабатывает, отправляет строку изображения через ajax в контроллер, который отправляет сообщение по электронной почте …

см. следующий фрагмент, например, получения изображения …

 google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0}, legend: { position: 'top' } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function () { document.getElementById('image_div').innerHTML = '<img src="' + chart.getImageURI() + '" />'; }); chart.draw(data, options); }, packages: ['corechart'] });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div>Chart</div> <div id="chart_div"></div> <div>Image</div> <div id="image_div"></div>

Вы можете использовать canvas2html.js для экспорта диаграммы в качестве data URI

 <!DOCTYPE html> <html> <head> </head> <body> <script src="canvas2html.js"></script> <div id="chart_div"></div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, vAxis: { minValue: 0 } }; var chart = new google.visualization .AreaChart(document.getElementById('chart_div')); chart.draw(data, options); html2canvas(document.getElementById('chart_div')) .then(function(canvas) { var dataURL = canvas.toDataURL(); // `dataURL` : `data URI` of chart drawn on `<canvas>` element console.log(dataURL); }) } </script> </body> </html>

plnkr http://plnkr.co/edit/WPeiFuSdFIYP9297yHYN?p=preview

Не совсем использование диаграммы google, но это может действительно помочь вам.

Google также имеет свои графические диаграммы (которые устарели, однако они заявили, что у них нет планов отключить его). Вы можете использовать графические диаграммы для генерации графика, который вы хотите, и получить изображение взамен.

Я взял данные и сгенерировал это изображение:

введите описание изображения здесь

Который может быть сгенерирован с использованием этой ссылки .

Я знаю, что это не совсем та же графика, что и API диаграммы (и их графические карты не содержат каких-то замечательных вещей, таких как непрозрачность и прочее), но это может быть быстрое решение, которое вы ищете.

И живой фрагмент:

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, vAxis: { minValue: 0 } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> <div id="chart_div"></div> <img src="https://chart.googleapis.com/chart?cht=lc&chd=t:1000,1170,660,1030|400,460,1120,540&chds=a&chxr=1,0,1200,300&chxt=x,y&chxl=0:|2013|2014|2015|2016&chs=600x200&chm=B,c2d1f0,0,0,0|B,f5c4b8,1,1,0&chtt=Company%20Performance&chts=000000,20,l&chdl=Sales|Expenses&chco=0000FF,FF0000">

Я бы сделал диаграммы с помощью PhantomJS или любого другого безголового браузера с js. См. Эту ссылку для примера:

http://johanndutoit.net/google-charts-js-api-server-side-nodejs/

Поскольку вы используете php, вам нужно обернуть запрос примерно так:

http://jonnnnyw.github.io/php-phantomjs/