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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

データベース設計

データベース設計はデータベースの論理的や物理的な部分を特定する工程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2012閲覧

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

ikutyan46

総合スコア18

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

データベース設計

データベース設計はデータベースの論理的や物理的な部分を特定する工程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/16 12:26

編集2020/07/30 14:23

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

controller

1 def aggregate_result 2 @record = Record.find(params[:id]) 3 gon.data = Record.where(params[:practice_time]) 4 6.times do 5 # gon.data << rand(100.0) 6 end 7 end

<意図>
①canvasで名前を記述
②script src= でCDN形式でChart.jsを取得
③JavaScriptの記法に従い、記述

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

イメージ説明

slim

1= render 'records/flash_messages' 2h1 レポート 3canvas#myPieChart 4script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" 5javascript: 6 var ctx = document.getElementById("myPieChart"); 7 var myPieChart = new Chart(ctx, { 8 type: 'pie', 9 data: { 10 labels: ["サーブ練習", "フットワーク", "3球目攻撃", "台上処理","多球練習","オール"], 11 datasets: [{ 12 backgroundColor: [ 13 'rgba(255, 99, 132, 0.2)', 14 'rgba(54, 162, 235, 0.2)', 15 'rgba(255, 206, 86, 0.2)', 16 'rgba(75, 192, 192, 0.2)', 17 'rgba(75, 192, 192, 0.2)', 18 'rgba(242,68,172,0.2)' 19 ], 20 data: gon.data 21 }] 22 }, 23 options: { 24 title: { 25 display: true, 26 text: '練習内容の内訳' 27 } 28 } 29 }); 30 31= link_to '一覧に戻る', root_path, class: 'btn btn-primary'

##【コード】

Recordmodel

1class Record < ApplicationRecord 2 validates :learning_point, presence: true 3 validates :training_date, presence: true 4 5 belongs_to :user 6 has_many :practices, dependent: :destroy 7 accepts_nested_attributes_for :practices 8end

Practicemodel

1class Practice < ApplicationRecord 2 validates :practice_item, presence: true 3 validates :practice_time, presence: true 4 belongs_to :record 5end

shema

1ActiveRecord::Schema.define(version: 2020_05_25_064157) do 2 3 create_table "records", force: :cascade do |t| 4 t.string "user_id" 5 t.text "learning_point" 6 t.date "training_date" 7 t.datetime "created_at", null: false 8 t.datetime "updated_at", null: false 9 end 10 11 create_table "practices", force: :cascade do |t| 12 t.string "practice_item" 13 t.integer "practice_time" 14 t.bigint "record_id" 15 t.datetime "created_at", null: false 16 t.datetime "updated_at", null: false 17 t.index ["record_id"], name: "index_practices_on_record_id" 18 end

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikutyan46

2020/07/30 14:25

goufさん、ご指摘ありがとうございました。今後、マルチポストは極力避けること、マルチポストするにしても、頂いたURLを基に最大限配慮するように致します。
gouf

2020/07/31 01:43

解決した場合、他者の回答ないし自己回答として内容をまとめて それをベストアンサーに設定することで、この質問を解決済みにすることができます
guest

回答1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問