実装すること

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

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

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

完成形

ユーザー詳細画面に円グラフが表示される。
カーソルを当てると円グラフで表したい値が表示されている。
(今回は、ユーザーの投稿した数/回答した数)

前提

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

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の下に記載します。

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

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は、グラフを表示する場所になります。

views/members/show.html.erb

<canvas id="myPieChart"></canvas>

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

views/members/show.html.erb

var ctx = document.getElementById("myPieChart");

5行目では、グラフの設定をするコードです。
typeは、グラフの種類です。円グラフは、doughnutです。
https://www.chartjs.org/docs/latest/charts/doughnut.html

views/members/show.html.erb

var myPieChart = new Chart(ctx, {
 type: 'doughnut',

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

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

views/members/show.html.erb

    data: {
        labels: ["質問","回答"],
        datasets: [{
           backgroundColor: [
               "#a8dba8",
               "#4ea1d3",
           ],
           data: [ <%= @member.questions.count%>, <%= @member.answers.count%> ]
        }]
     },

最後にoptionsについて。
グラフには影響しませんが、タイトルがあったほうが誰が見てもわかりやすいです。

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

views/members/show.html.erb

     options: {
       title: {
         display: true,
         text: 'Q＆A 活動割合'
       }
     }
   });
</script>

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

以上です。

【rails×js】chart.jsの実装

実装すること

完成形

前提

手順

実装

1.CDNのインストール

2. viewへの記載