แนะนำ สร้างกราฟแนวตั้ง ด้วย google chart อย่างง่าย

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
google chart

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google chart



เนื้อหาบทความนี้เน้นแนะนำ การใช้งาน google chart สำหรับสร้างกราฟแนวตั้ง
โดยโค้ด จะเป็นแค่ตัวอย่าง ทำความรู้จักอย่างง่าย สำหรับใครที่สนใจ
สามารถดู รายละเอียดได้ที่ 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>



Google Chart
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: google chart







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ