Chart.jsとは？

Chart.jsはJavaScriptでグラフを描画するためのライブラリです。
私が実装したレーダーチャートの他に、円グラフ、棒グラフ、鶏頭図などが作成できます。

使い方

1.インストール

まず、CDNを利用してテストとして使ってみました。
インストールは以下のタグを追加するだけです。

<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

2.グラフ描写の準備

表示させたい場所にcanvasタグを指定します。

<canvas id="feedBackRadarChart"></canvas>

3.作成

私は別でJavaScriptのファイルを作成し、以下のコードを記載しました。
type, data, optionsの3要素をしてグラフの描写を行います。
要素については 4.要素の指定 で解説しています。

let RadarCtx = document.getElementById('feedBackRadarChart');

// レーダーチャートの作成
let radarConfig = {
  type: 'radar',
  data: {
    labels: ['類いない', '使用技術の正確性', '目新しさ', 'ストーリー性', 'わくわく'],
    datasets: [{
      label: 'Self',
      data: [0, 0, 0, 0, 0],
      backgroundColor: 'rgba(255, 136, 136, 0.3)',  // 赤色の透明な背景色
      borderColor: 'rgb(255, 136, 136)',  // 赤色の境界線
      borderWidth: 5
    }, {
      label: 'FB',
      data: [0, 0, 0, 0, 0],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',  // 青色の透明な背景色
      borderColor: 'rgba(54, 162, 235, 1)',  // 青色の境界線
      borderWidth: 5
    }],
  },
  options: {
    plugins: {
      legend: {
        display: false // レジェンド（ラベル）を非表示にする
      },
      tooltip: {
        callbacks: {
          label: function (tooltipItem) {
            let datasetLabel = tooltipItem.dataset.label;
            if (datasetLabel === 'FB') {
              let commentId = 'comment' + (tooltipItem.dataIndex + 1);
              let comment = document.getElementById(commentId).innerText;
              return comment;
            } else {
              return tooltipItem.dataset.label + ': ' + tooltipItem.raw;
            }
          }
        }
      }
    },
    scales: {
      r: {
        suggestedMin: 0,
        suggestedMax: 5,
        ticks: {},
        pointLabels: {
          font: {
            size: 10
          }
        }
      }
    },
    layout: {
      padding: {
        top: 1,
        bottom: 1,
      }
    }
  }
};

let radarChart = new Chart(RadarCtx, radarConfig);

4.要素の指定

グラフの種類や軸のラベル名、色など要素を指定しながら作成します。

type
グラフの種類の指定です。私はレーダーチャートのため、radarと記載。

  type: 'radar',

typeの値	グラフの種類
line	線グラフ
bar	棒グラフ
radar	レーダーチャート
pie	円グラフ
doughnut	ドーナツチャート
polarArea	鶏頭図(値によって半径が異なる円グラフ)
bubble	バブルチャート
scatter	散布図

data
軸のラベル名、初期値、背景色、境界線の太さなど、デザイン部分を指定。
私は2つのグラフを重ねた描写にしたので、２つ分記載。

  data: {
    labels: ['類いない', '使用技術の正確性', '目新しさ', 'ストーリー性', 'わくわく'],
    datasets: [{
      label: 'Self',
      data: [0, 0, 0, 0, 0],
      backgroundColor: 'rgba(255, 136, 136, 0.3)',  // 赤色の透明な背景色
      borderColor: 'rgb(255, 136, 136)',  // 赤色の境界線
      borderWidth: 5
    }, {
      label: 'FB',
      data: [0, 0, 0, 0, 0],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',  // 青色の透明な背景色
      borderColor: 'rgba(54, 162, 235, 1)',  // 青色の境界線
      borderWidth: 5
    }],
  },

options
ここでは、dataでは指定できない要素を指定します。
アニメーションの指定や特定の場合の表示方法、フォントのサイズなどを設定します。
私は、FBデータセットの場合は特定のコメントを表示し、それ以外の場合はデータセットラベルと値を表示するようにしました。

options: {
    plugins: {
      legend: {
        display: false // レジェンド（ラベル）を非表示にする
      },
      tooltip: {
        callbacks: {
          label: function (tooltipItem) {
            let datasetLabel = tooltipItem.dataset.label;
            if (datasetLabel === 'FB') {
              let commentId = 'comment' + (tooltipItem.dataIndex + 1);
              let comment = document.getElementById(commentId).innerText;
              return comment;
            } else {
              return tooltipItem.dataset.label + ': ' + tooltipItem.raw;
            }
          }
        }
      }
    },
    scales: {
      r: {
        suggestedMin: 0,
        suggestedMax: 5,
        ticks: {},
        pointLabels: {
          font: {
            size: 10
          }
        }
      }
    },
    layout: {
      padding: {
        top: 1,
        bottom: 1,
      }
    }
  }

終わりに

データベースのデータを反映する方法は、コントローラーやモデルを使用するため割愛させていただきました。