0

我需要创建一个图表来显示用户输入的睡眠数据。用户将输入开始日期时间和结束日期时间，以及质量的数值。图表必须将 y 轴作为时间，从 01:00 PM（最小）到 12:59 PM（最大）。x 轴必须是睡眠发生的日期，如下所示：“2015 年 1 月 1 日 - 2015 年 1 月 2 日”（即一个“点”的刻度标签）（请参阅小提琴以进行澄清）。最后，“点”将根据睡眠质量值进行颜色编码。正在使用的数据被格式化： 

{  
    fromDate: "01/18/2015 22:15:00",  
    toDate: "01/19/2015 06:15:00",  
    value: 7  
}

我遇到的问题是让所有这些都正常工作。似乎对于列范围图，我必须使用类别 x 轴。恐怕这不会像日期时间 x 轴那样有效，尤其是对于更大的数据集。

我创造了一个小提琴。它在我需要的正确轨道上，但正如您所看到的，存在一些问题： 1. 数据/逻辑已被操纵用于小提琴，但在使用实际日期时间时会更加困难。2. columnrange 是正确的图表类型来实现我想要的吗？3. 如何获取使用睡眠质量值和日期时间范围格式化的工具提示？（我尝试添加明确的类别，但弄乱了 x 轴。[刻度标签消失]） 4.“点”不直接与 x 轴刻度线对齐（工具提示也未对齐）

似乎当我尝试添加一个功能时，另一个功能开始出现故障。

http://jsfiddle.net/XBmB5/59/

对此图表的任何指导将不胜感激。

4

1 回答 1

1

“似乎对于列范围图，我必须使用类别 x 轴”

我不确定您的意思 - 在这种情况下，您可以对 x 轴和 y 轴使用日期时间轴。

Example这里：

重要的是

1) 对于 y 轴，由于时间就是您想要的，您需要建立基准日期，并且您可以将时间详细信息添加到这些基准日期（请参阅示例顶部的 curDate/prevDate 内容）

2) 您可以在轴标签、工具提示、dataLabels 等的格式化程序中使用 dateFormat() 方法建立标签格式

{{编辑评论中的问题

要获取本地时间，请在全局设置中将 useUTC 设置为 false：

Highcharts.setOptions({
        global:{
            useUTC: false
        }
    });

要按照以前的方式设置图例，只需恢复到以前的系列结构即可。

我在我的示例中简化了它，纯粹是为了我自己的方便，但是只要每个数据点都正确定义，无论您是否拥有像我的设置一样的所有一个系列，还是像您的初始设置一样的多个系列，都不会产生影响。

于 2015-01-19T17:04:34.030 回答