Wie man alle Zahlen im Chartkick zurückgibt ohne group_by

Question

Ich bin relativ neu zu Ruby und spielen mit ChartKick und keine Linien auf dem Diagramm zu sehen. Ich erlaube Benutzern, Zahlen 1-10 einzugeben, und ich möchte alle diese Werte in einem line_chart anzeigen. Ich gebe alle unten angegebenen Werte zurück und möchte diese Zahlen auch in der Tabelle.

Ich weiß, dass ich jetzt die Daten bekomme, weil die Farben rechts für jeden der unten aufgeführten Werte angezeigt werden. Ich habe einen Screenshot angehängt, um zu helfen. Ich würde jede Hilfe schätzen, die ich bekommen kann. Danke im Voraus!

Hier ist meine Ansicht

<div class="col-xs-6"> 
    <h3>Numbers Added</h3> 
     <%= line_chart @numbers, {height: "400px", library: {hAxis: {title: "All Entered Numbers"}, vAxis: {title: "Numbers", viewWindow: {min: 0, max:10}}}} %> 
    </div> 
</div> 

<table> 
    <tr> 
    <th>All Numbers</th> 
    </tr> 

    <% @numbers.each do |number| %> 
    <tr> 
     <td><%= number.value %></td> 
     <td><%= link_to 'Show', number_path(number) %></td> 
     <td><%= link_to 'Edit', edit_number_path(number) %></td> 
     <td><%= link_to 'Destroy', number_path(number), 
       method: :delete, 
       data: { confirm: 'Are you sure?' } %></td> 
    </tr> 
    <% end %> 
    <%= link_to 'Add new number', new_number_path %> 

</table> 

Hier mein Controller

class NumbersController < ApplicationController 
    def index 
    @numbers = Number.all 
    end 

Screenshot ist:

Answer 1

Ein Liniendiagramm ist im Grunde nur ein X-Y-Koordinatensystem.

zu einem Punkt Sie ein X benötigen Draw und eine Y-Koordinate. Aber Sie gab nur 1 in einem Array wie diese Koordinate:

[1,21,44,12,55,12,9,0,78,12] 

Was Sie wirklich brauchen ein Hash ist wie folgt:

{ 
    0 => 1, 
    1 => 21, 
    2 => 44, 
    ... 
} 

Um achiev, dass Sie folgenden Code verwenden:

<%= line_chart Hash[(0...@numbers.size).zip @numbers.map(&:values)], 
{height: "400px", library: {hAxis: {title: "All Entered Numbers"}, 
vAxis: {title: "Numbers", viewWindow: {min: 0, max:10}}}} %> 

Das macht mehrere Dinge gleichzeitig. Zuerst wird ein Array mit den Zahlen von 0 bis die Zählung (Exlusive die Zählung) Ihrer Daten erstellt:

(0...@numbers.size) => 
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 

Der nächste Schritt ist es, alle Werte von Ihren Zahlen zu sammeln, ist @number tatsächlich eine Reihe von Active Objekte, aber Sie wollen nur die Werte haben:

@numbers.map(&:values) 

Diese Funktion ruft Werte auf jedes Objekt in @zahlen und erstellt ein Array mit den Ergebnissen. Jetzt haben wir zwei Arrays:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
[1, 21, 44, 12, 55, 12, 9, 0, 78, 12] 

Die .zip kombiniert sie, indem ein jeder in ein neues Array nehmen, jetzt haben wir folgendes:

[ 
    [0, 1], [1, 21], [2, 44], [3, 12], [4, 55], 
    [5, 12], [6, 9], [7, 0], [8, 78], [9, 12] 
] 

Nein, wir können nur das Gießen in ein Hash mit Hash [...] und voila haben wir diese:

{ 
    0 => 1, 
    1 => 21, 
    2 => 44, 
    ... 
}