Rubyのchart.js実装について

#■前提・実現したいこと
railsにて、DBのデータをグラフに反映させたいです。
chartkick→chart.jsに実装を切り替えてグラフの表示までは辿り着いたのですが、どうしてもDBデータが反映されず
困っております。
お恥ずかしい限りではございますがお力添えを頂きたく投稿させて頂きました。
何卒、よろしくお願いします！
#■発生している問題・エラーメッセージ
エラーは何も表示されないのですが、data[]内をpractice_timeに変更するとグラフの表示が消えてしまいます。
#■該当のソースコード

□ビュー【record/index.html.erb】□
<div class="main-record">
  <div class="record-post">
    <h2><%= link_to "新規で記録する", new_record_path ,class: :record_btn %><br /></div></h2>
    <h2><%= "#{current_user.nickname}さんの練習記録" %></h2>
    <div class="record_bar">
      <canvas id="myBarChart" width="1000" height="500"></canvas>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
      <script>
        practice_time = <% @practice_time %>
        var ctx = document.getElementById("myBarChart");
        var myBarChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['4月1日', '4月2日', '4月3日', '4月4日', '4月5日', '4月6日', '4月7日'],
            datasets: [
              {
                label: '練習時間',
                data: [practice_time],
                backgroundColor: "rgb(175,238,238)"
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: '練習時間'
            },
            scales: {
              yAxes: [{
                ticks: {
                  suggestedMax: 120,
                  suggestedMin: 0,
                  stepSize: 60,
                  callback: function(value, index, values){
                    return  value +  '分'
                  }
                }
              }]
            },
          }
        });
      </script>
    </div>    
</div>

□ コントローラー【records_controller.rb】□
class RecordsController < ApplicationController
  # before_action :task_string, only: [:create]
  def index 
  end
  def new
    @record = Record.new
  end
  def create
    @record = Record.new(record_params)
    if @record.save
      redirect_to records_path
    else
      render :new
    end
  end
  def show
    @record = Record.find(params[:id])
    @practice_time = @record.practice_time 
  end
  private
  def record_params
    params.require(:record).permit(:practice_time, :ball, :content, check:[]).merge(user_id: current_user.id)
  end
end

□ルーティング（routes.rb）□
Rails.application.routes.draw do
  devise_for :users, controllers: { registrations: 'users/registrations', sessions: 'users/sessions'}
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'tops#index' 
  resources :records, only: [:index, :new, :create, :show]
  resources :articles do
    resources :comments, only: :create
  end
  resources :users, only: :show
end

#■試したこと
①コントローラーの記述追記（showアクションを追加）
②ビュー　showアクションのインスタンス変数を追記
③ルーティングのresourcesにshowアクションを追記
#■補足情報（FW/ツールのバージョンなど）
・rails：6.0.0
・SequelPro：5.6.51
・recordsテーブルの画像（以下）
https://gyazo.com/00e1b7ea259acd56af31275ab80db607

行動規範の内容に同意します

回答1件

javascript
1practice_time = <% @practice_time %>

この出力結果で、JavaScriptとしての文法には整合するのでしょうか。HTMLを見て確認する必要があります。

投稿2021/04/20 11:36

maisumakun

総合スコア146018

hirokazu.nakao

2021/04/20 11:54

ご質問頂きありがとうございます。 HTMLと言われているのは添付になりますでしょうか？ https://gyazo.com/a4564d1c4035f0fec7c9fd4c384de70a

maisumakun

2021/04/20 11:56

いえ、ブラウザに出力後の形を確認してください。

hirokazu.nakao

2021/04/20 12:52

失礼しました。出力は以下の様になっております。ご指摘の通り、practice_time = <% @practice_time %>の場合、データは何も反映されません。 ■practice_time = <% @practice_time %>記述無し　data:直接値入力の場合 https://gyazo.com/01afd5a5de1480b8ef308b655de270d0 ■practice_time = <% @practice_time %>記述有り data:practice_timeの場合 https://gyazo.com/724c4f1b77d92f2e68460673253a5933

maisumakun

2021/04/20 13:05

ブラウザに出力後のHTMLソースはどのようになっていますか？

hirokazu.nakao

2021/04/20 13:21

何度もすみません。以下画像の様になっております。 https://gyazo.com/3ad97741705c821141d69b584463a1ae

maisumakun

2021/04/20 13:32

よく見たら、<% @practice_time %>と<%=ではないので、このままでは何も出力されませんね。

hirokazu.nakao

2021/04/20 14:09

<%=に変更しましたが変化ございませんでした。また、以下の記述に変更するとエラーメッセージが表示されました。 ①<%= @record %> 表示に変化なし ②<%= @record.practice_time %> https://gyazo.com/08b691aa78a8e28e5525357941a1baf7

maisumakun

2021/04/20 14:14

「practice_time =」は消してしまったのですか？

maisumakun

2021/04/20 14:18

そして、なぜ素直に<%= @practice_time %>と書き換えなかったのかも気になりました。

hirokazu.nakao

2021/04/21 00:15

言葉足らずでした。試した内容は以下となります。①②③いずれも表示に変化無し。④⑤はエラーメッセージが表示されました。 ①practice_time = <% @practice_time %> → practice_time = <%= @practice_time %>に変更 ②practice_time = <% @practice_time %> → practice_time = <%= @record %>に変更 ③practice_time = <% @practice_time %> → practice_time = <%= @record.practice_time %>に変更 ④practice_time = <% @practice_time %> → <%= @record %>に変更 ⑤practice_time = <% @practice_time %> → <%= @record.practice_time %>に変更

maisumakun

2021/04/21 00:56

> ①②③いずれも表示に変化無し。出力されるHTMLのコードを確認しての話ですか？

maisumakun

2021/04/21 00:58

> ④⑤はエラーメッセージが表示されました。エラーは「出た」「出ない」の1ビットの情報ではありません。どの箇所にどんなエラーが出たかも情報をお願い致します。

hirokazu.nakao

2021/04/21 05:31

2021/04/21 09:15説明内容の③と⑤が間違えておりました。失礼しました。 ①〜⑤のVScode記述内容と表示されたHTMLコード・エラーメッセージを添付します。 ①のHTMLソースコード https://gyazo.com/dbaee17b3e4536d3a5909aba5244a7bc ②のHTMLソースコード https://gyazo.com/86f655689cc18661518ddc4903f7187e ③エラーメッセージ（ブラウザリロード時に発生） https://gyazo.com/6089c4bd4659aea426e76d1c40f70c2e ④のHTMLソースコード https://gyazo.com/8776d3c69b3d15b6e312e7f9db31c17c ⑤エラーメッセージ（ブラウザリロード時に発生） https://gyazo.com/270721475c6e71191d52e197f64f7676

maisumakun

2021/04/21 05:38

3のエラーからすると、@record自体がnilのようです。

maisumakun

2021/04/21 05:41

（まずはJavaScriptに混ぜ込んで動かすというところは後回しにして、目的の値を「表示」することをやってみてはどうでしょうか？）

hirokazu.nakao

2021/04/21 07:04

分かりました。まずは表示が出来る様に実装試してみます。進捗して、新たなに不明点が出た場合は改めて相談させてください????

行動規範の内容に同意します