高图表复杂的列范围图

Highcharts complex columnrange graph

本文关键字：范围 复杂 高图表      更新时间：2023-09-26

我需要创建一个图表来显示用户输入的睡眠数据。用户将输入开始日期时间和结束日期时间，以及质量的数值。图形必须将 y 轴作为时间，从下午 01：00（分钟）到下午 12：59（最大值）。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. 列范围是实现我想要的的正确图形类型吗？3. 如何使工具提示格式化为睡眠质量值和日期时间范围？（我尝试添加显式类别，但这弄乱了 x 轴。[刻度标签消失了]）4. "点"不直接与 x 轴刻度线对齐（工具提示也未对齐）

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

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

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

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

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

Example这里：

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

重要的是

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

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

{

{编辑评论中的问题

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

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

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

我

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

相关文章：