javascript - Highcharts 复杂柱形图

Question

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

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

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

我创建了一个 fiddle 。它符合我的需求，但正如您所看到的，存在一些问题:1. 数据/逻辑已被操纵以适合 fiddle ，但在处理实际日期时间时会变得更加困难。2. columnrange 是实现我想要的效果的正确图形类型吗？3. 如何获得包含 sleep 质量值和日期时间范围的工具提示格式？ (我尝试添加显式类别，但这弄乱了 x 轴。[刻度标签消失了])4.“点”不直接与 x 轴刻度线对齐(工具提示也未对齐)

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

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

任何有关此图的指导将不胜感激。

Answer 1

"It seems that with a columnrange graph I must use a category x axis"

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

示例此处:

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

重要的是

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

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

{{编辑评论中的问题

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

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

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

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