Ruby on rails Rails图表未在多系列折线图中绘制线条

Ruby on rails Rails图表未在多系列折线图中绘制线条,ruby-on-rails,ruby,ruby-on-rails-4,chartkick,Ruby On Rails,Ruby,Ruby On Rails 4,Chartkick,为什么这些线没有连接我图表上的点? 我知道最后一个数组项没有数据,但我认为这不是问题所在 [1] pry(#<#<Class:0x007fb1936e6828>>)> result [ [0] { :name => "Positive Room Pressure", :data => { Thu, 12 Jun 2014 16:25:28 UTC +00:00 => true, Mo

为什么这些线没有连接我图表上的点? 我知道最后一个数组项没有数据,但我认为这不是问题所在

[1] pry(#<#<Class:0x007fb1936e6828>>)> result
[ 
[0] {
        :name => "Positive Room Pressure",
        :data => {
        Thu, 12 Jun 2014 16:25:28 UTC +00:00 => true,
        Mon, 16 Jun 2014 19:27:21 UTC +00:00 => true,
        Tue, 01 Jul 2014 08:58:40 UTC +00:00 => true,
        Mon, 07 Jul 2014 19:21:42 UTC +00:00 => true,
        Wed, 23 Jul 2014 20:43:23 UTC +00:00 => true,
        Wed, 23 Jul 2014 21:05:04 UTC +00:00 => true,
        Fri, 25 Jul 2014 05:24:18 UTC +00:00 => false,
        Mon, 25 Aug 2014 13:29:40 UTC +00:00 => true
    },
    :discrete => true
},
[1] {
        :name => "Room Humidity",
        :data => {
        Fri, 16 May 2014 12:13:07 UTC +00:00 => 65.0,
        Tue, 10 Jun 2014 19:27:53 UTC +00:00 => 64.0,
        Wed, 11 Jun 2014 15:45:17 UTC +00:00 => 65.0,
        Thu, 12 Jun 2014 16:25:27 UTC +00:00 => 25.0,
        Mon, 16 Jun 2014 19:27:22 UTC +00:00 => 66.0,
        Mon, 16 Jun 2014 20:35:34 UTC +00:00 => 97.0,
        Tue, 01 Jul 2014 08:58:46 UTC +00:00 => 70.0,
        Mon, 07 Jul 2014 19:22:25 UTC +00:00 => 52.0,
        Wed, 23 Jul 2014 21:05:18 UTC +00:00 => 65.0,
        Mon, 25 Aug 2014 13:29:32 UTC +00:00 => 0.3
    },
    :discrete => true
},
[2] {
        :name => "Ambient Temperature",
        :data => {
        Fri, 16 May 2014 12:13:10 UTC +00:00 => 33.0,
        Tue, 10 Jun 2014 19:28:05 UTC +00:00 => 32.5,
        Wed, 11 Jun 2014 15:45:25 UTC +00:00 => 33.0,
        Thu, 12 Jun 2014 16:25:40 UTC +00:00 => 34.0,
        Mon, 16 Jun 2014 19:27:23 UTC +00:00 => 26.0,
        Tue, 01 Jul 2014 08:58:51 UTC +00:00 => 25.0,
        Mon, 07 Jul 2014 19:22:33 UTC +00:00 => 34.0,
        Wed, 23 Jul 2014 21:05:29 UTC +00:00 => 23.0,
        Tue, 12 Aug 2014 22:39:31 UTC +00:00 => 41.0,
        Mon, 25 Aug 2014 13:29:31 UTC +00:00 => 23.0
    },
    :discrete => true
},
[3] {
        :name => "smell",
        :data => {},
    :discrete => true
}
[1]撬动(#)>结果
[ 
[0] {
:name=>“正室压”,
:数据=>{
2014年6月12日星期四16:25:28 UTC+00:00=>正确,
2014年6月16日星期一19:27:21 UTC+00:00=>正确,
2014年7月1日星期二08:58:40 UTC+00:00=>正确,
2014年7月7日星期一19:21:42 UTC+00:00=>正确,
2014年7月23日星期三20:43:23 UTC+00:00=>正确,
2014年7月23日星期三21:05:04 UTC+00:00=>正确,
2014年7月25日星期五05:24:18 UTC+00:00=>假,
2014年8月25日星期一13:29:40 UTC+00:00=>正确
},
:离散=>真
},
[1] {
:name=>“房间湿度”,
:数据=>{
2014年5月16日星期五12:13:07 UTC+00:00=>65.0,
2014年6月10日星期二19:27:53 UTC+00:00=>64.0,
2014年6月11日星期三15:45:17 UTC+00:00=>65.0,
2014年6月12日星期四16:25:27 UTC+00:00=>25.0,
2014年6月16日星期一19:27:22 UTC+00:00=>66.0,
2014年6月16日星期一20:35:34 UTC+00:00=>97.0,
2014年7月1日星期二08:58:46 UTC+00:00=>70.0,
2014年7月7日星期一19:22:25 UTC+00:00=>52.0,
2014年7月23日星期三21:05:18 UTC+00:00=>65.0,
2014年8月25日星期一13:29:32 UTC+00:00=>0.3
},
:离散=>真
},
[2] {
:name=>“环境温度”,
:数据=>{
2014年5月16日星期五12:13:10 UTC+00:00=>33.0,
2014年6月10日星期二19:28:05 UTC+00:00=>32.5,
2014年6月11日星期三15:45:25 UTC+00:00=>33.0,
2014年6月12日星期四16:25:40 UTC+00:00=>34.0,
2014年6月16日星期一19:27:23 UTC+00:00=>26.0,
2014年7月1日星期二08:58:51 UTC+00:00=>25.0,
2014年7月7日星期一19:22:33 UTC+00:00=>34.0,
2014年7月23日星期三21:05:29 UTC+00:00=>23.0,
2014年8月12日星期二22:39:31 UTC+00:00=>41.0,
2014年8月25日星期一13:29:31 UTC+00:00=>23.0
},
:离散=>真
},
[3] {
:name=>“气味”,
:data=>{},
:离散=>真
}
]

!![我的测试表][1]

[1] :文本


生成图表的ERB如下所示:

我遇到了同样的问题,发现当数据点不共享X轴值时,会发生这种情况。因此,在您的示例中,数组中的每个哈希都需要相同的哈希键

编辑(2):我直接使用GoogleCharts散点图()实现了这一点。我不得不对数据做一些排列以使其工作。。。要获得多折线图效果,数据需要如下所示:

[['count',                  'users', 'page views', 'bounces'],
 [ new Date('09 Oct 2014'),   0,       null,         null ],
 [ new Date('10 Oct 2014'),   1,       null,         null ],
 [ new Date('11 Oct 2014'),   3,       null,         null ],
 [ new Date('12 Oct 2014'),   3,       null,         null ],
 [ new Date('09 Oct 2014'),   null,    2,            null ],
 [ new Date('11 Oct 2014'),   null,    15,           null ],
 [ new Date('12 Oct 2014'),   null,    17,           null ],
 [ new Date('10 Oct 2014'),   null,    null,         1    ],
 [ new Date('11 Oct 2014'),   null,    null,         10   ],
 [ new Date('12 Oct 2014'),   null,    null,         10   ]]

还有这个:。这是一个添加散点图的叉子,但我不想在ruby中进行必要的数据排列:P

我遇到了同样的事情,发现当数据点不共享X轴值时会发生这种情况。因此,在您的示例中,数组中的每个哈希都需要相同的哈希键

编辑(2):我直接使用GoogleCharts散点图()实现了这一点。我不得不对数据做一些排列以使其工作。。。要获得多折线图效果,数据需要如下所示:

[['count',                  'users', 'page views', 'bounces'],
 [ new Date('09 Oct 2014'),   0,       null,         null ],
 [ new Date('10 Oct 2014'),   1,       null,         null ],
 [ new Date('11 Oct 2014'),   3,       null,         null ],
 [ new Date('12 Oct 2014'),   3,       null,         null ],
 [ new Date('09 Oct 2014'),   null,    2,            null ],
 [ new Date('11 Oct 2014'),   null,    15,           null ],
 [ new Date('12 Oct 2014'),   null,    17,           null ],
 [ new Date('10 Oct 2014'),   null,    null,         1    ],
 [ new Date('11 Oct 2014'),   null,    null,         10   ],
 [ new Date('12 Oct 2014'),   null,    null,         10   ]]

还有这个:。这是一个添加散点图的叉子,但我不想在ruby中进行必要的数据排列:P

我也遇到了这个问题,并通过确保我的日期字段都是相同的值来修复它。因为我每天都在进行聚合,所以字段上的时间值毫无意义。通过将DateTime对象转换为Date对象,我很快解决了这个问题

User.first.created_.截止日期


我希望这有帮助

我也遇到了这个问题,并通过确保我的日期字段都是相同的值来修复它。因为我每天都在进行聚合,所以字段上的时间值毫无意义。通过将DateTime对象转换为Date对象,我很快解决了这个问题

User.first.created_.截止日期


我希望这有帮助

如前所述,这似乎是由于数据点不共享x轴值。然而,Highcharts可以很好地处理此类不规则数据,并且它受到chartkick的支持。只需源Highcharts(并将jQuery作为依赖项)而不是Google图表,例如

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="path/to/chartkick.js"></script>


对于演示,请查看:

正如前面的答案所提到的,这似乎是由于数据点不共享x轴值。然而,Highcharts可以很好地处理此类不规则数据,并且它受到chartkick的支持。只需源Highcharts(并将jQuery作为依赖项)而不是Google图表,例如

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="path/to/chartkick.js"></script>


对于演示,请查看:

我刚刚遇到了同样的问题,我已经解决了。如果其中一个数据元素为空哈希,则Chartkick无法绘制线

在您的例子中,第三个数组对象有一个空的数据散列。用下面的代码段替换它,您应该会看到行

[3] {
        :name => "smell",
        :data => {
         Fri, 16 May 2014 12:13:10 UTC +00:00 => 33.0,
         Tue, 10 Jun 2014 19:28:05 UTC +00:00 => 32.5
         }
        :discrete => true
}

我只是遇到了同样的问题,我也解决了。如果其中一个数据元素为空哈希,则Chartkick无法绘制线

在您的例子中,第三个数组对象有一个空的数据散列。用下面的代码段替换它,您应该会看到行

[3] {
        :name => "smell",
        :data => {
         Fri, 16 May 2014 12:13:10 UTC +00:00 => 33.0,
         Tue, 10 Jun 2014 19:28:05 UTC +00:00 => 32.5
         }
        :discrete => true
}

你能发布你的图表创建/显示代码吗?值正确-线没有画出来,这是一个额外的拼图,有太多的拼图块丢失了,无法把它放在一起。你能创建一个JS小提琴演示吗?类似于“您可以发布图表创建/显示的代码吗?”值正确-线条没有画出,但这是一个额外的拼图,缺少太多的拼图块,无法将其组合在一起。你能创建一个JS小提琴演示吗?类似于