목표

개발 환경

전제 조건

이루어지다

1. 젬 도입

# 追記
gem 'lazy_high_charts'

$ bundle

2. application.js 편집

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require highcharts/highcharts // 追記
//= require highcharts/highcharts-more // 追記
//= require_tree .

3. 컨트롤러 편집

def index
  @book = Book.new
  @books = Book.all
  # 追記
  days = (Date.today.beginning_of_month..Date.today).to_a
  books = days.map { |item| Book.where(created_at: item.beginning_of_day..item.end_of_day).count }
  @graph = LazyHighCharts::HighChart.new('graph') do |f|
    f.title(text: '本 月間登録推移')
    f.xAxis(categories: days)
    f.series(name: '登録数', data: books)
  end
end

① 이달 1일부터 오늘까지의 날짜를 취득하고 변수를 대입한다.

days = (Date.today.beginning_of_month..Date.today).to_a

②① 획득한 날짜에 작성한 책의 수량을 획득하고 변수를 대입한다.

books = days.map { |item| Book.where(created_at: item.beginning_of_day..item.end_of_day).count }

③ 차트 만들기

@graph = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(text: '本 月間登録推移') # タイトル
  f.xAxis(categories: days) # 横軸
  f.series(name: '登録数', data: books) # 縦軸
end

4. 뷰 편집

/ 追記
= high_chart('sample', @graph)