Question

我要问的问题是从代码架构的角度来看。我正在准备一个用PHP $message构建的php报告，然后通过php mail函数发送。

例如，报告就像那样构建在php文件中（基本上连接字符串）：

$message .= <<<HTML
    </td>
</tr>
</tbody>
</table>
HTML;

此外，我想包括一张图表。但是，尝试以下示例并按邮件发送它我没有图表和空<div style="width:900px;min-height:500px"></div> ==$0值。

$message.=<<<HTML
        <tr valign="top" align="center">
              <script type="text/javascript">
                google.charts.load("current", {packages:['corechart']});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {

                  var data = google.visualization.arrayToDataTable([
                    ['Element', 'Density', { role: 'style' }],
                    ['Copper', 8.94, '#b87333', ],
                    ['Silver', 10.49, 'silver'],
                    ['Gold', 19.30, 'gold'],
                    ['Platinum', 21.45, 'color: #e5e4e2' ]
                  ]);

                  var options = {
                    title: "Density of Precious Metals, in g/cm^3",
                    bar: {groupWidth: '95%'},
                    legend: 'none',
                  };

                  var chart_div = document.getElementById('chart_div');
                  var chart = new google.visualization.ColumnChart(chart_div);

                  // Wait for the chart to finish drawing before calling the getImageURI() method.
                  google.visualization.events.addListener(chart, 'ready', function () {
                    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
                    console.log(chart_div.innerHTML);
                  });

                  chart.draw(data, options);

              }
              </script>
              <div id='chart_div'></div>
        </tr>
HTML;

我的猜测是f.ex不接受javascript。 Gmail中。因此，我正在尝试事先创建一个png，然后将其包含在报告中。

我首选的方法是google charts library，但它不支持php，完全基于JavaScript。

因此，我的问题是：

如何在我的代码中使用Google图表库？
如果上述任何其他建议不起作用？

如果你能提供一个例子我很感激！

Answer 1

电子邮件客户端会剥离Javascript，SVG和其他格式，因此您不能直接在电子邮件中使用图表库。

您的选择包括：

使用getImageURI生成图表的PNG，然后将其发送到服务器以通过电子邮件发送。如果您知道客户将在需要发送电子邮件之前加载每个图表，那么这可能是最好的解决方案。
使用wkhtmltoimage之类的工具“无头”渲染显示图表的网页并将其另存为图像。
使用QuickChart之类的图表图形渲染Web服务生成图表图像（仅供参考：这是我开始的开源项目）。

尤其是QuickChart是基于Chart.js构建的，因此您必须将Chart.js图表定义创建为字符串：

$chartConfig = "{
  type: 'bar',
  data: {
    labels: ['Copper', 'Silver', 'Gold', 'Platinum'],
    datasets: [{
      data: [8.94, 10.49, 19.30, 21.45],
      backgroundColor: ['#b87333', 'silver', 'gold', '#e5e4e2'],
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Density of Precious Metals, in g/cm^3',
    },
    legend: {
      display: false    
    }
  }
}";

我使用了静态字符串来匹配您的示例，但是您可以像在其他任何PHP字符串中一样包含动态变量。

然后将此字符串编码为URL：

$chartUrl = 'https://quickchart.io/chart?c=' . urlencode($chartConfig);

此URL返回一个如下所示的图表：

最后，将图表作为HTML图像标签添加到您的电子邮件正文中：

$message .= "<img src=\"$chartUrl\"/>";

使用图表发送报告邮件

1 个答案: