##【実現したい事】
Chart.jsの円グラフの各ラベルの値を、Railsから取得し円グラフに反映させたい
※１対多の関係にあり、実際の値は、親ではなく子モデルにあります
解決方法
本件、マルチポストであることを伝えておらず失礼いたしました。
gouf様のご指摘の通り、こちらで解決できました。
https://ja.stackoverflow.com/questions/67712/rails-%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e3%81%ae%e5%80%a4%e3%82%92%e5%a4%89%e6%95%b0%e3%81%a8%e3%81%97%e3%81%a6-chart-js-%e3%81%a7%e5%86%86%e3%82%b0%e3%83%a9%e3%83%95%e3%81%ab%e4%bb%a3%e5%85%a5%e3%81%97%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%9f%e3%81%84
##【環境】
※未経験からエンジニア転職を目指してオリジナルアプリを開発中の者です（学習期間約2ヶ月程度）。
・Ruby：2.6.5
・Rails:5.2.4.3
・DB設計 ※詳細は下記コード
親：Recordテーブル
子：Practiceテーブル
##【試した事】
RailsデータをJSに反映させるため、gem gonをインストールし、下記のように記述しました。
＜意図＞
①まず、各ユーザーIDでログインするよう、URLを設定
②gon.dataで、子関係にあるPracticeテーブルの属性 practice_timeを検索
③Chart.js記法に合わせて、6つのレコード分に合わせて、6.times doと記述
（gon.data << rand(100.0)入れるとなぜかエラーになるためコメントアウトしています）
controller
1 def aggregate_result
2 @record = Record.find(params[:id])
3 gon.data = Record.where(params[:practice_time])
4 6.times do
5 # gon.data << rand(100.0)
6 end
7 end
＜意図＞
①canvasで名前を記述
②script src= でCDN形式でChart.jsを取得
③JavaScriptの記法に従い、記述
結果、画像の通りにしか表示されず、何をどうすべきか分からず手が止まってしまっています。
解決方法や考え方など、参考になる情報をご教授頂ければ幸いです。
slim
1= render 'records/flash_messages'
2h1 レポート
3canvas#myPieChart
4script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"
5javascript:
6 var ctx = document.getElementById("myPieChart");
7 var myPieChart = new Chart(ctx, {
8 type: 'pie',
9 data: {
10 labels: ["サーブ練習", "フットワーク", "3球目攻撃", "台上処理","多球練習","オール"],
11 datasets: [{
12 backgroundColor: [
13 'rgba(255, 99, 132, 0.2)',
14 'rgba(54, 162, 235, 0.2)',
15 'rgba(255, 206, 86, 0.2)',
16 'rgba(75, 192, 192, 0.2)',
17 'rgba(75, 192, 192, 0.2)',
18 'rgba(242,68,172,0.2)'
19 ],
20 data: gon.data
21 }]
22 },
23 options: {
24 title: {
25 display: true,
26 text: '練習内容の内訳'
27 }
28 }
29 });
30
31= link_to '一覧に戻る', root_path, class: 'btn btn-primary'
##【コード】
Recordmodel
1class Record < ApplicationRecord
2 validates :learning_point, presence: true
3 validates :training_date, presence: true
4
5 belongs_to :user
6 has_many :practices, dependent: :destroy
7 accepts_nested_attributes_for :practices
8end
Practicemodel
1class Practice < ApplicationRecord
2 validates :practice_item, presence: true
3 validates :practice_time, presence: true
4 belongs_to :record
5end
shema
1ActiveRecord::Schema.define(version: 2020_05_25_064157) do
2
3 create_table "records", force: :cascade do |t|
4 t.string "user_id"
5 t.text "learning_point"
6 t.date "training_date"
7 t.datetime "created_at", null: false
8 t.datetime "updated_at", null: false
9 end
10
11 create_table "practices", force: :cascade do |t|
12 t.string "practice_item"
13 t.integer "practice_time"
14 t.bigint "record_id"
15 t.datetime "created_at", null: false
16 t.datetime "updated_at", null: false
17 t.index ["record_id"], name: "index_practices_on_record_id"
18 end
Q&A
自己解決
