หน้านี้แสดงวิธีวาดแผนภูมิหลายรายการในหน้าเว็บเดียว
วาดแผนภูมิหลายรายการในหน้าเดียว
หากต้องการวาดหลายแผนภูมิในหน้าเว็บเดียว ให้ใส่โค้ดต่อไปนี้ใน <head>
ของหน้าเว็บ
- โหลดแพ็กเกจทั้งหมดที่แผนภูมิต้องการในการเรียกใช้
google.charts.load()
- สําหรับแผนภูมิแต่ละรายการในหน้าเว็บ ให้เพิ่มการเรียกไปยัง
google.charts.setOnLoadCallback()
โดยใช้โค้ดเรียกกลับที่วาดแผนภูมิเป็นอินพุต เช่นgoogle.charts.setOnLoadCallback(myPieChart)
ตัวอย่างเช่น สมมติว่าคุณต้องการวาดแผนภูมิวงกลม 2 รายการ ซึ่งแสดงจํานวนพิซซ่าที่ Sarah และ Anthony รับประทานเมื่อคืนกับเพื่อน ตัวอย่างต่อไปนี้จะแสดงแผนภูมิทั้ง 2 รายการที่แสดงคู่กัน
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load Charts and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart for Sarah's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawSarahChart); // Draw the pie chart for the Anthony's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawAnthonyChart); // Callback that draws the pie chart for Sarah's pizza. function drawSarahChart() { // Create the data table for Sarah's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); // Set options for Sarah's pie chart. var options = {title:'How Much Pizza Sarah Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Sarah's pizza. var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div')); chart.draw(data, options); } // Callback that draws the pie chart for Anthony's pizza. function drawAnthonyChart() { // Create the data table for Anthony's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 2], ['Onions', 2], ['Olives', 2], ['Zucchini', 0], ['Pepperoni', 3] ]); // Set options for Anthony's pie chart. var options = {title:'How Much Pizza Anthony Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Anthony's pizza. var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div')); chart.draw(data, options); } </script> </head> <body> <!--Table and divs that hold the pie charts--> <table class="columns"> <tr> <td><div id="Sarah_chart_div" style="border: 1px solid #ccc"></div></td> <td><div id="Anthony_chart_div" style="border: 1px solid #ccc"></div></td> </tr> </table> </body> </html>
การใช้โค้ดเรียกกลับเพียงรายการเดียวเพื่อวาดแผนภูมิหลายรายการ
ตัวอย่างก่อนหน้านี้ใช้โค้ดเรียกกลับ 2 รายการที่วาดแผนภูมิ เนื่องจากข้อมูลของแผนภูมิ 2 รายการนี้แตกต่างกัน หากต้องการวาดแผนภูมิหลายรายการด้วยข้อมูลเดียวกัน การเขียนโค้ดเรียกกลับเพียง 2 รายการสําหรับทั้ง 2 ทางอาจสะดวกกว่า ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเรื่องนี้
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load Charts and the corechart and barchart packages. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart and bar chart when Charts is loaded. google.charts.setOnLoadCallback(drawChart); function drawChart() { 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] ]); var piechart_options = {title:'Pie Chart: How Much Pizza I Ate Last Night', width:400, height:300}; var piechart = new google.visualization.PieChart(document.getElementById('piechart_div')); piechart.draw(data, piechart_options); var barchart_options = {title:'Barchart: How Much Pizza I Ate Last Night', width:400, height:300, legend: 'none'}; var barchart = new google.visualization.BarChart(document.getElementById('barchart_div')); barchart.draw(data, barchart_options); } </script> </head> <body> <!--Table and divs that hold the pie charts--> <table class="columns"> <tr> <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td> <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td> </tr> </table> </body> </html>