1

実現したい事

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
1

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。