วิธีใช้ Google Charts ให้แสดงบน PDF โดยใช้ MPDF

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16015
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

วิธีใช้ Google Charts ให้แสดงบน PDF โดยใช้ MPDF

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

เมื่อเราทำกราฟด้วย Google Chart ให้แสดงบนหน้าจอได้แล้ว ก็อยากจะออกรายงานเป็น PDF แต่ยังสงสัยว่า Google Chart นั้นจะทำได้ไหม จะต้องเรียก API บน PDF อีกทีหรือเปล่า ซึ่งในบทความนี้เรามีคำตอบมาให้ว่า....ทำได้!!
มาดูขั้นตอนการทำกันนะคะ

1. ในหน้า View ให้สร้างกราฟด้วย API ของ Google Chart เราจะเพิ่ม code ส่วนสร้างรูปภาพเอาไว้
โดยรูปจะอยู่ในรูปแบบของ binary code หรือการเข้ารหัสรูปภาพเอาไว้ เช่น

โค้ด: เลือกทั้งหมด

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
CODE ในส่วนของกราฟ

โค้ด: เลือกทั้งหมด

<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>
2. ให้มี input ที่เป็น Hidden เก็บค่าของรูปภาพเอาไว้ โดยใช้ id="hdd_chart_pic"

โค้ด: เลือกทั้งหมด

<?php echo Html::hiddenInput('hdd_chart_pic','',array('id'=>'hdd_chart_pic')); ?>
3. เมื่อเรากดออกรายงานให้เราเรียกค่าจาก input Hidden นั้นลงใน session

โค้ด: เลือกทั้งหมด

$_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%"  />

ผลลัพท์ที่ได้ :
screenshot-www.webslesson.info-2020.12.23-15_37_48.png
screenshot-www.webslesson.info-2020.12.23-15_37_48.png (61.57 KiB) Viewed 2589 times
อ้างอิงจาก :
- https://www.webslesson.info/2018/07/how ... p.html?m=1
- ทำกราฟด้วย Google charts : viewtopic.php?f=72&t=71753
- สามารถอ่านข้อมูลเพิ่มของ MPDF ได้ที่ https://mpdf.github.io/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 35