縦棒グラフ

次に縦棒グラフを作成してみましょう．

縦棒グラフを描いてみる

縦棒グラフを描画しますが，その方法は折れ線グラフと大きくは変わりません．具体的には type: 'bar' を利用し，borderWidth （枠線の幅）をします．また，色を適宜調整するだけです．


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js</title>
</head>
<body>
  <div style="width: 100%; height: 300px;">
    <canvas id="myChart"></canvas>
  </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
      datasets: [{
        label: "英語",
        backgroundColor: 'rgba(255, 128, 128, 0.5)',
        borderColor: 'rgba(255, 0, 0, 0.7)',
        borderWidth: 2,
        data: [47, 50, 63, 57, 75]
      }]
    },
    options: {
      scales: {
        x: {
          title: {
            display: true,
            text: '試験回数'
          }
        },
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '得点'
          }
        }
      },
      responsive: true,
      maintainAspectRatio: false
    }
  });
</script>
</body>
</html>

目次に戻る

複数の項目からなる縦棒グラフを作成する

複数の項目からなる縦棒グラフを作成する方法は，次のとおり，データセットを追加するだけです．


<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
      datasets: [{
        label: "英語",
        backgroundColor: 'rgba(255, 128, 128, 0.5)',
        borderColor: 'rgba(255, 0, 0, 0.7)',
        borderWidth: 2,
        data: [47, 50, 63, 57, 75]
      },
      {
        label: "数学",
        backgroundColor: 'rgba(128, 128, 255, 0.5)',
        borderColor: 'rgba(0, 0, 255, 0.7)',
        borderWidth: 2,
        data: [63, 45, 72, 85, 64]
      }]
    },
    options: {
      scales: {
        x: {
          title: {
            display: true,
            text: '試験回数'
          }
        },
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '得点'
          }
        }
      },
      responsive: true,
      maintainAspectRatio: false
    }
  });
</script>

目次に戻る

積み上げ縦棒グラフを作成する

積み上げ棒グラフを作成したければ，横軸と縦軸の両方に stacked: true オプションを追加します．


<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'bar',

    data: {
      labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
      datasets: [{
        label: "英語",
        backgroundColor: 'rgba(255, 128, 128, 0.5)',
        borderColor: 'rgba(255, 0, 0, 0.7)',
        borderWidth: 2,
        data: [47, 50, 63, 57, 75]
      },
      {
        label: "数学",
        backgroundColor: 'rgba(128, 128, 255, 0.5)',
        borderColor: 'rgba(0, 0, 255, 0.7)',
        borderWidth: 2,
        data: [63, 45, 72, 85, 64]
      }]
    },

    options: {
      scales: {
        x: {
          title: {
            display: true,
            text: '試験回数'
          },
          stacked: true,
        },
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '得点'
          },
          stacked: true,
        }
      },
      responsive: true,
      maintainAspectRatio: false
    }
  });
</script>

目次に戻る