Radar Chart - chart.js 的設定

最近需要用到像心理測驗那樣的結果圖
所以找到 chart.js
但因為有滿多版本的
且更新後，以前的解法（Stack Overflow）不一定適用
這邊是使用 3.9.1 版

首先，先引入 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

html

<canvas id="myChart" width="600" height="400"></canvas>

再將 Config & Setup 貼進 js 裡

// config
const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};
// config
const data = {
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};
const myChart = new Chart(document.getElementById('myChart'), config);

那麼你就會得到官網上出現的圖片

圖片來源：Radar Chart - chart.js

但由於專案的圖案需求如下，所以我們需要做一些調整

data 的部分

const data = {
      labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
      ],
      datasets: [
        {
          label: 'My First Dataset',
          data: [1, 2.5, 3, 4, 2,3],
          fill: true,
          backgroundColor: 'rgb(255, 99, 132,0.7)',
        },
      ],
    };

config 的部分

const config = {
      type: 'radar',
      data: data,
      options: {
        plugins: {
          legend: { 
            display: false, // 上方 data label 隱藏
          },
        },

        scales: {
          r: {
            beginAtZero: true, //從 0 開始計算
            startAngle: 90, // 選轉角度
            angleLines: { 
              display: false, // 對角線隱藏
            },
            grid: { 
              color: '#000', // 六邊型顏色
            },
            max: 4, //最大數值
            min: 0, //最小數值
            ticks: {
              display: false, // 數值隱藏
              // color: 'red', //數值顏色
              stepSize: 1.5, 寬距
            },
            pointLabels: {
              color: '#000', //六邊 lebal 顏色
              font: {
                size: 14, //六邊 lebal 字體
              },
            },
          },
        },
        elements: {
          point: {
            radius: 0, // 結果的角度圓點大小
          },
          line: {
            borderWidth: 1, //結果線的寬度
          },
        },
      },
    };

產出結果圖如下：