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

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

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

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

Ruby on Rails

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

JavaScript

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

Q&A

0回答

1578閲覧

chart.jsのグラフにユーザが入力した値を反映させたい

退会済みユーザー

退会済みユーザー

総合スコア0

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/04/30 12:44

htmlで登録ボタンを押し値が保存されるとグラフが表示されるようになっており、そのグラフの表示画面に更新ボタンがありそのボタンを押すと先ほど入力した最新の値が追加されるといった流れになっています。今できているところがユーザが入力した値をデータベースに保存しjsにajax通信のjson形式でdoneに返すことはできたがその値をグラフに反映することができないのでどうするべきか教えて頂きたい。

html

1 2<!DOCTYPE html> 3 <html lang="ja"> 4 5 <head> 6 <meta charset="utf-8"> 7 <title>グラフ</title> 8 </head> 9 <body> 10 <canvas id="myLineChart" width="200" height="100"></canvas> 11 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> 12 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 13 <script> 14 $(function(){ 15 // function buildJS(posts){ 16 var ctx = document.getElementById("myLineChart"); 17 var myLineChart = new Chart(ctx, { 18 type: 'line', 19 data: { 20 labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'], 21 datasets: [ 22 { 23 label: '重量', 24 data: [35, 34, 37, 35, 34, 35, 34, 25], 25 borderColor: "rgba(255,0,0,1)", 26 backgroundColor: "rgba(0,0,0,0)" 27 }, 28 ], 29 }, 30 options: { 31 scales: { 32 yAxes: [{ 33 ticks: { 34 suggestedMin: 0, 35 stepSize: 10, 36 callback: function(value, index, values){ 37 return value + 'kg' 38 } 39 } 40 }] 41 }, 42 } 43 }); 44 $(function(){ 45 $("#btn").on('click', function(e){ 46 e.preventDefault() 47 $.ajax({ 48 url: "/users", 49 type: 'GET', 50 dataType: 'json', 51 52 }) 53 .done(function(posts){ 54 var html = buildJS(posts); 55 $('.myLineChart').append(html); 56 }) 57 }) 58 }); 59 // } 60 }); 61 </script> 62 63 <button type="button" id="btn">更新</button> 64 </body> 65 66</html> 67

jbuilder

1json.array! @posts do |post| 2 json.id post.id 3 json.weight post.weight 4 json.date post.date 5end 6

controller

1class PostsController < ApplicationController 2 3 def index 4 5 end 6 7 def new 8 @posts = Post.new 9 end 10 11 def create 12 @posts = Post.new(post_params) 13 if @posts.save 14 redirect_to :graphs 15 else 16 render :new 17 end 18 end 19 20 private 21 def post_params 22 params.require(:post).permit(:weight, :date, post_ids: []) 23 end 24end

html

1.top 2 入力画面 3=form_for @posts do |f| 4 .muscle-weight-form__field 5 = f.label :重量(kg), class: 'muscle-weight-form__label' 6 = f.text_field :weight, class: "muscle-weight-form__input", placeholder: "重量を入力してください" 7 .muscle-date-form__field 8 = f.label :日付, class: 'muscle-date-form__label' 9 = f.text_field :date, class: "muscle-date-form__input", placeholder: "日付を入力して下さい" 10 .muscle-input-form__field 11 = f.submit "登録", class: "muscle-input-form__action-btn"

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問