我对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
屏幕截图:
答案 0 :(得分:0)
折线图基本上只是一个X-Y坐标系。
要绘制点,您需要X和Y坐标。 但是你在数组中只提供了一个坐标,如下所示:
[1,21,44,12,55,12,9,0,78,12]
你真正需要的是像这样的哈希:
{
0 => 1,
1 => 21,
2 => 44,
...
}
要实现您可以使用以下代码:
<%= 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 the count):
(0...@numbers.size) =>
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
下一步是从你的数字中收集所有值,@ number实际上是一个ActiveRecord对象数组,但你只想拥有这些值:
@numbers.map(&:values)
此函数调用@numbers中每个对象的值,并使用结果创建一个Array。现在我们有两个数组:
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[1, 21, 44, 12, 55, 12, 9, 0, 78, 12]
.zip将它们中的一个组合成一个新数组,现在我们有以下内容:
[
[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,
...
}