lazy_high_chartsの1.3.2から1.3.3への変更にハマった

Javascriptを用いて高度なグラフを描くライブラリHighCharts.jsRuby on Railsから使うライブラリlazy_high_chartsのアップデートでハマったので、同じようにハマる人がいるかわからないけどメモ。

ちなみに、今の最新は1.4.1。

ハマりどころ1:インストール方法が変わっている

最初にlazy_high_chartsを導入したときには、present:Rails で Lazy high charts を使ってチャートを実装してみたを参考にインストールした(このときが、1.3.2以下のバージョン)。大雑把にいって以下のようにインストールしていた。

  1. Gemfile に lazy_high_chartsを追加する
  2. bundle install でライブラリを導入
  3. rails g lazy_high_charts:install で HighCharts.js を導入

で、Rails 3.2以降からインストール方法が変わったらしい。

  1. Gemfile に lazy_high_chartsを追加する
  2. bundle install でライブラリを導入
  3. 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のオプションを見れば良いみたい。