group_byを使わずにchartkick内のすべての数値を返す方法

Question

私は、Rubyに新しくChartKickを使って遊んでいて、グラフの線が見えません。私はユーザーが1から10の数字を入力できるようにして、それらの値をすべてline_chartに表示したい。下のすべての値をループに戻しています。グラフにもその数値が必要です。

私は今、データが得られていることを知っています。なぜなら、下に列挙した各値の右側に色が表示されているからです。私はスクリーンショットを添付しました。私が得ることができるすべての助けに感謝します。前もって感謝します！ここで

が私の見解である。ここ

<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> 

は私のコントローラである

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

スクリーンショット：

Answer 1

折れ線グラフには、ちょうどX-Y座標系は基本的です。

あなたはXとY座標を必要とする点を描画します。 しかし、あなたは唯一の1がこのような配列の座標を与えた：あなたは次のコードを使用できることをachievする

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

：あなたが実際に必要なもの

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

は、このようなハッシュである

<%= 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}}}} %> 

これは一度に複数のことを行います。 まず、それはあなたのデータの0からのカウント（EXLUSIVE数）の数字を持つ配列を作成します。

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

次のステップは、あなたの番号からのすべての値を収集することです、@numberは実際のActiveRecordの配列ですオブジェクトですが、値を持つだけです：

@numbers.map(&:values) 

この関数は、@numbersのすべてのオブジェクトの値を呼び出し、その結果で配列を作成します。今、私たちは、2つの配列があります。

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

を.zipファイルには、今私たちは次のことを持って、新しい配列にそれぞれの1を取ることによって、それらを組み合わせた：

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

ません我々だけにこれをキャストすることができますハッシュ[...]でハッシュ出来上がり我々はこれを持っている：

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