我正在使用 php 和 wordpress 插件创建邮件,并希望包含由 google chart api 创建的图像。我尝试了以下方法:
<?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 的方法。
关于如何在 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
最佳答案
谷歌图表有一个本地方法 (getImageURI
)
它创建图表的 base64 字符串表示
它可以包含在 img
元素的 src
属性中
或保存到文件中 .png
参见 Printing PNG Charts了解更多信息
此外,您应该等待图表的 'ready'
事件触发,
在抓取图像之前
要在电子邮件中发送图表图像,建议有一个绘制图表的页面
然后当 'ready'
事件触发时,通过 ajax 将图像字符串发送到发送电子邮件的 Controller ......
有关获取图像的示例,请参见以下代码段...
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>
编辑
从上面的例子来看,当图表的 'ready'
事件触发时,
通过ajax post将图像字符串发送回同一页面
然后在 php 中,检查是否收到了图像
如果收到,发送邮件,否则绘制图表
以下是工作流的原始示例...
<?php
if(isset($_POST['chartImage'])) {
$to = "test@test.com";
$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
}
?>
关于javascript - 在 php 文件中执行 Google Chart API (Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38678239/