実現したい事
Chart.jsの円グラフの各ラベルの値を、Railsから取得し円グラフに反映させたい
※1対多の関係にあり、実際の値は、親ではなく子モデルにあります
環境
・Ruby:2.6.5
・Rails:5.2.4.3
・DB設計 ※詳細は下記コード
親:Recordテーブル
子:Practiceテーブル
試した事
RailsデータをJSに反映させるため、gem gonをインストールし、下記のように記述しました。
Controller
意図
①まず、各ユーザーIDでログインするよう、URLを設定
②gon.dataで、子関係にあるPracticeテーブルの属性 practice_timeを検索
③Chart.js記法に合わせて、6つのレコード分に合わせて、6.times doと記述
(gon.data << rand(100.0)入れるとなぜかエラーになるためコメントアウトしています)
def aggregate_result
@record = Record.find(params[:id])
gon.data = Record.where(params[:practice_time])
6.times do
# gon.data << rand(100.0)
end
end
aggregate_result.html.slim
①canvasで名前を記述
②script src= でCDN形式でChart.jsを取得
③JavaScriptの記法に従い、記述
結果、画像の通りにしか表示されず、何をどうすべきか分からず手が止まってしまっています。
解決方法や考え方など、参考になる情報をご教授頂ければ幸いです。
= render 'records/flash_messages'
h1 レポート
canvas#myPieChart
script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"
javascript:
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["サーブ練習", "フットワーク", "3球目攻撃", "台上処理","多球練習","オール"],
datasets: [{
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(75, 192, 192, 0.2)',
'rgba(242,68,172,0.2)'
],
data: gon.data
}]
},
options: {
title: {
display: true,
text: '練習内容の内訳'
}
}
});
= link_to '一覧に戻る', root_path, class: 'btn btn-primary'
コード
Recordモデル
class Record < ApplicationRecord
validates :learning_point, presence: true
validates :training_date, presence: true
belongs_to :user
has_many :practices, dependent: :destroy
accepts_nested_attributes_for :practices
end
Practiceモデル
class Practice < ApplicationRecord
validates :practice_item, presence: true
validates :practice_time, presence: true
belongs_to :record
end
shema.rb
ActiveRecord::Schema.define(version: 2020_05_25_064157) do
create_table "records", force: :cascade do |t|
t.string "user_id"
t.text "learning_point"
t.date "training_date"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
create_table "practices", force: :cascade do |t|
t.string "practice_item"
t.integer "practice_time"
t.bigint "record_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.index ["record_id"], name: "index_practices_on_record_id"
end