【Rails】 5分でApexChart.jsを導入する方法

はじめに

Apexchart を Rails に導入してみたのですが、かなり使いやすいわりに日本語記事がなく浸透していないと感じたため普及活動として広めていけたらいいなと思います。

ApexChart.js とは

グラフ描画のライブラリです。同じようなライブラリの１つにchart.jsなどがあります。

• https://apexcharts.com/javascript-chart-demos/

コマンド

// Rails アプリケーション作成
$ rails _5.2.4_ new five_min_apexchart
$ cd five_min_apexchart

// scaffold で Event モデルを作成
$ rails g scaffold chart
$ rails db:migrate RAILS_ENV=development

GemFile

GemFile

# 今回紹介する apexchart の gem
gem 'apexcharts'
# apexchart とは直接関係はないが、Ruby -> Javascript にデータを渡すときにとても便利な gem
gem 'gon'

$ bundle install

Javascript

以下を追記。

app/assets/javascripts/application.js

//= require apexcharts

View に apexchart を描画する方法

apexchart を Rails に適用する方法は2つあります。
用途にあったものを使ってみてください。

• View に直接書き込む方法(反映する方法１)
• Javascript にて描画する方法(反映する方法2)

View に直接書き込む方法(反映する方法１)

HTML上にデータを渡すと読み込んで、グラフを描画してくれます。
今回は参考までに円グラフを描画しましたが、他にも棒グラフ、散布図など、たくさんありますのでドキュメントを確認してみてください。
※index.html.erbに描画したのも参考までですので、お好きなところに描画させてください。

app/view/charts/index.html.erb

<%= pie_chart([
  {name: "Series A", data: 25},
  {name: "Series B", data: 100},
  {name: "Series C", data: 200},
  {name: "Series D", data: 125}
], legend: "left") %>

Javascript にて描画する方法(反映する方法2)

HTMLにidをつけたdiv要素を用意します。

app/view/charts/index.html.erb

<div id='chart'></div>

Javascript にデータを渡し、どのidに描画するかを指定する。
options にて細かい条件を指定するとかなりリッチなグラフを描画してくれます。

app/assets/javascripts/application.js

var options = {
  chart: {
    type: 'pie'
  },
  series: [25, 100, 200, 125],
  labels: ['Series A', 'Series B', 'Series C', 'Series D'],
  legend: {
    position: 'left'
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

• apexchart (pie chart のドキュメント)
  • https://apexcharts.com/javascript-chart-demos/pie-charts/simple-pie-chart/

まとめ

View に apexchart を描画する方法として2つの方法を載せましたが、個人的には下記のように使い分けをしています。
gon という gem もありますので、 Ruby -> Javascript にデータを渡すのにほとんど苦労しないので、反映する方法2を使うことをお勧めします。

• View に直接書き込む方法(反映する方法１)
  • プロトタイプを作る時など、短時間で作成したい場合。
• Javascript にて描画する方法(反映する方法2)
  • 細かな仕様などを決めて時間をかけて作り込みたい場合。

参考

• ApexCharts (Github)
  • https://github.com/apexcharts
• apexcharts.rb (Github)
  • https://github.com/styd/apexcharts.rb

---

会社紹介

株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。

詳しくは 公式サイト までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/