在 php 文件中执行 Google Chart API (Javascript)答案

【问题标题】：Execute Google Chart API (Javascript) in php file在 php 文件中执行 Google Chart API (Javascript)
【发布时间】：2016-12-05 07:37:07
【问题描述】：

我正在用 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

【问题讨论】：

标签： javascript php wordpress google-visualization

【解决方案1】：

谷歌图表有一个本地方法 (getImageURI)
它创建图表的 base64 字符串表示
可以包含在 img 元素的 src 属性中
或另存为.png

查看Printing PNG Charts了解更多信息

此外，您应该等待图表的'ready' 事件触发，
在抓图之前

要通过电子邮件发送图表图像，建议使用绘制图表的页面
然后当'ready' 事件触发时，通过ajax 将图像字符串发送到发送电子邮件的控制器......

获取图像的示例参见下面的 sn-p...

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
  }
?>

【讨论】：

感谢您的回答！关于如何在我的 php 文件中创建这个“不可见”页面的任何建议
你有邮件php的例子吗？建议有一个绘制图表的页面，然后当图表的'ready' 事件触发时，通过ajax 将图像字符串发送回php 以继续发送电子邮件
非常感谢您的回复！请在上面查看我的更新答案。
请参阅 EDIT 到上述答案 - 试图更好地阐明工作流程......

【解决方案2】：

不完全是 google chart api 的用法，但这实际上可能对你有所帮助。

Google 也有他们的 Image Charts（它已被弃用，但他们表示他们没有计划关闭它）。您可以使用图像图表生成您想要的图表并获得图像作为回报。

我获取了数据并生成了这张图片：

可以使用this link生成。

我知道这与 Chart 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">

【讨论】：

【解决方案3】：

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

【讨论】：

感谢您的回答！我的问题是我无法在我的 php 文件中运行 javascript，因此我无法使用 canvas2html.js 。有什么建议可以轻松地在 php 文件中运行代码吗？
需要等待'ready' 事件，否则可能以空白画布结束
@mrquad 您可以将data URI 的canvas 发送到php

【解决方案4】：

我会使用 PhantomJS 或任何其他支持 js 的无头浏览器来渲染图表。有关示例，请参阅此链接：

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

由于您使用的是 php，因此您需要使用以下内容包装请求：

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

【讨论】：

我真的很喜欢这个主意！你会这么好心地展示一个有效的 php 示例吗？赏金将在近 23 小时后结束。