แนะนำ สร้างกราฟแนวตั้ง ด้วย google chart อย่างง่าย
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeegoogle chart
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google chart
ไปที่
Copy
เนื้อหาบทความนี้เน้นแนะนำ การใช้งาน google chart สำหรับสร้างกราฟแนวตั้ง
โดยโค้ด จะเป็นแค่ตัวอย่าง ทำความรู้จักอย่างง่าย สำหรับใครที่สนใจ
สามารถดู รายละเอียดได้ที่ https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
ตัวอย่าง
โค้ด google_column_chart.php
โดยโค้ด จะเป็นแค่ตัวอย่าง ทำความรู้จักอย่างง่าย สำหรับใครที่สนใจ
สามารถดู รายละเอียดได้ที่ https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
ตัวอย่าง
โค้ด google_column_chart.php
<!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" src="https://www.google.com/jsapi"></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>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ
-
09 Dec2014สร้างกราฟแนวตั้ง ดึงข้อมูลจากฐานข้อมูล ใน google chart อ่าน 29,365
เนื้อหาตอนนี้ จะให้แนวทางในการประยุกต์ ดึงข้อมูลจากฐานข้อมูล ซึ่งโดยทั่วไ
เนื้อหาที่เกี่ยวข้อง
-
กำลังอ่านเนื้อหานี้อยู่07 Dec2014แนะนำ สร้างกราฟแนวตั้ง ด้วย google chart อย่างง่าย อ่าน 17,164
เนื้อหาบทความนี้เน้นแนะนำ การใช้งาน google chart สำหรับสร้างกราฟแนวตั้ง โดยโค้ด
-
09 Dec2014สร้างกราฟแนวตั้ง ดึงข้อมูลจากฐานข้อมูล ใน google chart อ่าน 29,365
เนื้อหาตอนนี้ จะให้แนวทางในการประยุกต์ ดึงข้อมูลจากฐานข้อมูล ซึ่งโดยทั่วไ
Tags::
google chart
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()