[RUBY] [Rails] Comment créer un graphique à l'aide de lazy_high_charts
Cible
** Créez un graphique qui montre la transition d'inscription mensuelle des livres sur une base quotidienne. ** **
Environnement de développement
・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina
supposition
Ce qui suit a été mis en œuvre.
・ Présentation mince ・ Introduction de Bootstrap 3 ・ Introduction de Font Awesome
la mise en oeuvre
1. Présentez Gem
Gemfile
#Postscript
gem 'lazy_high_charts'
Terminal
$ bundle
2. Editez ʻapplication.js`
application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require highcharts/highcharts //Postscript
//= require highcharts/highcharts-more //Postscript
//= require_tree .
3. Modifiez le contrôleur
books_controller.rb
def index
@book = Book.new
@books = Book.all
#Postscript
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: 'Transition d'inscription mensuelle')
f.xAxis(categories: days)
f.series(name: 'Numéro d'enregistrement', data: books)
end
end
(1) Obtenez la date du 1er de ce mois à aujourd'hui et attribuez-la à la variable.
days = (Date.today.beginning_of_month..Date.today).to_a
(2) Obtenir le nombre de livres créés à la date obtenue en (1) et les affecter à la variable.
books = days.map { |item| Book.where(created_at: item.beginning_of_day..item.end_of_day).count }
③ Créer un graphique
@graph = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'Transition d'inscription mensuelle') #Titre
f.xAxis(categories: days) #Axe horizontal
f.series(name: 'Numéro d'enregistrement', data: books) #Axe vertical
end
4. Modifier la vue
slim:books/index.html.slim
/Postscript
= high_chart('sample', @graph)
Recommended Posts