

### 実現したい事

Chart.jsの円グラフの各ラベルの値を、Railsから取得し円グラフに反映させたい  
※１対多の関係にあり、実際の値は、親ではなく子モデルにあります

### 環境

・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)入れるとなぜかエラーになるためコメントアウトしています）

[code]

      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
    
[/code]

**aggregate_result.html.slim**  
①canvasで名前を記述  
②script src= でCDN形式でChart.jsを取得  
③JavaScriptの記法に従い、記述

結果、画像の通りにしか表示されず、何をどうすべきか分からず手が止まってしまっています。  
解決方法や考え方など、参考になる情報をご教授頂ければ幸いです。

[![画像の説明をここに入力](https://i.stack.imgur.com/goG8U.png)](https://i.stack.imgur.com/goG8U.png)

[code]

    = 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'
    
    
[/code]

### コード

**Recordモデル**

[code]

    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
    
[/code]

**Practiceモデル**

[code]

    class Practice < ApplicationRecord
      validates :practice_item, presence: true
      validates :practice_time, presence: true
      belongs_to :record
    end
    
[/code]

**shema.rb**

[code]

    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
    
[/code]


CC BY-SA 4.0
2020-06-16T06:55:28.210
67712
2020-06-17T00:34:58.423
2020-06-17T00:34:58.423
3060
39475
question
javascript ruby-on-rails ruby chart.js
Rails のデータの値を変数として Chart.js で円グラフに代入して表示させたい