538 views
この記事は最終更新から 720日 が経過しています。
1. やりたいこと
表題の通り。
2. やってみた
以下の図のように、グラフを 3個並べて表示した。
https://www.dogrow.net/hp/sample/00146/
1) 実装したソースコード
(1) index.html
<!DOCTYPE html>
<html>
<head>
<title>Blog No.146</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="script.js"></script>
<script>
const grpData1 = [
['要素', '値'],
['はい', 995],
['いいえ', 381],
['どちらでもない', 184]
];
const grpData2 = [
['要素', '値'],
['金魚すくい', 129],
['輪投げ', 86],
['射的', 106],
['りんご飴', 39],
['ビンゴ', 138]
];
const grpData3 = [
['要素', '値'],
['はい', 1129],
['いいえ', 244],
['どちらでもない', 220]
];
google.charts.setOnLoadCallback( drawAllCharts );
function drawAllCharts(){
drawBarChart('GQ1', '問1：楽しかったですか？', grpData1);
drawPieChart('GQ2', '問2：何が良かったですか？', grpData2);
drawPieChart('GQ3', '問3：また参加したいですか？', grpData3);
}
</script>
</head>
<body>
<div id="GQ1" class="chart"></div>
<div id="GQ2" class="chart"></div>
<div id="GQ3" class="chart"></div>
</body>
</html>
(2) script.js
以下の二つのグラフ表示関数を用意した。
drawBarChart : 棒グラフ表示関数
drawPieChart : 円グラフ表示関数
それぞれ引数で
データ、タイトル文字列、グラフ表示対象のDOM要素のID
を渡す仕様だ。
// グラフ描画パッケージをロード
google.charts.load('current', {'packages':['corechart', 'bar']});
////////////////////////////////////////////////////////////////////////////////
// 棒グラフを表示
function drawBarChart( id, titleText, grpData ) {
const data = google.visualization.arrayToDataTable(grpData);
const options = {
title: titleText,
titleTextStyle: {
fontSize: 16, // タイトルのフォントサイズ[px]
color: '#000000'
},
chartArea: {
left: '5%', // 左の余白
top: '5%', // 上の余白
width: '90%', // 描画エリアの幅
height: '90%' // 描画エリアの高さ
},
legend: { // 凡例
textStyle: {
fontSize: 16 // 凡例のフォントサイズ[px]
}
},
bars: 'vertical'
};
var chart = new google.charts.Bar(document.getElementById(id));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
////////////////////////////////////////////////////////////////////////////////
// 円グラフを表示
function drawPieChart( id, titleText, grpData ) {
const data = google.visualization.arrayToDataTable(grpData);
const options = {
title: titleText,
titleTextStyle: {
fontSize: 16, // タイトルのフォントサイズ[px]
bold: false
},
chartArea: {
left: '10%', // 左の余白
top: '10%', // 上の余白
width: '90%', // 描画エリアの幅
height: '80%' // 描画エリアの高さ
},
legend: { // 凡例
textStyle: {
fontSize: 16 // 凡例のフォントサイズ[px]
}
},
};
var chart = new google.visualization.PieChart(document.getElementById(id));
chart.draw(data, options);
}
(3) style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 0.5rem;
}
div.chart{
position: relative;
margin: 0.5rem;
display: inline-block;
width: 30rem;
height: 20rem;
border: 2px #bbb solid;
}
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2025-12-09: 0回 2025-12-08: 2回 2025-12-07: 3回 2025-12-06: 0回 2025-12-05: 0回 2025-12-04: 0回 2025-12-03: 0回