这个页面展示了如何在一个web页面上绘制多个图表。
在一页纸上画多个图表
如果您想在一个web页面上绘制多个图表,请在页面的<head>中包含以下代码:
- 在一次对google.chart . Load()的调用中加载图表所需的所有包。
- 对于页面上的每个图表,添加一个对google.chart . setonloadcallback()的调用,使用绘制图表作为输入的回调函数——例如google.chart . setonloadcallback (myPieChart)。
例如,假设您想要绘制两个饼图,显示您的朋友Sarah和Anthony昨晚吃了多少披萨。下面的示例显示了如何并排显示这两个图表。
<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>
<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>
<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>