0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

chart-js-railsでグラフを表示させたかったが上手くいかなった件(結論タイポ)

Last updated at Posted at 2020-05-11

rails6で、gemのchart-js-railsを使用してグラフを作成しようとしたが上手くいかなかった。
原因が単なるタイポなのか、それともパスの関係などで上手く呼び出せていないのか判断できなかったので、application.jschart.jsが何なのか調べてみた。

##application.jsは何をしているのか
 マニフェストファイルというもので、ビューのerbファイルがapplication.jsだけを読み込めば済むように、読み込みたいjsファイルをrequireしている。
 このファイルに読み込みたいjsファイルをrequireする。

##chart.js関係

 今回はちゃんとchart.jsを読み込んでいる。

application.js

require("chart.js")

 しかし、ビューには反映されていない。
 ここで二つの、そもそも疑問が出てきた。

applicatin.jsと同じ階層にchart.jsないが、ちゃんと反映されているのか。よく見ると、他のrequireしているものも、同じ階層にない。どこのディレクトリを読み込んでいるのか。

→この呼び出しは、node_moduleディレクトリ内にある、該当のディレクトリを呼び出している。
node_module/chart.jsディレクトリはあるので、問題ない。
そのほかに呼び出しているものも同様。
ただし、他のものは.start()を付けているが、理由は分からない。

chart.jsとは何か。chart-js-railsがあればいいのではないか。

chart.jsは、グラフを簡単に書くことができるjavascriptのライブラリ。
chart-js-railsは、chart.jsをrailsのアセットパイプラインに統合するもの。
そのため、chart-js-railsは、chart.jsがあること前提となっている(ということ?)。

##グラフが表示されない原因
rails sのログを見ると、コンパイルは上手くいっているので呼び出しは問題ない。

ではchart.jsを呼び出せているのに、グラフが表示されないのはなぜ?
推測① ビューの記載が間違っている。
試しにネットで上手くいっているソースをコピペしてみる。
→成功。
単に途中の:のうち忘れ。
エラーが表示されないとは……。

##蛇足
解決したが、一点気になることが。
gemのchart-js-railsが全然出てこないが、chart.jsyarn add chart.jsでインストールしていれば、gemは必要ないのか?
新たにrails newして試してみた。
……普通にグラフが表示された。
gemがどのような動作をしているか分からないが、グラフが表示できるなら今回はchart-js-railsは使わない方向で。

##参考
Railsのマニフェストファイルを使ったJsとStylesheetの呼び出し
https://qiita.com/samurai_runner/items/da22eddb64e867b4e145

Ruby on Rails で sprockets から Webpacker へ移行し、移行できないものは共存させる方法
https://qiita.com/tatsurou313/items/645cbf0a3af4c673b5df#%E8%87%AA%E8%BA%AB%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99-1

chart-js-railsのGithub
https://github.com/coderbydesign/chart-js-rails

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?