Chart.jsの使い方のきほん

# Chart.jsを使ってグラフの描画

Chart.jsはJavaScriptでグラフを描画するためのライブラリです。  
以前少しだけ使用したことがあったのですが、もう一度使い方をおさらいしようと思い、勉強ついでにメモ。  
これから使おうと思っている方の参考になればと思います。  

<https://www.chartjs.org/>  

## バージョン

* Chart.js 3.9.1  

## 使い方

### インストール

npmを使用してインストールするか、CDNを利用します。  
今回はCDNで。  

```html
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
```

```shell
# npmを使用する場合はこのコマンドを実行する
npm install chart.js
```

### 描画領域の準備

グラフ描画領域は、`canvas`タグで指定することができます。  

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

canvas要素のコンテキストを取得して、これに描画のための情報をセットしていきます。  

```js
let ctx = document.getElementById('chart');
```

## 描画に必要な要素

Chart.jsでは、`type`, `data`, `options`の3要素を指定してグラフの描画を行います。  

### type

`type`ではグラフの種類を指定します。  
typeで定めた値によって、どの形でグラフが描画されるのかが決定します。  

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

### data

`data`ではグラフに表示するラベルや、データなどの値を設定します。  
dataにはさまざまなプロパティを設定することができます。  
以下、プロパティの一例です。  

* labels  
グラフのX軸のラベルを設定する。  

* datasets  
グラフの色やデータそのものの値(配列)を設定する。  
グラフを複数描画する場合はその分だけ配列の中にオブジェクトを設定する。  

* label  
グラフのラベル(何のグラフであるかを示す)を設定する。  

* backgroundColor  
線グラフなら点の部分、棒グラフなら棒の部分の色を設定する。  

* borderColor  
線グラフなら線の部分、棒グラフなら棒の境界線の部分の色を設定する。  

### options

`options`ではアニメーションの設定やX軸・Y軸の設定など、グラフに関するオプション設定を変更することができます。(以下は一例)  

* animation  
グラフ描画時のアニメーションを設定する。  

  * duration  
  アニメーションにかかる秒数(ミリ秒)  

  * easing  
  アニメーションの種類  

* scales  
軸に関する値を設定する。  
    * scaleLabel  
    軸ラベルについて設定する。　　
    * ticks  
    目盛りについて設定する。  

## 描画してみる

今回はよく見かけるであろう線グラフ(`line`)と棒グラフ(`bar`)、そして私自身描いたことのなかった鶏頭図(`polarArea`)を描画してみようと思います。  

### 線グラフ

```html
<body>
    <canvas id="lineChart"></canvas>
    <script>
        let lineCtx = document.getElementById("lineChart");
        // 線グラフの設定
        let lineConfig = {
          type: 'line',
          data: {
            // ※labelとデータの関係は得にありません
            labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            datasets: [{
              label: 'Red',
              data: [20, 35, 40, 30, 45, 35, 40],
              borderColor: '#f88',
            }, {
              label: 'Green',
              data: [20, 15, 30, 25, 30, 40, 35],
              borderColor: '#484',
            }, {
              label: 'Blue',
              data: [30, 25, 10, 5, 25, 30, 20],
              borderColor: '#48f',
            }],
          },
          options: {
            scales: {
              // Y軸の最大値・最小値、目盛りの範囲などを設定する
              y: {
                suggestedMin: 0,
                suggestedMax: 60,
                ticks: {
                  stepSize: 20,
                }
              }
            },
          },
        };
        let lineChart = new Chart(lineCtx, lineConfig);
    </script>
</body>
```

(ブラウザで表示  )
![スクリーンショット 2022-10-28 155132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/bb016771-71d2-9684-302f-bbe7dde81412.png)

### 棒グラフ  

```html
<body>
    <canvas id="barChart"></canvas>
    <script>
        // 棒グラフの設定
        let barCtx = document.getElementById("barChart");
        let barConfig = {
          type: 'bar',
          data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
              data: [10, 19, 6, 8, 2, 11],
              label: 'label',
              backgroundColor: [  // それぞれの棒の色を設定(dataの数だけ)
                '#ff0000',
                '#0000ff',
                '#ffff00',
                '#008000',
                '#800080',
                '#ffa500',
              ],
              borderWidth: 1,
            }]
          },
        };
        let barChart = new Chart(barCtx, barConfig);
    </script>
</body>
```

(ブラウザで表示)  
![スクリーンショット 2022-10-28 155132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/0b9ec2c2-bf4f-ddf8-0306-5c8293d9ff91.png)

### 鶏頭図

```html
<body>
    <canvas id="polarChart"></canvas>
    <script>
        // 鶏頭図の設定
        let polarCtx = document.getElementById("polarChart");
        let polarConfig = {
          type: 'polarArea',
          data: {
            labels: ['April','May','June','July','August'],
            datasets: [{
              label: '月別結果',
              data: [7, 10, 9, 4, 5],
              backgroundColor: [
                '#ff0000',
                '#0000ff',
                '#ffff00',
                '#008000',
                '#ffa500',
              ]
            }]
          },
        };
        let polarChart = new Chart(polarCtx, polarConfig);
    </script>
</body>
```

(ブラウザで表示)  
![スクリーンショット 2022-10-28 155132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/152ea3dd-7a10-8062-f81b-de034c8fba06.png)

## おわり

「鶏頭図(けいとうず)」という言葉、Chart.jsを使っているときにはじめて聞きました。  
<https://dictionary.goo.ne.jp/word/%E9%B6%8F%E9%A0%AD%E5%9B%B3/>