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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 5

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

JavaScript

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

Q&A

解決済

1回答

3056閲覧

(Rails) redirect_to の後に、javascript が実行されない。

ninginnn

総合スコア35

Ruby on Rails 5

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

JavaScript

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

0グッド

0クリップ

投稿2019/06/22 08:58

編集2019/06/22 09:13

チャート(グラフ)をjavascriptで作ったのですが、たまに、グラフが表示されないという状態が続いています。

チャートが表示されない時というのは、決まってputリクエストの処理を行った後です。

以下がエラー文です。

Uncaught ReferenceError: Chart is not defined at drawLineChart (<anonymous>:32:23) at <anonymous>:15:5 at o.assignNewBody (turbolinks.self-569ee7c8f989e.js?body=1:6) at o.replaceBody (turbolinks.self-569ee74ef572a485f64c82ddc8f989e.js?body=1:6) at turbolinks.self-5699b1ec033a0f572a864c82ddc8f989e.js?body=1:6 at o.e.renderView (turbolinks.self-569ee74eaa15c1e201931f572a485f62ddc8f989e.js?body=1:6) at o.render (turbolinks.self-9ee74eaa15c1a0f572a485f64c82ddc8f989e.js?body=1:6) at Function.e.render (turbolinks.self-569ee74ea0f572a485f64c82ddc8f989e.js?body=1:6) at t.renderSnapshot (turbolinks.self-569ee74eaa15c1e33a0f572a485f64c82d989e.js?body=1:6) at t.render (turbolinks.self-56a0f485f64c82ddc8f989e.js?body=1:6)

Railsのコントローラーで処理した変数をグラフの要素に反映させています。
コントローラーの処理が終わる前に、javascriptが起動しているのか?
と思ったため、
実行前に0.3秒まつコードを挟みましたが治りません。

window.onloadで実行させても変わりませんでした。
何原因かわかる方はいますでしょうか?

<script> function sleep(waitMsec) { var startMsec = new Date(); // 指定ミリ秒間だけループさせる(CPUは常にビジー状態) while (new Date() - startMsec < waitMsec); } sleep(300); var data = <%= @data %>; var labels = <%= raw @date_like_g %>; drawLineChart( "myChart2", // elemet.id data, // data labels, // labels "#FA8BFF", // firstColour "#2BD2FF", // secondColour "#2BFF88" // thirdColour ); function drawLineChart(id, data, labels, firstColour, secondColour, thirdColour) { var ctx = document.getElementById(id).getContext("2d"); var width = window.innerWidth || document.body.clientWidth; var gradientStroke = ctx.createLinearGradient(0, 0, width, 0); gradientStroke.addColorStop(0, firstColour); gradientStroke.addColorStop(0.6, secondColour); gradientStroke.addColorStop(0.9, thirdColour); var myChart = new Chart(ctx, { type: "line", data: { labels: labels, datasets: [ { label: "Data", borderColor: gradientStroke, pointBorderColor: gradientStroke, pointBackgroundColor: gradientStroke, pointHoverBackgroundColor: gradientStroke, pointHoverBorderColor: gradientStroke, pointBorderWidth: 8, pointHoverRadius: 8, pointHoverBorderWidth: 1, pointRadius: 0, backgroundColor: gradientStroke, borderWidth: 1, data: data }, ] }, options: { responsive: true, maintainAspectRatio: false, legend: { position: "none" }, scales: { yAxes: [ { ticks: { fontFamily: "Roboto Mono", fontColor: "#444", fontStyle: "bold", beginAtZero: true, padding: 20 }, gridLines: { drawTicks: false, display: false, drawBorder: false } } ], xAxes: [ { gridLines: { zeroLineColor: "transparent" }, ticks: { fontFamily: "Roboto Mono", fontColor: "#444", fontStyle: "bold", beginAtZero: true, padding: 20 }, gridLines: { drawTicks: false, display: false, drawBorder: false } } ] } } }); } </script>

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

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

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

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

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

guest

回答1

0

自己解決

投稿2019/06/24 03:47

ninginnn

総合スコア35

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問