Highcharts 复列范围图

Posted 2023-03-14

【中文标题】Highcharts 复列范围图

【英文标题】：Highcharts complex columnrange graph

【发布时间】：2015-01-19 16:25:35

【问题描述】：

我需要创建一个图表来显示用户输入的睡眠数据。用户将输入开始日期时间和结束日期时间，以及质量的数值。图表必须将 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/

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

【问题讨论】：

看起来像甘特图，见简单演示here和here

【参考方案1】：

“似乎对于柱状图，我必须使用类别 x 轴”

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

Example这里：

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

重要的是

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

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

编辑 cmets 中的问题

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

Highcharts.setOptions(
        global:
            useUTC: false
        
    );

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

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

【讨论】：

我已经按照您的示例获得了我需要的更接近的版本。我仍然有 2 个问题： 1. 我怎样才能让传说看起来像我在第一小提琴中所做的那样？ 2.如何获取本地时间的y轴时间？在这里小提琴：jsfiddle.net/1avsz1gL/2

我关闭了 useUTC 选项。我添加了一些工具提示格式，并将数据更改为不同的系列对象。我不确定两者是否正常工作。小提琴：jsfiddle.net/1avsz1gL/4