在php文件中执行Google Chart API（Javascript）

我在php中创建邮件，在wordpress插件中，并且想要包含由google chart api创建的图像。我试过以下内容：在php文件中执行Google Chart API（Javascript）

<?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 = "[email protected]"; 
    $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的方法。

任何建议如何在php文件中执行JavaScript以获得由此产生的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

来源

2016-07-30 mrquad

谷歌图表有一个本地方法（getImageURI）
它创建了c的base64字符串表示哈特
可以包含在img元素
的src属性或保存到一个文件作为.png

看到Printing PNG Charts的除了更多信息

，你应该等图表的'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>

EDIT

从例如采取如上所述，当图表的'ready'事件˚F IRES，
通过AJAX后的图像串发送回同一页面

然后在PHP，检查图像接收

如果接收，发送电子邮件，否则绘制图表

以下是工作流程的原始示例...

<?php 
    if(isset($_POST['chartImage'])) { 
    $to = "[email protected]"; 
    $subject = "test message"; 
    $headers = "test message"; 
    $message = $_POST['chartImage']; 

    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'); 
    } else { 
?> 
    <script> 
    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() { 
      // send chart image 
      $.ajax({ 
      type: 'POST', 
      url: 'mail.php', 
      data: { 
       'chartImage': chart.getImageURI(), 
      }, 
      success: function(){ 
       console.log('email sent'); 
      } 
      }); 
     }); 
     chart.draw(data, options); 
     }, 
     packages: ['corechart'] 
    }); 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
    <div id="chart_div"></div> 
<?php 
    } 
?>

来源

2016-07-30 21:28:57 WhiteHat

Thx为您的答案！任何建议如何创建这个“隐形”页面在我的PHP文件 – mrquad

你有一个邮件php的例子吗？建议有一个绘制图表的页面，然后当图表的“ready”事件触发时，通过ajax将图像字符串发送回php继续发送电子邮件 – WhiteHat

非常感谢您的回复！请参阅上面我更新的答案。 – mrquad

您可以使用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

来源

2016-07-30 21:13:03 guest271314

THX你的答案！我的问题是，我不能在我的PHP文件中运行JavaScript，因此我不能使用'canvas2html.js'。任何建议如何轻松地在PHP文件中运行你的代码？ – mrquad

需要等待''ready''事件，或_could_以空白画布结尾 – WhiteHat

@mrquad您可以将'canvas'的'data URI'发送到'php' – guest271314

不完全是谷歌图表API的使用，但这可能实际上可以帮助你。

谷歌也有自己的Image Charts（这是不赞成，但他们表示，他们没有计划将其关闭）。您可以使用图像图表生成您想要的图形并获取图像作为回报。

我把数据和生成此图像：

可使用this link产生。

我知道这是不完全的图形一样的图表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">

来源

2016-08-06 01:13:16 Dekel

我会令使用PhantomJS或JS任何其他模拟浏览器很好的图表。请参阅此链接的例子：

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

由于您使用PHP，你需要像这样的东西来包装要求：

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

来源

2016-08-09 09:16:49

我真的很喜欢这个想法！你会如此善良，以显示一个工作的PHP例子？赏金将在近23小时内结束。 – mrquad