มาดูขั้นตอนการทำกันนะคะ
1. ในหน้า View ให้สร้างกราฟด้วย API ของ Google Chart เราจะเพิ่ม code ส่วนสร้างรูปภาพเอาไว้
โดยรูปจะอยู่ในรูปแบบของ binary code หรือการเข้ารหัสรูปภาพเอาไว้ เช่น
โค้ด: เลือกทั้งหมด
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
โค้ด: เลือกทั้งหมด
<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() {
// Create the data table.
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Topping');
data2.addColumn('number', 'Slices');
data2.addRows([
['Mushrooms',6],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {title:null,
width:'auto',
chartArea:{
width:600,
},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div')); //----ส่วนการสร้างกราฟในหน้า View ของเราปกติ
//----ส่วนของการสร้างรูปภาพแปลงเป็น Binary Code
google.visualization.events.addListener(chart, 'ready', function () { //----เป็นคำสั่งทำเมื่อมีการสร้างกราฟเสร็จแล้วให้กระทำ action ภายใต้คำสั่งนี้ทันที
document.getElementById('hdd_chart_pic').value = chart.getImageURI(); //------เก็บรูปใส่ใน input ที่ type="hidden" ที่ id="hdd_chart_pic"
});
//------------------------------------
chart.draw(data2, options);
}
</script>
โค้ด: เลือกทั้งหมด
<?php echo Html::hiddenInput('hdd_chart_pic','',array('id'=>'hdd_chart_pic')); ?>
โค้ด: เลือกทั้งหมด
$_SESSION['img']=$_POST['hdd_chart_pic'];
4. ไปที่หน้าโค้ดสร้าง PDF ด้วย MPDF
ให้เรียก session ที่เก็บข้อมูลรูปเอาไว้ด้วยคำสั่ง img ของ HTML
(MPDF เป็น library ช่วยทำ PDF ของ PHP ซึ่งจะใช้ HTML ในการทำแบบฟอร์มของ PDF)
โค้ด: เลือกทั้งหมด
<img src="<?php echo $_SESSION['img']; ?>" width="90%" />
ผลลัพท์ที่ได้ : อ้างอิงจาก :
- https://www.webslesson.info/2018/07/how ... p.html?m=1
- ทำกราฟด้วย Google charts : viewtopic.php?f=72&t=71753
- สามารถอ่านข้อมูลเพิ่มของ MPDF ได้ที่ https://mpdf.github.io/