Question

我需要创建一个图表来显示用户输入的睡眠数据。用户将输入开始日期时间和结束日期时间，以及质量的数值。该图必须具有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轴。[Tick标签消失]） 4.'点'不与x轴刻度线直接对齐（工具提示也未对齐）

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

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

非常感谢对此图表的任何指导。

Answer 1

＆＃34;似乎使用列范围图表我必须使用类别x轴＆＃34;

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

Example此处：

http://jsfiddle.net/jlbriggs/cvfoqo7r/

重要的事情是

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

2）您可以使用轴标签，工具提示，dataLabels等格式化程序中的dateFormat（）方法建立标签格式

{{编辑评论中的问题

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

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

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

我在我的示例中简化了它，纯粹是出于我自己的方便，但是，如果您拥有像我设置的所有系列，或者像初始设置那样的多个系列，只要每个数据都不会产生影响。点被正确定义。

Highcharts复杂的列范围图

1 个答案: