2016-07-30 15 views
11

मैं php में एक मेल बनाने हूँ में करने वाले लाइन चार्ट (जावास्क्रिप्ट) निष्पादित, एक वर्डप्रेस प्लगइन में, और करने वाले लाइन चार्ट द्वारा बनाई छवि शामिल करना चाहते हैं। मैंने निम्नलिखित कोशिश की:php फ़ाइल

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

मेरी समस्या यह है कि जावास्क्रिप्ट को डिलीवर मेल में निष्पादित नहीं किया जा सकता है। इसलिए, मैं स्क्रिप्ट के अंदर जावास्क्रिप्ट निष्पादित करने का एक तरीका ढूंढ रहा हूं।

कोई सुझाव है कि कैसे एक php फ़ाइल जिसके परिणामस्वरूप गूगल-api लिंक प्राप्त करने के लिए जावास्क्रिप्ट को निष्पादित करने के?

मैं एक कामकाजी उदाहरण की सराहना करता हूं!

पुनश्च .: मेरे 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 

उत्तर

4

गूगल चार्ट एक देशी विधि (getImageURI)
यह सी का बेस 64 स्ट्रिंग प्रस्तुति बनाता है हार्ट
जो एक 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>

संपादित

ऊपर के उदाहरण से ले रही है, जब चार्ट के 'ready' घटना च 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 
    } 
?> 
+0

थैक्स को अपने उत्तर के लिए भेज सकते हैं! मेरे PHP फ़ाइल – mrquad

+1

में इस "अदृश्य" पृष्ठ को बनाने के लिए कोई सुझाव है क्या आपके पास मेल php का एक उदाहरण है? चार्ट को खींचने वाले पृष्ठ को रखने की अनुशंसा करते हैं, फिर जब चार्ट की 'तैयार' घटना आग लगती है, तो ईमेल – WhiteHat

+0

ईमेल भेजने जारी रखने के लिए AJAX के माध्यम से छवि स्ट्रिंग को php पर भेजता है, आपके उत्तर के लिए बहुत बहुत धन्यवाद! कृपया ऊपर मेरा अद्यतन उत्तर देखें। – mrquad

4

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

+0

Thx: कृपया उदाहरण के लिए इस लिंक को देख:

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

आप php का उपयोग कर रहे जब से तुम कुछ इस तरह से अनुरोध रैप करने के लिए की जरूरत है! मेरी समस्या यह है कि मैं अपनी PHP फ़ाइल में जावास्क्रिप्ट नहीं चला सकता, इसलिए मैं 'canvas2html.js' का उपयोग नहीं कर सकता। किसी भी सुझाव को php फ़ाइल में आसानी से अपना कोड कैसे चलाया जाए? – mrquad

+1

को 'तैयार' घटना पर इंतजार करने की आवश्यकता है, या _could_ एक रिक्त कैनवास – WhiteHat

+0

@mrquad के साथ समाप्त हो गया है, आप 'कैनवास' के 'डेटा यूआरआई' को 'php' – guest271314

4

नहीं वास्तव में करने वाले लाइन चार्ट के उपयोग, लेकिन यह वास्तव में आपकी मदद कर सकता है।

गूगल भी उनके Image Charts (जो हटा दिया गया है, लेकिन वे कहा कि वे इसे बंद करने की कोई योजना नहीं है)। आप इच्छित ग्राफ को उत्पन्न करने के लिए छवि चार्ट का उपयोग कर सकते हैं और बदले में एक छवि प्राप्त कर सकते हैं।

मैं डेटा ले लिया और इस छवि को उत्पन्न:

enter image description here

कौन सा this link का उपयोग कर उत्पन्न किया जा सकता।


मैं जानता हूँ कि यह वास्तव में (अस्पष्टता और सामान जैसे कुछ बड़े बड़े काम याद आ रही है और उनकी छवि चार्ट) लाइन चार्ट के रूप में ही ग्राफिक्स नहीं है, लेकिन यह त्वरित समाधान है कि आप देख रहे हैं हो सकता है।

और एक जीवित टुकड़ा:

<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

मैं PhantomJS या js साथ किसी अन्य नेतृत्वहीन ब्राउज़र अच्छा का उपयोग कर चार्ट प्रस्तुत करना होगा। आपके उत्तर के लिए

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

+0

मुझे वास्तव में यह विचार पसंद है! क्या आप एक काम कर रहे PHP उदाहरण दिखाने के लिए बहुत दयालु होंगे? बकाया लगभग 23 घंटे में खत्म हो जाएगा। – mrquad

संबंधित मुद्दे