[RUBY] Créer un graphique simple avec Rails Utiliser gem-chartkick / groupdate

Je voulais implémenter la fonction graphique dans Rails, j'ai donc utilisé Chartkick. Puisqu'il y avait peu d'articles au milieu, j'ai décidé de l'afficher comme référence. Cette fois, gem groupdate est utilisé pour obtenir la date et l'heure de mise à jour. Les gemmes utilisées sont les suivantes.

• chartkick
• groupdate Chartkick officiel https://chartkick.com

Environnement de développement

Rails 5.2.4

Construire

① Installer la gemme

gem chartkick
gem groupdate

② Terminal

 bundle install

③ Lire la bibliothèque Javascript Ajout de ce qui suit à app / assets / javascripts / application.js.

application.js

//= require chartkick
//= require Chart.bundle

④ Décrit dans le contrôleur

top.rb

  def index
  	@users_count = User.group_by_day(:created_at).size
        #Sortie graphique du numéro d'enregistrement de l'utilisateur La description ci-dessus ne peut être utilisée que si la date du groupe gem est installée.
  	@user_today = User.where(created_at: Date.today.all_day).count
        #Nombre d'utilisateurs enregistrés par jour
  end

⑤ Décrit en vue

index.html.erb

	<div class="main">
		<label class="text-user">Nombre de membres inscrits par jour(Nombre total de membres: <%= @users.count %>)</label>
		<div class="graph">
		  <%= line_chart @users_count, download: true, colors: ['#FF4F02'] %>
	    </div>
	</div>

⑥ Écran réel (date d'enregistrement et nombre d'inscriptions)

line_chart

• Utilisé pour la sortie du graphique linéaire. De plus, pie_chart (graphique circulaire), column_chart (graphique à barres), bar_chart (direction horizontale du graphique à barres), area_chart (graphique en plan), scatter_chart (diagramme de dispersion), etc. peuvent être utilisés.

colors: ['rgb']

• Vous pouvez changer la couleur des lignes sur le graphique.

À propos de la date du groupe de gemmes

--groupdate gère les données de date et d'heure en fonction d'un fuseau horaire donné. Après l'installation de groupdate, les méthodes suivantes sont disponibles. Référence https://github.com/ankane/groupdate

group_by_second (heure toutes les 2 minutes) group_by_minute (minutes) group_by_hour (heures) group_by_day (date) group_by_week (semaine) group_by_month (lundi) group_by_quarter (trimestre) group_by_year (année) group_by_hour_of_day (renvoie le jour et l'heure) group_by_day_of_week (renvoie la date de la semaine) group_by_day_of_month (tous les jours du mois) group_by_month_of_year

Référence (1) Utiliser le graphique à barres column_chart

Référence ③ Utiliser le graphique circulaire pie_chart

La partie group_by est ambiguë, mais si elle est incorrecte, veuillez le signaler. Le tableau de bord est également disponible sur le site officiel avec des images afin qu'il soit facile de comprendre comment l'utiliser, alors veuillez vous y référer.