[JavaScript]Chart.js

Chart.jsとは

Chart.jsは、HTML5の<canvas>要素を使って、折れ線グラフ、棒グラフ、円グラフなどを描画できるライブラリです。

使用方法

種類	typeの値	説明
折れ線グラフ	'line'	時系列や傾向を表す
棒グラフ	'bar'	比較データ
円グラフ	'pie'	割合を表示
ドーナツグラフ	'doughnut'	円グラフの中心が空いている
レーダーチャート	'radar'	複数の要素を比較
極座標チャート	'polarArea'	レーダーチャートと似ているが角度ではなく面積で表現

 <script>
  const ctx = document.getElementById('myChart').getContext('2d');
  
  const myChart = new Chart(ctx, {
    type: 'bar', // グラフの種類（bar, line, pie, etc.）
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // x軸のラベル
      datasets: [{
        label: '投票数',
        data: [12, 19, 3, 5, 2, 3], // y軸の値
        backgroundColor: [ // 棒の色
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [ // 枠線の色
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1 // 枠線の太さ
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true // y軸を0から開始
        }
      }
    }
  });
</script>