(146) Google Chartsで棒グラフと円グラフを表示

投稿者: | 2023年12月18日

91 views

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;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)