使用Chartkick显示数据

Question

我有每天由用户通过表单添加的数据.这些领域中的一些记录温度: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 %>

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

Answer 1

您的代码的问题是您没有将正确的数据格式传递给line_chart.要绘制折线图,​​数据必须采用哈希的格式,如下所示:

<%= 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方法创建一个哈希,其中键是日期,值是模型Temeperature的属性[max,min,current] .有关注入方法的其他信息,请阅读此stackoverflow线程.

在你的情况下你应该试试这个:

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