【Chart.js】Railsでレーダーチャートを簡易表示するまで

自己学習目的としてChart.jsで簡易表示するまでをまとめてみます。

Chart.jsとは

無料のオープンソースJavaScriptライブラリ。
主にバー、ライン、エリア、パイ、バブル、レーダー、ポーラー、散布図の8つを動きをつけてCanvas で描画表示できるもの。

公式サイトのリンク
https://www.chartjs.org/

環境

OS: Catalina v10.15.3
Ruby: v2.6.3
Rails: v5.2.4.1

手順

1. 新規プロジェクトの作成
2. ディレクトリ移動
3. DB作成

$ rails _5.2.4_ new chart_sample_app
$ cd chart_sample_app
$ bundle exec rake db:create

エディタからGemfileを開き、Chart.jsのgemを追加する。

Gemfile

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

gem 'chart-js-rails', '~> 0.1.4' #=> 追加

追記後にインストール。

$ bundle install

コントローラーを作成。

＜ 書き方 ＞
rails g(generate) controller <コントローラー名> <アクション名>

$ rails g controller chart index

app/controllers/chart_controller.rb

class ChartController < ApplicationController
  def index
  end
end

　
ルーティングの追加（起動　→　ビュー画面へ）

config/routes.rb

Rails.application.routes.draw do
  root 'chart#index'
end

Chart.jsの読み込み
application.jsの一番下に追記

※ 注意
Rails5まではsprocketsを利用したアセットパイプラインでjavascriptやcssを管理されていますが、
Rails6からはWebpackerでの管理になっているため、「javascriptsファイルが見つからず分からない...」という面倒な場合はRails5で新規作成が無難だったりするようです。

app/javascript/packs/application.js

// about supported directives.
//
//= require Chart.min　追加
//= require rails-ujs

layouts直下ビュー画面app/views/chart/index.html.erbに記入。
今回はscriptを直接記入する。

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ["Japanese", "Mathematics", "English", "Social studies", "Science"],
    datasets: [{
      label: 'A_kun',
      backgroundColor: "rgba(0,0,80,0.4)",
      borderColor: "rgba(0,0,80,1)",
      data: [80, 90, 60, 70, 100, 70]
    }, {
      label: 'B_kun',
      backgroundColor: "rgba(0,255,0,0.4)",
      borderColor: "rgba(0,255,0,1)",
      data: [90, 75, 80, 65, 80, 70]
    }]
  }
});
</script>

URLにアクセスすると表示

http://localhost:3000/

デフォルトのままのため中央の値は60。
(ディスプレイよっては内側ラインが薄くなるかもしれないです)

最後までご覧いただきありがとうございましたm(_ _)m

参考

Chart.js(英)
Chart.jsでグラフを描画してみた
Rails generate の使い方とコントローラーやモデルの命名規則