3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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はとても便利だと思いました。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
3
Help us understand the problem. What are the problem?