【rails×js】chart.jsの実装

#実装すること
* chart.jsを使用してviewに円グラフを設置する。
* インスタント変数を用いて、データによって表示内容が変わるようにする。

chart.js公式: https://www.chartjs.org/docs/latest/
github: https://github.com/chartjs/Chart.js

基本的に公式を見て実装しました。

#完成形

* ユーザー詳細画面に円グラフが表示される。
* カーソルを当てると円グラフで表したい値が表示されている。<br>
(今回は、ユーザーの投稿した数/回答した数)
![gif (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/7b7413e8-5520-dc0c-c911-f98bc9e041e5.gif)

#前提
下記の機能実装済み。
・devise(今回は、memberモデル)
・投稿機能(今回は、questionモデル)

```ruby:schema.rb
ActiveRecord::Schema.define(version: 2021_05_05_122222) do

  create_table "members", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.datetime "remember_created_at"
    t.string "name", default: "", null: false
    t.text "introduction"
    t.string "image_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_members_on_email", unique: true"index_members_on_reset_password_token", unique: true
  end

  create_table "questions", force: :cascade do |t|
    t.integer "member_id", null: false
    t.string "title", default: "", null: false
    t.text "content", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["member_id"], name: "index_questions_on_member_id"
  end
end
```

#手順
① CDNのインストール
② assetsのcss/scss + jsファイルへの追記
③ viewへの記載
④ SNSボタンのサイズ変更


#実装

###1.CDNのインストール

参考: https://www.chartjs.org/docs/latest/getting-started/installation.html
下記のコードをapplication.html.erbのjsの下に記載します。

```erb:views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Answer.ly</title>
    <%= favicon_link_tag ("favicon.ico")%>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
  </head>
```
CDNとは、

###2. viewへの記載

次はviewに円グラフを表示するコードを記載します。
下記のサイトで記載あるコードを参考にしてます。
creating a chart: https://www.chartjs.org/docs/latest/#creating-a-chart

```erb:views/members/show.html.erb
<canvas id="myPieChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["質問","回答"],
        datasets: [{
           backgroundColor: [
               "#a8dba8",
               "#4ea1d3",
           ],
           data: [ <%= @member.questions.count%>, <%= @member.answers.count%> ]
        }]
     },
     options: {
       title: {
         display: true,
         text: 'Q＆A 活動割合'
       }
     }
   });
</script>
```

それぞれ簡単に説明すると、
* 1行目のcanvasは、グラフを表示する場所になります。

````erb:views/members/show.html.erb
<canvas id="myPieChart"></canvas>
```

* 4行目のdocument.getElementById("myPieChart");でcanvasのIDを指定しています。<br>
これによって、指定されたidでjs使用します。ことになります。(classで指定する方法もあるかと思います。)

````javascript:views/members/show.html.erb
var ctx = document.getElementById("myPieChart");
```
5行目では、グラフの設定をするコードです。
typeは、グラフの種類です。円グラフは、doughnutです。
https://www.chartjs.org/docs/latest/charts/doughnut.html

````js:views/members/show.html.erb
var myPieChart = new Chart(ctx, {
 type: 'doughnut',
```

6行目は、表示したい値(グラフにしたい値)等の設定を書きます。
ラベルやカラー等はいじってもらって理解した方が早いです。

重要なのは、最後の方のdateです。
ここにインスタンス変数を用いて値を表示します。
erbファイル内で書いているので、railsの書き方で大丈夫です。

```js:views/members/show.html.erb
    data: {
        labels: ["質問","回答"],
        datasets: [{
           backgroundColor: [
               "#a8dba8",
               "#4ea1d3",
           ],
           data: [ <%= @member.questions.count%>, <%= @member.answers.count%> ]
        }]
     },
```
最後にoptionsについて。
グラフには影響しませんが、タイトルがあったほうが誰が見てもわかりやすいです。

* displayは、表示するかしないです。
* textは、タイトルを書きます。

```js:views/members/show.html.erb
     options: {
       title: {
         display: true,
         text: 'Q＆A 活動割合'
       }
     }
   });
</script>
```

これで問題なく表示できたかと思います。
もしされないのであれば、turbolinksが阻害している可能性はあるので、turbolinksを無効にするか削除するかしてください。


以上です。