자기 학습 목적으로 Chart.js에서 간이 표시할 때까지를 정리해 보겠습니다.

Chart.js란?

무료 오픈 소스 JavaScript 라이브러리.
주로 바, 라인, 에리어, 파이, 버블, 레이더, 폴러, 산포도의 8개를 움직여 Canvas로 그려 표시할 수 있는 것.

공식 사이트 링크
htps //w w. 찬 rtjs. rg/

환경

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

절차

새 프로젝트 만들기

디렉토리 이동

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 사용 및 컨트롤러 및 모델 명명 규칙