如何在单个页面中绘制饼图和柱状图
问题描述:
我需要在单个页面中绘制饼图和柱状图,当我使用 包“栏”时,它可以绘制柱状图但不能饼图如何在单个页面中绘制饼图和柱状图
google.charts.load('current', {'packages':['bar']});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
当我使用“corechart”的包,它将绘制的饼图,但不可能得出一个柱形图
(但能够绘制条形图)
google.charts.load("current", {packages:["corechart"]});
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
怎样绘制两个图在一个单一的页面?
答
你可以像下面: -
google.charts.load('current', {packages: ['corechart','bar']});//add multiple packages
google.charts.setOnLoadCallback(drawMaterial); //call there corresponsing draw functions
google.charts.setOnLoadCallback(drawChart);//call there corresponsing draw functions
function drawMaterial() { // add each function definition
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
]);
var materialOptions = {
chart: {
title: 'Population of Largest U.S. Cities'
},
hAxis: {
title: 'Total Population',
minValue: 0,
},
vAxis: {
title: 'City'
},
bars: 'horizontal'
};
var materialChart = new google.charts.Bar(document.getElementById('chart_div'));//draw on different-different elements
materialChart.draw(data, materialOptions);
}
function drawChart() {// add each function definition
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));//draw on different-different elements
chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>