在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