■ サンプル
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">
</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js">
<script type="text/javascript">
(function() {
'use strict';
// Load the Visualization API and the corechart 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 bar chart, passes in the data and draws it.
function drawChart() {
// Set chart options
var options = {
'title': 'Demo for Bar Chart',
'width': 500,
'height': 300,
colors: ['#b0120a', '#ffab91'],
hAxis: {
title: 'Competition Population',
minValue: 0
},
vAxis: {
title: 'Sports'
},
animation: {
startup: true,
duration: 800,
esaing: 'inAndOut'
},
// 積み上げ
//isStacked: true
// 積み上げ(割合)
//isStacked: 'percent'
};
// Create the data table.
var data = new google.visualization.arrayToDataTable([
['Sports', 'Age : 05-12', 'Age : 12-18'],
['Soccer', 46, 32],
['Baseball', 31, 26],
['Basketball', 76, 54],
['Tennis', 17, 8]
]);
// Instantiate and draw our chart, passing in some options.
var target = document.getElementById('targetChart');
var chart = new google.visualization.BarChart(target);
chart.draw(data, options);
}
})();
</script>
</body>
</html>
■ 補足
【１】縦棒グラフにするには...
google.visualization.ColumnChart() にする
var chart = new google.visualization.ColumnChart(target);
