<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>
สร้าง DataTable
ทุกแผนภูมิจําเป็นต้องมีข้อมูล แผนภูมิของ Google Chart ต้องใช้ข้อมูลที่รวมอยู่ในคลาส JavaScript ชื่อ google.visualization.DataTable
ชั้นเรียนนี้จะกําหนดไว้ในไลบรารีการแสดงภาพของ Google ซึ่งโหลดไว้ก่อนหน้านี้
DataTable
เป็นตาราง 2 มิติที่มีแถวและคอลัมน์ โดยแต่ละคอลัมน์จะมีประเภทข้อมูล รหัสที่ไม่บังคับ และป้ายกํากับที่ไม่บังคับ ตัวอย่างข้างต้นสร้างตารางต่อไปนี้
ประเภท: สตริง ป้ายกํากับ: ท็อปปิ้ง |
ประเภท: ตัวเลข ป้ายกํากับ: ส่วนแบ่ง |
---|---|
เห็ด | 3 |
หอมใหญ่ | 1 |
มะกอก | 1 |
ซูกินี | 1 |
เปปเปอโรนี | 2 |
การสร้าง DataTable
ทําได้หลายวิธี คุณดูรายการและเปรียบเทียบเทคนิคแต่ละรายการใน DataTables และ DataViews ได้ คุณแก้ไขข้อมูลได้หลังจากที่เพิ่ม เพิ่ม แก้ไข หรือนําคอลัมน์และแถวออก
คุณต้องจัดระเบียบ DataTable
ของแผนภูมิในรูปแบบที่แผนภูมิคาดหวัง เช่น ทั้งแผนภูมิแท่งและแผนภูมิวงกลมต้องมีตาราง 2 คอลัมน์ซึ่งแต่ละแถวแสดงส่วนแบ่งหรือแถบ คอลัมน์แรกคือส่วนแบ่งของป้ายกํากับหรือป้ายกํากับ และคอลัมน์ที่ 2 คือค่าของส่วนแบ่งหรือแท่ง แผนภูมิอื่นๆ ต้องใช้รูปแบบตารางที่ต่างกันและซับซ้อนขึ้น ดูเอกสารประกอบของแผนภูมิเพื่อดูรูปแบบข้อมูลที่ต้องระบุ
แทนที่จะป้อนข้อมูลตารางด้วยตนเอง คุณสามารถค้นหาเว็บไซต์ที่รองรับโปรโตคอลแหล่งข้อมูลของแผนภูมิ เช่น หน้า Google สเปรดชีต เมื่อใช้ออบเจ็กต์ google.visualization.Query
คุณจะส่งคําค้นหาไปยังเว็บไซต์และรับออบเจ็กต์ DataTable
ที่มีการป้อนข้อมูลซึ่งส่งต่อเข้ามาในแผนภูมิได้ ดูหัวข้อขั้นสูงการค้นหาแหล่งข้อมูลเพื่อดูวิธีส่งคําค้นหา