LoginSignup
3
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-09

(この記事は、高専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はとても便利だと思いました。

3
3
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
3
3