programing

php 파일에서 Google Chart API(Javascript) 실행

magicmemo 2023. 3. 17. 20:32
반응형

php 파일에서 Google Chart API(Javascript) 실행

wordpress 플러그인으로 php로 메일을 작성하는데, 구글 차트 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를 실행하는 방법을 찾고 있습니다.

google-api 링크를 얻기 위해 javascript를 php 파일로 실행하는 방법을 제안해 주시겠습니까?

실례를 들어주셔서 감사합니다!

추신: 제 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

구글 차트에는 네이티브 메서드가 있습니다.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']
});
<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 투고를 통해 같은 페이지로 되돌리다

그런 다음 이미지가 수신되었는지 확인합니다.

받은 경우 이메일 보내기, 그렇지 않은 경우 차트 그리기

다음은 워크플로우의 기본 예입니다. 

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

Google chart 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">

를 사용하여 차트를 내보낼 수 있습니다.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

나는 팬텀을 사용하여 차트를 렌더링 할 것이다.JS 또는 js에 적합한 다른 헤드리스 브라우저.예에 대해서는, 다음의 링크를 참조해 주세요.

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

php를 사용하고 있기 때문에 다음과 같은 방법으로 요청을 포장해야 합니다.

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

언급URL : https://stackoverflow.com/questions/38678239/execute-google-chart-api-javascript-in-php-file

반응형

'programing' 카테고리의 다른 글

데이터베이스 테이블의 "select count(1) from table_name"은 무엇을 의미합니까?  (0) 2023.03.17
this.refs를 사용한 권장 해제 경고  (0) 2023.03.17
@ConfigurationProperties 및 @Autowired 클래스를 테스트하는 방법  (0) 2023.03.17
ng-src에서 함수를 호출하는 방법  (0) 2023.03.17
JSON 데이터 유형 postgres별 순서  (0) 2023.03.17

'programing'의 다른글

  • 현재글php 파일에서 Google Chart API(Javascript) 실행

관련글

댓글

티스토리툴바