Javascriptを用いて高度なグラフを描くライブラリHighCharts.jsをRuby on Railsから使うライブラリlazy_high_chartsのアップデートでハマったので、同じようにハマる人がいるかわからないけどメモ。
ちなみに、今の最新は1.4.1。
ハマりどころ1:インストール方法が変わっている
最初にlazy_high_chartsを導入したときには、present:Rails で Lazy high charts を使ってチャートを実装してみたを参考にインストールした(このときが、1.3.2以下のバージョン)。大雑把にいって以下のようにインストールしていた。
- Gemfile に lazy_high_chartsを追加する
- bundle install でライブラリを導入
- rails g lazy_high_charts:install で HighCharts.js を導入
で、Rails 3.2以降からインストール方法が変わったらしい。
- Gemfile に lazy_high_chartsを追加する
- bundle install でライブラリを導入
- app/assets/javascripts/application.js に //= require highcharts を追記
「rails g lazy_high_charts:install」が不要になっていた(今、このコマンド実行するとエラーメッセージが表示される)。また、vendar/assets/javascripts/highcharts.js はもう不要(lazy_high_chartsの方に含まれている)。
ハマりどころ2:high_chart()の第一引数にハイフンを含んでいるとうまく動かない
これが一番ハマった。ひとつのページで複数のグラフを表示させたいとき、グラフの識別子はユニークでなければいけない。そこで、あるページにおいては以下のようにグラフの識別子をユニークにしていた。
<%= high_chart("graph-#{id}", graphObject) -%> <% id += 1 -%>
自前のソースは同じまま lazy_high_charts が 1.3.2から1.4.1にバージョンアップしたら上記のコードで生成したグラフが表示されない。一方で、グラフが今までと同様に表示されるページもある。いろいろと試した結果、以下のようにしたらちゃんとグラフが表示された。
<%= high_chart("graph#{id}", graphObject) -%> <% id += 1 -%>
ハイフンが原因だったらしい。これがlazy_high_chartsが原因なのか、元のHighCharts.jsが原因なのかわからないけど、とりあえずグラフが表示されるようになったので追求終了。この切り替えは、lazy_high_chartsのバージョン1.3.2と1.3.3の間で起こっているらしい。
ハマりどころ3:lazy_high_chartsのドキュメントがない
lazy_high_charts本家ReadMeが情報なさすぎてどうしてよいのかわからない。引き渡すオプションはHighCharts.jsのオプションを見れば良いみたい。