[RUBY] Einfaches Diagramm mit Rails ausgeben Verwenden Sie gem-chartkick / groupdate

Ich wollte die Grafikfunktion in Rails implementieren, also habe ich Chartkick verwendet. Da es in der Mitte nur wenige Artikel gab, habe ich beschlossen, sie als Referenz zu veröffentlichen. Dieses Mal wird das Gem-Gruppendatum verwendet, um das Aktualisierungsdatum und die Aktualisierungszeit abzurufen. Die verwendeten Edelsteine sind wie folgt.

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

Entwicklungsumgebung

Rails 5.2.4

Bauen

① Edelstein installieren

gem chartkick
gem groupdate

② Terminal

 bundle install

③ Lesen Sie die Javascript-Bibliothek Folgendes wurde zu app / assets / javascripts / application.js hinzugefügt.

application.js

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

④ In der Steuerung beschrieben

top.rb

  def index
  	@users_count = User.group_by_day(:created_at).size
        #Grafikausgabe der Benutzerregistrierungsnummer Die obige Beschreibung kann nur verwendet werden, wenn das Datum der Edelsteingruppe installiert ist.
  	@user_today = User.where(created_at: Date.today.all_day).count
        #Anzahl der registrierten Benutzer pro Tag
  end

⑤ In Sicht beschrieben

index.html.erb

	<div class="main">
		<label class="text-user">Anzahl der registrierten Mitglieder pro Tag(Gesamtzahl der Mitglieder: <%= @users.count %>)</label>
		<div class="graph">
		  <%= line_chart @users_count, download: true, colors: ['#FF4F02'] %>
	    </div>
	</div>

⑥ Aktueller Bildschirm (Registrierungsdatum und Anzahl der Registrierungen)

line_chart

• Wird für die Ausgabe des Liniendiagramms verwendet. Außerdem können pie_chart (Kreisdiagramm), column_chart (Balkendiagramm), bar_chart (Balkendiagramm horizontale Richtung), area_chart (ebenes Diagramm), Scatter_chart (Streudiagramm) usw. verwendet werden.

colors: ['rgb']

• Sie können die Farbe der Linien im Diagramm ändern.

Über das Datum der Edelsteingruppe

--groupdate verarbeitet Datums- und Zeitdaten basierend auf einer bestimmten Zeitzone. Nach der Installation von groupdate stehen die folgenden Methoden zur Verfügung. Referenz https://github.com/ankane/groupdate

group_by_second (Zeit alle 2 Minuten) group_by_minute (Minuten) group_by_hour (Stunden) group_by_day (Datum) group_by_week (Woche) group_by_month (Montag) group_by_quarter (Quartal) group_by_year (Jahr) group_by_hour_of_day (gibt sowohl Tag als auch Uhrzeit zurück) group_by_day_of_week (gibt das Datum der Woche zurück) group_by_day_of_month (jeden Tag des Monats) group_by_month_of_year

Referenz (1) Verwenden Sie das Balkendiagramm column_chart

Referenz ③ Verwenden Sie das Kreisdiagramm pie_chart

Der Teil group_by ist nicht eindeutig, aber wenn er falsch ist, weisen Sie darauf hin. Der Chartkick ist auch auf der offiziellen Website mit Bildern verfügbar, sodass die Verwendung leicht verständlich ist. Bitte beziehen Sie sich darauf.