วาดแผนภูมิ 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ขั้นตอนสุดท้ายคือการวาดแผนภูมิ ก่อนอื่นคุณต้องสร้างอินสแตนซ์ของคลาสแผนภูมิที่ต้องการใช้ จากนั้นต้องเรียกใช้ draw() ในคลาสแผนภูมิดังกล่าว

สร้างตัวอย่างแผนภูมิ

แผนภูมิแต่ละประเภทขึ้นอยู่กับคลาสที่แตกต่างกัน ซึ่งแสดงอยู่ในเอกสารประกอบของแผนภูมิ ตัวอย่างเช่น แผนภูมิวงกลมอิงตามคลาส google.visualization.PieChart ส่วนแผนภูมิแท่งจะอิงจากคลาส google.visualization.BarChart และอื่นๆ ทั้งแผนภูมิวงกลมและแผนภูมิแท่งจะรวมอยู่ในแพ็กเกจ Corechart ที่คุณโหลดเมื่อเริ่มต้นบทแนะนำนี้ แต่หากต้องการแผนผังหรือแผนภูมิภูมิศาสตร์ในหน้าเว็บ คุณต้องโหลดแพ็กเกจ "ทรีแผนที่" หรือ "แผนที่ภูมิศาสตร์" เพิ่มเติม

เครื่องมือสร้างแผนภูมิของ Google จะใช้พารามิเตอร์เดียว นั่นคือการอ้างอิงองค์ประกอบ DOM ที่ใช้วาดการแสดงภาพ

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

วาดแผนภูมิของคุณ

หลังจากเตรียมข้อมูลและตัวเลือก คุณก็พร้อมแล้วที่จะวาดแผนภูมิ

หน้าเว็บของคุณต้องมีองค์ประกอบ HTML (โดยทั่วไปคือ <div>) เพื่อเก็บแผนภูมิ คุณต้องส่งการอ้างอิงไปยังองค์ประกอบนี้ให้แผนภูมิ ดังนั้นให้กำหนดรหัสสำหรับใช้ดึงข้อมูลการอ้างอิงโดยใช้ document.getElementById() ระบบจะแทนที่ทุกอย่างในองค์ประกอบนี้ด้วยแผนภูมิเมื่อวาด ลองพิจารณาว่าคุณควรปรับขนาดองค์ประกอบ <div> นี้อย่างชัดเจนหรือไม่ แต่ในตอนนี้ ให้ระบุขนาดแผนภูมิใน HTML <div>

แผนภูมิทั้งหมดรองรับเมธอด draw() ที่มี 2 ค่า ได้แก่ ออบเจ็กต์ DataTable (หรือ DataView) ที่เก็บข้อมูลของคุณและออบเจ็กต์ตัวเลือกแผนภูมิที่ไม่บังคับ ไม่จำเป็นต้องใช้ออบเจ็กต์ตัวเลือก และคุณจะเพิกเฉยต่อวัตถุนั้นหรือส่งเป็นค่าว่างเพื่อใช้ตัวเลือกเริ่มต้นของแผนภูมิได้

หลังจากโทรหา draw() ระบบจะวาดแผนภูมิในหน้า คุณควรเรียกใช้เมธอด draw() ทุกครั้งที่เปลี่ยนแปลงข้อมูลหรือตัวเลือก และต้องการอัปเดตแผนภูมิ

เมธอด draw() เป็นแบบไม่พร้อมกัน กล่าวคือ จะแสดงทันที แต่อินสแตนซ์ที่แสดงผลอาจไม่พร้อมใช้งานทันที ในหลายกรณี การลากเส้นนี้ไม่เป็นปัญหา แผนภูมิจะวาดขึ้นในที่สุด อย่างไรก็ตาม หากต้องการตั้งค่าหรือเรียกค่าในแผนภูมิหลังจากที่เรียก draw() แล้ว คุณต้องรอให้เหตุการณ์พร้อมแสดงก่อน ซึ่งบ่งชี้ว่ามีการสร้างค่าแล้ว เราจะพูดถึงการฟังกิจกรรมต่างๆ ในหน้าถัดไป

การแก้ปัญหา

หากแผนภูมิไม่วาดบนหน้าเว็บ ต่อไปนี้เป็นแนวทางที่อาจช่วยคุณแก้ปัญหาได้

  • มองหาการพิมพ์ผิด โปรดทราบว่า JavaScript เป็นภาษาที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
  • ค้นหากลุ่มสนทนาของ Google Visualization API หากไม่พบโพสต์ที่ตอบคำถามของคุณ ให้โพสต์คำถามลงในกลุ่มพร้อมกับลิงก์ไปยังหน้าเว็บที่ทำให้เกิดปัญหา

 

 

 

ข้อมูลเพิ่มเติม