【JavaScript】Chart.jsを使ってみた

<br>
こんにちは、Reikaです。<br>私は現在、アプレンティスの5期生として日々勉強に励んでいます。<br>

https://apprentice.jp/lp

現在開発中のプロジェクトで、 selectボックスの数値を **レーダーチャート** に反映させるを実装しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3698182/24fae404-7807-edd5-ea3b-ae0f2d9abdae.png" width="70%">

<br>その際に **Chart.js** を使用したので、この経験を通じて学んだことについて、記述していきます。<br>


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

https://www.chartjs.org/

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

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

### 2.グラフ描写の準備

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

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

### 3.作成

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

```JavaScript
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.要素の指定
グラフの種類や軸のラベル名、色など要素を指定しながら作成します。<br>
- type
グラフの種類の指定です。私はレーダーチャートのため、radarと記載。
```JavaScript
  type: 'radar',
```

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

- data
軸のラベル名、初期値、背景色、境界線の太さなど、デザイン部分を指定。<br>私は2つのグラフを重ねた描写にしたので、２つ分記載。
```JavaScript
  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では指定できない要素を指定します。<br>アニメーションの指定や特定の場合の表示方法、フォントのサイズなどを設定します。<br>私は、FBデータセットの場合は特定のコメントを表示し、それ以外の場合はデータセットラベルと値を表示するようにしました。

```JavaScript
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,
      }
    }
  }
```

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