質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

Rails Chart.jsに変数入れて表示させたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,417

score 18

【実現したい事】

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

解決方法

本件、マルチポストであることを伝えておらず失礼いたしました。
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)入れるとなぜかエラーになるためコメントアウトしています)

  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

<意図>
①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'

【コード】

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
class Practice < ApplicationRecord
  validates :practice_item, presence: true
  validates :practice_time, presence: true
  belongs_to :record
end
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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

回答 1

check解決した方法

0

本件、goufさんのご指摘の通り、こちらで解決いたしました。ありがとうございました!

https://ja.stackoverflow.com/questions/68123/chart-js%e3%81%ae%e3%83%a9%e3%83%99%e3%83%ab%e3%81%a8%e5%80%a4%e3%81%8c%e5%af%be%e5%bf%9c%e3%81%97%e3%81%a6%e3%81%84%e3%81%aa%e3%81%84%e5%95%8f%e9%a1%8c%e3%82%92%e8%a7%a3%e6%b1%ba%e3%81%97%e3%81%9f%e3%81%84?noredirect=1#comment75810_68123

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る