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

Question

我在php中創建一個郵件，在wordpress插件中，並希望包含由谷歌圖表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

Answer 1

谷歌圖表有一個本機方法（ getImageURI ）
它創建了圖表的base64字符串表示
它可以包含在img元素的src屬性中
或以.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>

編輯

從上面的例子中，當圖表的'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
  }
?>

Answer 2

不完全是谷歌圖表api的用法，但這實際上可能對你有所幫助。

谷歌也有他們的圖像圖表（已被棄用，但他們表示他們沒有計划將其關閉）。 您可以使用圖像圖表生成所需的圖形並獲得圖像作為回報。

我拍了數據並生成了這張圖片：

哪個可以使用此鏈接生成。

我知道這與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">

Answer 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

Answer 4

我會使用PhantomJS或任何其他無頭瀏覽器使用js渲染圖表。 請參閱此鏈接以獲取示例：

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

既然你正在使用php，你需要用這樣的東西包裝請求：

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

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

問題描述

4 個解決方案

解決方案1
6 已采納 2016-07-30 21:28:57

解決方案2
5 2016-08-06 01:13:16

解決方案3
4 2016-07-30 21:13:03

解決方案4
3 2016-08-09 09:16:49

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

問題描述

4 個解決方案

解決方案1 6 已采納 2016-07-30 21:28:57

解決方案2 5 2016-08-06 01:13:16

解決方案3 4 2016-07-30 21:13:03

解決方案4 3 2016-08-09 09:16:49

解決方案1
6 已采納 2016-07-30 21:28:57

解決方案2
5 2016-08-06 01:13:16

解決方案3
4 2016-07-30 21:13:03

解決方案4
3 2016-08-09 09:16:49