โดยโค้ด จะเป็นแค่ตัวอย่าง ทำความรู้จักอย่างง่าย สำหรับใครที่สนใจ
สามารถดู รายละเอียดได้ที่ https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
ตัวอย่าง
โค้ด google_column_chart.php
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 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div style="margin:auto;width:80%;"><div id="chart_div" style="margin:auto;width:600px;height:400px;"></div> </div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript">google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);function drawChart() { // สร้างตัวแปร array เก็บค่า ข้อมูล var dataArray1=[ ['ปี', 'ยอดขาย', 'ค่าใช้จ่าย'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]; // แปลงข้อมูลจาก array สำหรับใช้ในการสร้าง กราฟ var data = google.visualization.arrayToDataTable(dataArray1); // ตั้งค่าต่างๆ ของกราฟ เพิ่มเติม https://developers.google.com/chart/interactive/docs/gallery/columnchart var options = { title: "หัวข้อกราฟ", hAxis: {title: 'ข้อความแนวนอน', titleTextStyle: {color: 'red'}}, vAxis: {title: 'ข้อความแนวตั้ง', titleTextStyle: {color: 'blue'}}, width: 600, height: 400, bar: {groupWidth: "70%"}, legend: { position: 'right', maxLines: 3 }, tooltip: { trigger: 'select' } }; // สร้างกราฟแนวตั้ง แสดงใน div id = chart_div var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); // สร้างกราฟ }</script> </body></html> |
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง