使用 Chartkick 显示数据答案

【问题标题】：Displaying data using Chartkick使用 Chartkick 显示数据
【发布时间】：2016-05-21 23:28:48
【问题描述】：

我有用户每天通过表单添加的数据。其中一些字段记录温度：:ambcur, :ambmin, :ambmax 等这是带有数据记录的托盘的所有部分

我正在使用 chartkick，它很棒，但我不确定如何随着时间的推移显示数据。

我正在尝试制作多系列折线图。

<%= line_chart [
                 {name: "Series A", data: @tray.datalogs.ambcur},
                 {name: "Series B", data: @tray.datalogs.ambmin}
             ] %>

此外，单数折线图也不起作用。

<%= line_chart @tray.datalogs.group(:ambcur).count %>

有人可以帮助我朝着正确的方向前进吗？谢谢:)

【问题讨论】：

你安装了 groupdate gem 吗？
@RareFever 不，我已将其注释掉，因为它不适用于我的开发数据库，但适用于 pg。所以建议是使用数据切片。
你能渲染一个名为“时间轴”的例子吗？数据片是宝石吗？，如果是，请留下链接。
@RareFever 我的错，它被称为 Dateslices，是的，它是由制作 Chartkick 的同一个人制作的宝石。是的，我可以渲染时间线示例。我只需要知道如何从我的表单中呈现数据。 github.com/HappyFunCorp/dateslices
让我知道它是否有效。如果确实如此，请不要忘记为答案投票+1。编码愉快！

标签： ruby-on-rails ruby ruby-on-rails-4 chartkick

【解决方案1】：

您的代码的问题是您没有将正确的数据格式传递给line_chart。要绘制折线图，数据必须采用 Hash 格式，如下所示：

<%= line_chart {"2016-05-21 23:50:40 UTC"=>20, "2016-05-21 23:50:57  TC"=>23} %>

{"2016-05-21 23:50:40 UTC"=>20, "2016-05-21 23:50:57 UTC"=>23}

在前面的示例中，您将日期（字符串）视为哈希的键，值（整数）是 20 和 23。在您的情况下，您需要一个哈希值，其中键是日期，哈希值是最大值、最小值或当前温度。 { "date_1" => 数字, "date_2" => 数字, ... }

为了测试我的代码，我创建了一个名为 Temperature 的模型。这是表格：

  create_table "temperatures", force: :cascade do |t|
    t.integer  "max",        limit: 4
    t.integer  "min",        limit: 4
    t.integer  "current",    limit: 4
    t.datetime "created_at",           null: false
    t.datetime "updated_at",           null: false
  end

在我看来，我称之为：

<%= line_chart [
 {name: "Series A", data: Temperature.all.inject({}) {|res, v| res[v[:created_at]] = v.max; res }},
 {name: "Series B", data: Temperature.all.inject({}) {|res, v| res[v[:created_at]] = v.current; res }},
 {name: "Series C", data: Temperature.all.inject({}) {|res, v| res[v[:created_at]] = v.min; res }}
             ] %>

我得到了带有 3 条线的图，显示了一段时间内的最高、最低和当前温度。

我使用inject 方法创建了一个哈希，其中键是日期，值是模型温度的属性[max,min,current]。有关 inject 方法的更多信息，请阅读this stackoverflow thread。

在你的情况下，你应该试试这个：

<%= line_chart [
 {name: "Series A", data: @tray.datalogs.inject({}) {|res, v| res[v[:created_at]] = v.ambmax; res }},
 {name: "Series B", data: @tray.datalogs.inject({}) {|res, v| res[v[:created_at]] = v.ambcur; res }},
 {name: "Series C", data: @tray.datalogs.inject({}) {|res, v| res[v[:created_at]] = v.ambmin; res }}
                 ] %>

【讨论】：

谢谢，我试试看。