วิธีแก้กราฟแท่ง (Bar Chart) ไม่แสดงบน PDF (Google charts)

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

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

User avatar
eange08
PHP Super Hero Member
PHP Super Hero Member
Posts: 658
Joined: 22/12/2020 10:09 am

วิธีแก้กราฟแท่ง (Bar Chart) ไม่แสดงบน PDF (Google charts)

Post by eange08 »

จากบทความที่ทำกราฟบน PDF ได้แล้วนั้น (ดูได้ที่ viewtopic.php?f=72&t=71777) บางคนอาจจะติดปัญหาว่าทำไม กราฟแท่ง (Bar Chart) ของเรานั้นไม่แสดงบน PDF ในที่นี้จะใช้ MPDF เป็นไลบาลี่ในการทำ PDF จะมีวิธีแก้ดังนี้

1. เริ่มแรกให้ดูส่วน API ที่เราทำกราฟแท่ง ซึ่งจะใช้เป็นคำสั่งสร้างไฟล์รูปของกราฟที่ไปใช้บน PDF ของกราฟแท่ง

Code: Select all

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
]);
var options = {
width:'auto',
	legend: { position: 'none' },
chart: {
		title: null,
		top:0,
		left:20,width:'20%'
},
bars: 'vertical', 
axes: {
x: {
Density: {side: 'top', label: 'Percentage'}, 
}
},bar: { groupWidth: "40%" }	
};

var chart = new google.visualization.ColumnChart(document.getElementById('dual_x_div')); //----ส่วนการสร้างกราฟในหน้า View ของเราปกติ
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(data, options);
});
//----เพิ่ม code ในส่วนนี้โดยใช้ id =dual_x_div อันเดียวกับแสดงกราฟบนเว็บของเรา
google.load('dual_x_div', '1', {packages:['corechart'], callback: drawVisualizationDaily 
});
</script>
2. ให้มี input ที่เป็น Hidden เก็บค่าของรูปภาพเอาไว้ โดยใช้ id="hdd_chart_pic"

Code: Select all

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

Code: Select all

$_SESSION['img']=$_POST['hdd_chart_pic'];
4. ไปที่โค้ดของ PDF ส่วนที่แสดงกราฟให้ใช้คำสั่ง img ของ HTML ได้เลย

Code: Select all

<img src="<?php echo $_SESSION['img']; ?>" width="90%"  />
5. หลังจากนั้นก็กดออก PDF จะได้ผลลัพท์ดังนี้
screenshot-developers.google.com-2020.12.23-15_52_50.png
screenshot-developers.google.com-2020.12.23-15_52_50.png (8.07 KiB) Viewed 165 times
อ้างอิงจาก :
- https://stackoverflow.com/questions/480 ... ogle-chart
- วิธีใช้ Google Charts ให้แสดงบน PDF โดยใช้ MPDF : viewtopic.php?f=72&t=71777
- สามารถอ่านข้อมูลเพิ่มของ MPDF ได้ที่ https://mpdf.github.io/
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 11 guests