Chart 3. Rader

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
      labels: ['赤', '青', '黃', '緑', '紫', '橙'],
      datasets: [{
        label: 'データの数',
        data: [12, 19, 3, 5, 2, 3],
        fill: true,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 2,
        pointBackgroundColor: 'rgb(255, 99, 132)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(255, 99, 132)'
      }]
    },
    options: {

      scale: {
        ticks: {
          beginAtZero: true,
          min: 0,
        }
      },

      elements: {
        line: {
          tension: 0,
          borderWidth: 3
        }
      }
    }
  });

</script>