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

Question

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

Ann*_*lee 11 javascript php wordpress google-visualization

我在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' );
?>

Run Code Online (Sandbox Code Playgroud)

我的问题是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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Whi*_*Hat 6

谷歌图表有一个本机方法(getImageURI)
它创建一个图表的base64字符串表示
,可以包含在元素的src属性中或保存到文件中img
.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']
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

编辑

从上面的例子中,当图表的'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
  }
?>

Run Code Online (Sandbox Code Playgroud)

Answer 2

gue*_*314 5

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

Run Code Online (Sandbox Code Playgroud)

plnkr http://plnkr.co/edit/WPeiFuSdFIYP9297yHYN?p=preview

Answer 3

Dek*_*kel 5

不完全是谷歌图表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">

Run Code Online (Sandbox Code Playgroud)

Answer 4

Jon*_*ved 5

我会使用 PhantomJS 或任何其他适合 js 的无头浏览器来渲染图表。请参阅此链接以获取示例：

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

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

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

归档时间：	9 年，4 月前
查看次数：	1419 次
最近记录：	9 年，4 月前