Rails Chartkick Lines未在多系列line_chart中绘制答案

【问题标题】：Rails Chartkick Lines not drawing in multi-series line_chartRails Chartkick Lines未在多系列line_chart中绘制
【发布时间】：2014-09-12 02:36:36
【问题描述】：

为什么线条没有连接图表上的点？我知道最后一个数组项没有数据，但我认为这不是问题。

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

[1]：http://i.stack.imgur.com/u4JkJ.jpgstrong 文字

ERB 生成图表如下：

【问题讨论】：

你能发布你的图表创建/显示代码吗？
值正确 - 线条未绘制
虽然这是一个额外的拼图，但缺少的部分太多，无法将其拼凑在一起。你能创建一个 JS fiddle 演示吗？类似highchart demo

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

【解决方案1】：

我也遇到了这个问题，并通过确保我的日期字段都是相同的值来修复它。由于我是按天进行汇总，因此字段上的时间值毫无意义。我通过将 DateTime 对象转换为 Date 对象快速解决了这个问题。

User.first.created_at.to_date

我希望这会有所帮助！

【讨论】：

【解决方案2】：

正如之前的答案所提到的，这似乎是由于数据点不共享 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>

如需演示，请查看：http://www.highcharts.com/demo/spline-irregular-time

【讨论】：

【解决方案3】：

我刚遇到同样的问题，我想通了。如果数据元素之一是空哈希，则 Chartkick 无法绘制线条。

在您的情况下，第三个数组对象有一个空的数据散列。用下面的 sn-p 替换它，你应该会看到行

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

【讨论】：

【解决方案4】：

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

编辑 (2)：我直接使用 Google Charts 散点图 (https://developers.google.com/chart/interactive/docs/gallery/scatterchart) 让它工作。我必须对数据进行一些排列才能使其工作...数据需要如下所示才能获得多折线图效果：

[['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   ]]

还有这个：https://github.com/JohnathanWeisner/chartkick/tree/FEATURE/Trendline。这是一个添加 scatter_chart 的分支，但我不想在 ruby 中进行必要的数据排列：P

【讨论】：

值正确 - 线条未绘制