#実装すること
- 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を指定しています。<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を無効にするか削除するかしてください。
以上です。