🐸
chart.jsを使ってグラフ化したと思ったら表示されない
🍍今回の目的
上の表に対応した、グラフを作成したい！
<完成予想>
っと思ってコードを記述したつもりなのだが、一向にグラフが姿を見せてくれない。
<現状>
他のところはちゃんと表示されているし、ヘッダーも指定の位置にいるからグラフを記述したファイルだけが表示されてないってわけか😟😟😟
🍍状況確認
chart.jsをインストールできているのか？
今回はnpmを用いたインストールを行った。
$ npm install chart.js を入力しインストールが行えていた場合node_modulesというフォルダが作成されたらOK。
node_modulesというフォルダは、 app bin config の並びにある。
→フォルダがダウンロードされていることが確認できた。
記述にミスはないか
ターミナルを確認するとファイルは読み込まれている。中身を表示されていないだけ。
試しにファイルの中に文字打ってみたら表示された。
グラフを表示させるコードの書き方がおかしいのか？
自分の記述にはミスがあるかもしれなかったため、インターネットで公開されている成功例の記述をコピペした。
→表示は変わらなかった。
Turbolinksの無効化はおこなっているのか
JSの表示ミスの時にすぐに思い浮かぶのがTurbolinksのこと。
たしか、turbolinks:loadを記述しておけばよいと思ったので
$(document).on('turbolinks:load', function() {と実際に記述済みだ。
だから、Turbolinksのせいではないと思う。
🍍解決方法
このコードを追記した
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
参考にさせていただいたサイト
🎉🎉🎉最終的に完成したコード🎉🎉🎉
2行目に上記で提示したコードを追記しました。
🍍まとめ
成功している方のコードをコピペしてもグラフが表示されることはなかった。
公式ページを毎回確認する必要があると思った。
そのあとに発生した事件↓
Discussion