Rails+LazyHighChartsでチャートを描画する

（この記事は、高専OBOG Advent Calendar 2019の12/10に送った記事です。）

要約

Ruby on Railsでは、LazyHighChartsというgemを使うことで、簡単にきれいなチャートを描画することができます。
JavaScriptの知識がほとんどなくてもチャートの描画までたどり着くことができます。

流れはこんな感じです。

1. gemのインストール
2. controllerでやること
3. viewでやること
4. 動作確認

本家のREADME.md: https://github.com/michelson/lazy_high_charts/blob/master/README.md

チャートの描画まで

gemのインストール

LazyHighChartsが欲しいので、Gemfileに書きます。

gem 'lazy_high_charts'

そしてbundle installします。

$ bundle install

特に問題なければ Bundle complete! と表示されます。

controllerでやること

LazyHighChartsインスタンスを作ってあげます。
書き方は本家のREADMEを参考にして下さい。
https://github.com/michelson/lazy_high_charts/blob/master/README.md#controller-code

@chart = LazyHighCharts::HighChart.new('graph') do |f|
  # your super sexy chart code...
end

viewでやること

どこかでHighchartsを読み込みます。
雑にやるなら、本家のCDNを指定すればダウンロードできます。
なお、gemのREADMEではAsset Pipelineに組み込む方法が書かれています。

<script src='https://code.highcharts.com/highcharts.js'></script>

controllerで作ったインスタンス変数をhigh_chartヘルパで指定すれば、viewにチャートが描画されます。

<%= high_chart('my-first-chart', @chart) %>

感想

JavaScriptの知識がある場合は、素直にHighcartsをJavaScriptから呼ぶ方が、シンプルでいいと思います。
私は普段JavaScriptを読み書きしていないので、LazyHighChartsのように簡単にチャートが描画できるgemはとても便利だと思いました。