Rails × chart.js でサウナ活動(投稿)データに連動するラベル付きの円グラフを作ってみた。

# 0. はじめに

こんにちは、[まつけん](https://twitter.com/matsuken_web314)です。
[サウナ記録を管理するアプリ](https://totonoi.org/)(転職活動用のポートフォリオ)に組み込んだ
**投稿に連動する円グラフ**をどうやって実装したのかを解説する記事です。(下の画像参照)




![sakatugraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/2b1e7ddb-4220-b2d1-e6fb-bae959694ab5.png)


↓ポートフォリオの解説記事です↓









https://qiita.com/matsuken314/items/2ae660c7635cca726283






## この記事のゴール（とりあえず）

- [chart.js](https://www.chartjs.org/docs/latest/)の円グラフがどういう風にWebアプリに組み込まれるのか分かる
- gemの[gon](https://github.com/gazay/gon)を用いて、Controllerで定義した変数をJavaScriptで使う方法が分かる
- chart.jsの「データに連動するグラフ」の作成方法が分かる


ポートフォリオのWebアプリに動的に変化するchart.jsを使用したグラフを実装する際に苦労したので、過去の自分に教えるつもりでそのやり方をまとめました。
(主にControllerからJavaScriptへデータを受け渡すのに苦労しました) 


:::note warn
解説しないこと
- chart.jsグラフの背景色、ボーダーカラーの設定の仕方など
- Railsアプリの作成の仕方
:::

## サ活円グラフの作成背景

日頃から最高にととのった日の、<font color="red">**サウナ**</font>・<font color="blue">**水風呂**</font>・<font color="gree">**外気浴**</font>の時間を記録して、
まとめたい思いがありました。

これら最高のサ活時間の平均を円グラフとすることで、
後々入るサウナでもその平均サ活時間 (円グラフデータ) を参考に

**ととのう**ことができるのではないかと思いました。

要するに **「サ活円グラフを通して、サウナライフをより良くしよう！」**
みたいな作成背景です。


## 環境

- PC: MacBook Pro (Intel Core i9 2019)
- OS: macOS Big Sur バージョン11.5.1
- Ruby: Ruby 2.6.8
- Ruby on Rails: Ruby on Rails 6.1.4.1
- DB: PostgreSQL14.0



## まずchart.jsとは（簡単に）
良い感じのデザインのグラフがすぐに作れるオープンソースのJavaScriptライブラリです。
以下8種類のグラフ・複合グラフが利用可能。
- 折れ線グラフ
- 棒グラフ
- レーダーチャート
- 鶏頭図（polar area chart）
- ドーナツグラフ・**円グラフ**
- バブルチャート
- 散布図
- 面グラフ

今回は**円グラフ**を利用します。

[chart.js公式サイト](https://www.chartjs.org/docs/latest/)
有志によって日本語版が作られたそう▶[chart.js公式サイト（日本語翻訳版）](https://misc.0o0o.org/chartjs-doc-ja/)

↓こんな感じでグラフが簡単に作成できるJavaScriptのライブラリ↓

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRQJVgX" data-user="matsuken314" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/matsuken314/pen/GRQJVgX">
  Untitled</a> by matsuken314 (<a href="https://codepen.io/matsuken314">@matsuken314</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# 1. 円グラフの仕様（やりたかったこと）

:::note info
**やりたいこと**
マイページのユーザー投稿一覧データ（<font color="red">**サウナ**</font>と<font color="blue">**水風呂**</font>と<font color="gree">**外気浴**</font>）それぞれの平均値を円グラフとしてマイページに表示させたい。
:::

↓実際に円グラフが表示されているマイページを見てもらえるとよりイメージしやすいです↓


https://totonoi.org/users/5


![phonto.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/58c7089a-57d3-8cc6-98ae-d62861afd966.jpeg)

なので、**例えば**マイページに投稿が3つあって、

①<font color="red">サウナ</font>: 10分、<font color="blue">水風呂</font>2分、<font color="gree">外気浴</font>6分
②<font color="red">サウナ</font>: 12分、<font color="blue">水風呂</font>1分、<font color="gree">外気浴</font>8分
③<font color="red">サウナ</font>: 8分、<font color="blue">水風呂</font>3分、<font color="gree">外気浴</font>4分


とすると**円グラフにはこれら①②③の平均値を表示させたい**ので、
<font color="red">サウナ</font>: (10+12+8) / 3 = **10分**、<font color="blue">水風呂</font>(2+1+3) / 3 = **2分**、<font color="gree">外気浴</font>(6+8+4) / 3 = **6分**という表示をする処理を行います。


上の例の**数値↑**と下の円グラフの**数値↓**が違うのはご了承ください笑
![sakatugraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/2b1e7ddb-4220-b2d1-e6fb-bae959694ab5.png)



# 2. 実装の流れ

実装の流れとしては下記の通りです。

[①Gemをインストール](#gemをインストール)
[②Modelに自作メソッドを記述](#modelに自作メソッドを記述)
[③計算したグラフデータをControllerからJavaScriptに渡す記述](#計算したグラフデータをcontrollerからjavascriptに渡す記述)
[④JavaScriptで変数データを読み込み](#javascriptで変数データを読み込み)
[⑤Viewで表示](#viewで表示)

では順を追って解説していきます。

## ①Gemをインストール

:::note info
以下2つのGemをインストール。
- ControllerからJavaScriptに変数を渡せるようにするための[gon](https://github.com/gazay/gon)
- 円グラフを描くための[chart-js-rails](https://github.com/coderbydesign/chart-js-rails)
:::


Gemfileに以下の通り追記。

```ruby:Gemfile
# Gon（コントローラからJavaScriptに変数を渡せるようにする）
gem 'gon'

# chart.js（円グラフ表示）
gem 'chart-js-rails'
```
ターミナルで`bundle install`を実行し、インストール。

```
$ bundle install
```



## ②Modelに自作メソッドを記述
このパートの**目的**はModelにユーザーの<font color="red">**サウナ**</font>と<font color="blue">**水風呂**</font>と<font color="gree">**外気浴**</font>のそれぞれの平均値を返す自作メソッドを記述することです。（ロジックの詳細は割愛します）

以下がプログラムで扱う主な変数の説明です。
- `sauna_ave`・・・・ユーザーが投稿した<font color="red">**サウナ**</font>時間の合計の平均
- `water_ave`・・・・ユーザーが投稿した<font color="blue">**水風呂**</font>時間の合計の平均
- `totonoi_ave`・・・ユーザーが投稿した<font color="gree">**外気浴**</font>時間の合計の平均

これら3つの変数をまとめて配列として返す `circle_data`メソッドです。
この自作メソッドを[次の③](#計算したグラフデータをcontrollerからjavascriptに渡す記述)で使います。

```ruby:app/models/post.rb
class Post < ApplicationRecord
  def self.circle_data(user)
    sauna_ave = user.posts.average(:sauna_one).round(1)
    water_ave = user.posts.average(:water_one).round(1)
    totonoi_ave = user.posts.average(:totonoi_one).round(1)
    #以下の配列がcircle_dataを使った時の返り値
    [sauna_ave, water_ave, totonoi_ave] 
     #以上の配列がcircle_dataを使った時の返り値
  end
end
```

## ③計算したグラフデータをControllerからJavaScriptに渡す記述
**【Controllerの記述】**
このパートの**目的**は
Controller内で[②のModel](#modelに自作メソッドを記述)で計算したユーザーの
<font color="red">**サウナ**</font>と<font color="blue">**水風呂**</font>と<font color="gree">**外気浴**</font>のそれぞれの平均値データ3つをJavaScriptに渡す用に変数を定義することです。

ここで[gon](https://github.com/gazay/gon)の登場です。
JavaScript側に渡すGon用の変数を定義します。
下記のように変数の頭に`gon.`をつけます。


```ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @posts = @user.posts.order(created_at: :desc)

   # ↓　変数の頭に　gon.　をつける　↓
    gon.Totonoi_data = @posts.circle_data(@user) #ここで代入したデータをJavaScriptに渡す
   # ↑　変数の頭に　gon.　をつける　↑

  end
end
```
こうすることでグラフデータをControllerからJavaScriptに渡す準備は整いました。
[gon](https://github.com/gazay/gon)、めっちゃ便利ですよね。


## ④JavaScriptで変数データを読み込み
:::note info
ここでは以下の3点がポイントです。
- 円グラフを使用するための記述
- <font color="red">**サウナ**</font>, <font color="blue">**水風呂**</font>, <font color="gree">**外気浴**</font>の変数データを読みこむための記述
- 円グラフに<font color="red">**サウナ**</font>, <font color="blue">**水風呂**</font>, <font color="gree">**外気浴**</font>の文字ラベルと動的な数値を表示させるための記述


順を追って、解説していきます。
これら３つの説明以外は省略しています。(背景色の付け方など)
:::

### 最終的なJavaScriptのコード
```javascript:app/javascript/packs/totonoi_circle.js
document.addEventListener('turbolinks:load', () => {
   var ctx = document.getElementById('myChart').getContext('2d');
   var dataLabelPlugin = {
    afterDatasetsDraw: function (chart, easing) {
        var ctx = chart.ctx;
        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    ctx.fillStyle = '#333';

                    var fontSize = 14;
                    var fontStyle = 'bold';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 
                    var dataString = chart.data.labels[index]+`\r\n`+dataset.data[index].toString()+'分';
 
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) );
                   })
               }
           })
       }
   }

   var myChart = new Chart(ctx, {
       type: 'pie',   
       data:{
               labels: ['サウナ', '水風呂', '外気浴'], 
               datasets: [{
                   label: '# of Votes',
                   data: gon.Totonoi_data,
                   backgroundColor: [
                       'rgba(255, 99, 132, 0.2)',
                       'rgba(54, 162, 235, 0.2)',
                       'rgba(97,195,89, 0.2)'
                   ],
                   borderColor: [
                       'rgba(255, 99, 132, 1)',
                       'rgba(54, 162, 235, 1)',
                       'rgba(97,195,89, 1)'
                   ],
                   borderWidth: 1
               }]
        },
        plugins: [dataLabelPlugin]  
   });
   draw_graph();
})
```

### ④-1 円グラフを使用するための記述

下記のように
データセット`type`に対して`pie`を指定することで、
円グラフを使用することができます。
**注目箇所はコメントアウトして、目立たせています。**

```javascript
document.addEventListener('turbolinks:load', () => {
   var ctx = document.getElementById('myChart').getContext('2d');
   var myChart = new Chart(ctx, {

       // ↓ここ注目↓ 
       type: 'pie',   // 円グラフを使用するため「type」のプロパティを「pie」に指定する
       // ↑ここ注目↑ 

       data:{
            datasets: [{
                label: '# of Votes',
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(97,195,89, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(97,195,89, 1)'
                ],
                borderWidth: 1
            }]
       }
   });
   draw_graph();
})
```

こうすることで円グラフを使用するための準備は完了です。
他の種類のグラフも表示できるので気になる方は[こちら](https://misc.0o0o.org/chartjs-doc-ja/charts/)からチェックしてみてください。


### ④-2 <font color="red">**サウナ**</font>, <font color="blue">**水風呂**</font>, <font color="gree">**外気浴**</font>の変数データを読みこむための記述

[Controllerで代入した](#計算したグラフデータをcontrollerからjavascriptに渡す記述)
<font color="red">**サウナ**</font>, <font color="blue">**水風呂**</font>, <font color="gree">**外気浴**</font>の変数データの`gon.Totonoi_data`を
下記のように`data`→`datasets`→`data`のプロパティに指定します。
**注目箇所はコメントアウトして、目立たせています。**

```javascript
document.addEventListener('turbolinks:load', () => {
   var ctx = document.getElementById('myChart').getContext('2d');
   var myChart = new Chart(ctx, {
       type: 'pie',   
       data:{
            datasets: [{
                label: '# of Votes',

                // ↓追記する所↓ 
                data: gon.Totonoi_data, //ここの「data」のプロパティを「gon.Totonoi_data」にする
                //  ↑追記する所↑

                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(97,195,89, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(97,195,89, 1)'
                ],
                borderWidth: 1
            }]
       }
   });
   draw_graph();
})

```
こうすることで、Controllerで`gon.Totonoi_data`に代入した値をJavaScriptで読み込むことができます。

### ④-3 円グラフに<font color="red">**サウナ**</font>, <font color="blue">**水風呂**</font>, <font color="gree">**外気浴**</font>の文字ラベルと動的な数値を表示させるための記述

④-2までの状態だと、Viewファイルの記述をしても下画像のように**円グラフにラベルが付与されない状態**です。
今回はラベルを加えて、リッチなデザインにしたいので、もう少し僕と一緒に頑張りましょう笑。
そのほうがデザイン性も高くなるので。
![スクリーンショット 2022-05-28 17.15.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/1eff3aae-433e-b40b-0b34-0714fcf5a7b3.png)

下記3点で**円グラフに文字ラベルと数値を表示させるための記述**は完了です。
- `dataLabelPlugin`を、円グラフ作成のchart.jsプログラムより先に定義する
- `data`→`labels`に対して、`['サウナ', '水風呂', '外気浴']`を記述
- 先に定義した`dataLabelPlugin`をchart.jsプログラムで次のように記述して組み込む→`plugins: [dataLabelPlugin]`


**↓`dataLabelPlugin`の書き方は下記サイト参考。↓**

http://www.kogures.com/hitoshi/javascript/chartjs/datalabel.html




以上のことを踏まえたのが下記のコードです。(最終的なJavaScriptのコード)
**注目箇所はコメントアウトして、目立たせています。**

```javascript:最終的なJavaScriptのコード
document.addEventListener('turbolinks:load', () => {
   var ctx = document.getElementById('myChart').getContext('2d');

   // まずはdataLabelPluginをchart.jsプログラムより先に定義する
   // ↓以下が追記する所↓
   var dataLabelPlugin = {
    afterDatasetsDraw: function (chart, easing) {
        var ctx = chart.ctx;
        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    ctx.fillStyle = '#333';

                    var fontSize = 14;
                    var fontStyle = 'bold';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 
                    var dataString = chart.data.labels[index]+`\r\n`+dataset.data[index].toString()+'分';
 
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) );
                   })
               }
           })
       }
   }
   // ↑以上が追記する所↑

   var myChart = new Chart(ctx, {
       type: 'pie',   
       data:{
                // 表示する文字ラベルを次のように指定する。
                // ↓以下が追記する所↓ 
               labels: ['サウナ', '水風呂', '外気浴'],  //ここの「labels」のプロパティを「　['サウナ', '水風呂', '外気浴']　」にする
                // ↑以上が追記する所↑

               datasets: [{
                   label: '# of Votes',
                   data: gon.Totonoi_data,
                   backgroundColor: [
                       'rgba(255, 99, 132, 0.2)',
                       'rgba(54, 162, 235, 0.2)',
                       'rgba(97,195,89, 0.2)'
                   ],
                   borderColor: [
                       'rgba(255, 99, 132, 1)',
                       'rgba(54, 162, 235, 1)',
                       'rgba(97,195,89, 1)'
                   ],
                   borderWidth: 1
               }]
        },

        //上で定義したdataLabelPluginを次のように組み込む
        // ↓以下が追記する所↓ 
        plugins: [dataLabelPlugin]  
        // ↑以上が追記する所↑ 

   });
   draw_graph();
})
```


こうすることでようやく、JavaScriptで
円グラフに<font color="red">**サウナ**</font>, <font color="blue">**水風呂**</font>, <font color="gree">**外気浴**</font>の文字ラベルと**動的な数値**を表示させるための**準備**ができました:raised_hands:
[次のチャプター](#viewで表示)でViewファイルの設定をすることでようやく下画像のように円グラフの完成形になります。もう一息！
![スクリーンショット 2022-05-29 15.40.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/cd50459b-9e44-a60e-fc1c-726ce2375b58.png)



**↓`dataLabelPlugin`の書き方は下記サイト参考。↓**

http://www.kogures.com/hitoshi/javascript/chartjs/datalabel.html



## ⑤Viewで表示
:::note info
ここでは以下の2点がポイントです。
- [gon](https://github.com/gazay/gon)を使用するViewファイルに`<%= Gon::Base.render_data %>`を記述
- Viewファイルの円グラフを表示したい箇所に`<canvas>`タグを記述


順を追って、解説していきます。
:::

### 最終的なViewファイルのコード
```erb:app/views/users/show.html.erb
<%= Gon::Base.render_data %>
 <canvas id= "myChart"></canvas>
```

### ⑤-1 gonを使用するViewファイルに`<%= Gon::Base.render_data %>`を記述


Gonを用いて、[Controllerで定義した変数データ](#計算したグラフデータをcontrollerからjavascriptに渡す記述)を使用するViewファイルに以下の記述は<font color = "red">必須</font>です
`<%= Gon::Base.render_data %>`

この記述が無い場合、データと連動しないグラフが完成します:innocent:(笑)

```erb:app/views/users/show.html.erb
<!--  動的データの円グラフを表示するViewファイルに以下を追加  -->
<%= Gon::Base.render_data %>
<!--  動的データの円グラフを表示するViewファイルに以上を追加  -->
```

僕はこの記述を忘れて、
「なんでデータがグラフに連動しないんだろう。JavaScriptの記述に問題があるのだろうか」と考え、
JavaScriptの書き方に問題点がないか数時間ほど探して時間を潰したので(笑)、同じ思いをする人を１人でも減らしたいです。笑


### ⑤-2 Viewファイルの円グラフを表示したい箇所に`<canvas>`タグを記述
円グラフを表示したい箇所に`<canvas>` タグを記述し、`id`にJavaScriptファイルで下記のように定義した`myChart`を指定します。
`var myChart = new Chart(ctx, {　省略・・・・`


```erb:app/views/users/show.html.erb
<%= Gon::Base.render_data %>

<!-- 円グラフを表示するViewファイルの任意の箇所に以下を追加  -->
 <canvas id= "myChart"></canvas>
<!-- 円グラフを表示するViewファイルの任意の箇所に以上を追加  -->
```
Viewファイルの記述は最低限これだけでOKです笑
これでようやく円グラフを**実際に表示**することができます
![スクリーンショット 2022-05-29 15.40.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/cd50459b-9e44-a60e-fc1c-726ce2375b58.png)


以上の円グラフを表示するまでの流れをもう1度まとめると下記の通りです。

[①Gemをインストール](#gemをインストール)
[②Modelに自作メソッドを記述](#modelに自作メソッドを記述)
[③計算したグラフデータをControllerからJavaScriptに渡す記述](#計算したグラフデータをcontrollerからjavascriptに渡す記述)
[④JavaScriptで変数データを読み込み](#javascriptで変数データを読み込み)
[⑤Viewで表示](#viewで表示)



# 3. Gon(Gem)を扱う上での注意事項
仕様上、htmlソース内に変数が表示されるので、セキュリティ上隠す必要がある場合はGonは使わないほうがいいです。


下記画像のように検証ツールを開くとがっつり定義した変数の`gon.Totonoi_data`が表示されます。
![スクリーンショット 2022-05-22 17.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/bd756f0a-1ae0-2dc0-2bfa-870c6643bc09.png)



# 4. まとめ

今回は作ったものはデータに連動する**円グラフ**でしたが、`chart.js`で扱っている折れ線グラフや棒グラフなどでも同じようなことができます。
いろんなアプリに「データに連動するグラフ」は応用できると思うので、本記事がそれのサポートになれば幸いです。
最後までご覧いただきありがとうございました！

# 余談（よゆーがあったらやって欲しいくらい）
[Gemをインストールした時点](#gemをインストール)で適当なViewファイルに以下のように記述すると、
投稿とは連動しませんが**良い感じの棒グラフができる**ので（下に画像あります）、余裕がある方は息抜きがてらやってみてください。

また、パラメータをいじることで、`chart.js`の**感覚**がつかめてきます。

「感覚って何や！」ってなるかもしれませんが、
「どこをいじったらどういう感じで変わるのか」と言ったところでしょうか。

例えば`data`や`backgroundColor`などの
数字を変えるとグラフの色や大きさが変わり、

「ああ、こんな感じね。なるほど理解。」

と理解度が上がったことによる自己肯定感も少し上がります。（僕だけかも知れませんが笑、、、）

```html:適当なviewファイル
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
/*これより下のパラメーターをいじってみてchart.jsの感覚を掴んでみてください！！*/
        labels: ["赤", "青", "黄", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [7, 8, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>
```

↓こんな感じの棒グラフが出てくるので、コーヒーでも飲みながらやってみてください↓

![スクリーンショット 2022-05-05 19.33.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/88611a85-55ec-e5ce-12ba-7dfcf0c5661d.png)

一応codepenでもchart.jsのパラメータをいじれるようにしときました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRQJVgX" data-user="matsuken314" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/matsuken314/pen/GRQJVgX">
  Untitled</a> by matsuken314 (<a href="https://codepen.io/matsuken314">@matsuken314</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 参考サイト
https://qiita.com/Y_uuu/items/ef107a02c27836696545#%E6%8A%98%E3%82%8C%E7%B7%9A%E3%82%B0%E3%83%A9%E3%83%95%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B

http://www.kogures.com/hitoshi/javascript/chartjs/datalabel.html

https://qiita.com/jiko797torayo/items/f8962bec2eefbf0aacd9

https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296

https://qiita.com/taquaki-satwo/items/b2206e67f37fa878d909