ใน workshop นี้จะแนะนำการสร้างกราฟแบบง่ายๆ โดยใช้ php วนซ้ำข้อมูลออกมานะครับ ลองใช้งานประยุกต์ใช้ดูจะทำให้รายงานของเราดูไฮโซ ขึ้นมาทันที
ตั้งชื่อว่า chart.php แล้วลอง run ดูนะครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>easy chart</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <!-- ตั้งค่า --> <script type="text/javascript"> $(function () { $('#container').highcharts({ //ชื่อกราฟ title: { text: 'ทดสอบกราฟแบบง่ายๆ ', x: -20 //center }, subtitle: { text: 'http://www.highcharts.com/', x: -20 }, //แนวนอน xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, //ชื่อข้อมูลแนวตั้ง yAxis: { title: { text: 'จำนวนเงิน (ล้านบาท)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: 'บาท' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ // name: 'Tokyo', // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] // }, { name: '2015', data: [ <?php //วนซ้ำข้อมูล 1-12 for ($i = 0; $i < 12; $i++) { if($i>0){ echo ','; } echo $i*100; //ข้อมูลตัวเลข } ?> ] }, { name: '2016', data: [<?php for ($i = 0; $i < 12; $i++) { if($i>0){ echo ','; } echo $i*80; //ข้อมูลตัวเลข } ?>] }, { name: '2017', data: [ <?php for ($i = 0; $i < 12; $i++) { if($i>0){ echo ','; } echo $i*50;//ข้อมูลตัวเลข } ?>] }] }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html> |