[Ruby on Rails] Erstellen Sie mit Chartick ein kreisförmiges Diagramm der Summen nach Spalten

Einführung

Ich habe Chart Kick verwendet, weil ich ein Diagramm mit Schienen einfügen wollte. Da die Einführung selbst einfach ist, werden wir beschreiben, wie ein Kreisdiagramm der aggregierten Ergebnisse erstellt wird.

Referenzierte Seite

• Offizielles Chartkick-Dokument
• Wenn Sie einfache Diagramme in Rails verarbeiten möchten, verwenden Sie Chartkick anstelle von Chart-JS-Rails
• Implementieren Sie ein Kreisdiagramm mit explosiver Geschwindigkeit [5 Minuten]

Umgebung

ruby 2.5.1 Rails 5.2.4.3

Annahmen und Ziele

Erstellen Sie ein Kreisdiagramm aus der ** Meinungsspalte (Ganzzahl) ** der ** Abstimmtabelle **, in dem die Meinungen des Benutzers zusammengefasst sind. Wenn der Wert der Meinungsspalte 1 ist, ist es für, und wenn es 0 ist, ist es das Gegenteil, aber es wird mit anderen Werten und gemischten NULL-Werten erstellt.

** Abstimmtabelle **

** Abschlusszeichnung **

• Auf der tatsächlichen Maschine wird die Anzahl der Elemente angezeigt, indem Sie den Mauszeiger auf jedes Element des Kreisdiagramms bewegen.

Einführung von Chart Kick

Obwohl es auf der Referenzseite beschrieben ist, wird es erneut beschrieben.

Gemfile

gem "chartkick"   #Anhängen

Gemfile

$ bundle install

app/javascript/packs/application.js

//= require chartkick
//= require Chart.bundle  #Fügen Sie zwei Zeilen hinzu

Reflexion auf Ansichtsseite

Die anzuzeigende Seite kann sich an einer beliebigen Stelle befinden, aber dieses Mal möchte ich das Diagramm in index.html.erb des Posts-Controllers anzeigen.

html.erb:app/views/posts/index.html.erb

<%= pie_chart Vote.group(:opinion).count%>

Es ist ein Diagramm, das Sie nicht wirklich verstehen, was es darstellt. ..

Definieren Sie daher Variablen und Methoden für Diagramme in der Controller-Datei.

app/controllers/posts_controller.rb

  def index
    @opinion = Vote.pluck(:opinion)
    @aggregate = aggregateOpinion(@opinion)
    @sum = sumOpinion(@opinion)
  end

  def aggregateOpinion(array)
    result = [["Zustimmen",0],["Opposition",0],["Weder",0],["Keine Antwort",0]]
    array.each do |i|
      if i == 1
        result[0][1] += 1
      elsif i == 0
        result[1][1] += 1
      elsif i == nil
        result[3][1] += 1
      else 
        result[2][1] += 1
      end
    end
    return result
  end

  def sumOpinion(array)
    result = [["Gesamtzahl der Stimmen",0],["Anzahl gültiger Stimmen",0],["Anzahl ungültiger Stimmen",0]]
    array.each do |i|
      if i == nil
        result[2][1] += 1
      else 
        result[1][1] += 1
      end
    end
    result[0][1] = array.length 
    return result
  end

Kommentar

Mit der Zupfmethode wird nur die Zielspalte als Array erfasst. Danach wird es mit der aggregateOpinion-Methode in Daten für ein Kreisdiagramm formatiert.

Da der Index des Ergebnisarrays unverändert in der Anzeigereihenfolge des Kreisdiagramms liegt, lautet der Parameter Der NULL-Wert steht an letzter Stelle, gefolgt vom sogenannten "anderen" (in diesem Fall dem Namen [weder]).

Die sumOpinion-Methode steht nicht in direktem Zusammenhang mit dem Diagramm, es ist jedoch schwierig, die Informationen über die Gesamtzahl der Stimmen in das Diagramm einzufügen, sodass sie separat erstellt werden.

Aufgrund der oben genannten Inhalte möchte ich dies erneut auf der Ansichtsseite wiedergeben.

html.erb:app/views/posts/index.html.erb

<%= pie_chart @aggregate, width: "500px"%>

Dies ist kein Problem, aber am Ende werden das Layout und der Inhalt, die mit der sumOpinion-Methode erfasst wurden, im Tabellenelement angezeigt und abgeschlossen.

html.erb:app/views/posts/index.html.erb

<%= pie_chart @aggregate,colors: ["#3333cc","#cc3333","#339966","333"], donut: true , width: "500px"%>
<table border="1" width="500">
  <tr>
    <th>Gesamtzahl der Stimmen</th>
    <th>Anzahl gültiger Stimmen</th>
    <th>Anzahl ungültiger Stimmen</th>
  </tr>
    <tr>
    <th><%=@sum[0][1]%></th>
    <th><%=@sum[1][1]%></th>
    <th><%=@sum[2][1]%></th>
  </tr>
</table> 

Am Ende

Was haben Sie gedacht. Ich glaube, ich konnte es etwas mehr auf den Methodenteil anwenden. .. Natürlich unterstützt Chartkick nicht nur Kreisdiagramme, also probieren Sie es bitte aus. Danke fürs Zuschauen!