Javascript 频谱时间序列图

我很难找到类似于我上面绘制的图表类型。它类似于染色体、光谱或条形码。它有一列（浅蓝色），表示数据集中与阈值相关的值范围。我希望用户能够指示时间范围，并查看在该时间范围内观察到哪些值（深蓝色）

最后，我希望将多个这样的数据集彼此相邻显示，它们共享一个标准化阈值。通过这种方式，我可以快速查看与同一时间范围内各个阈值相关的所有数据集

堆叠条形图在视觉上看起来最接近，但它不适用于timeseries数据，也不适用于二进制组（在范围内，不在范围内）

---

我需要为网络创建这个。我正在为项目中的其他图表使用amcharts，所以如果可能的话，我想使用它，但我对任何其他库都是开放的。对于类似图表类型、图表库或AMSCHARTS解决方案的建议，我们将不胜感激。

我建议尝试旋转（chart.rotate=true）AMSCHARTS序列图表，这将允许在纵轴上具有日期时间数据。我不使用堆积柱形图，而是使用辅助线（您可以为辅助线设置日期和toDate，并指定填充颜色/不透明度）

---

我看到的唯一问题是，引导线跨越了图表的整个宽度。为了解决这个问题，我会把两个（或者你需要的任何数字）图表放在一起

经过一段时间的搜索，我发现我可以使用Highchart的“列范围”图表得到一个非常接近的结果。我仍然需要手动循环时间序列数据或重新提取它来获得每个查询的值，但这并不是什么大问题

我使用类别作为数据源，使用系列作为范围和观测波段。与查询匹配的值进入具有适当类别索引的观察序列

series: [{
        name: 'range',
        stack: 0,
        data: [{
            x: 0,
            color: 'blue',
            low: -9,
            high: 3
        }, {
            x: 1,
            color: 'green',
            low: -2,
            high: 2
        }]
    },{
        name: 'observed',
        stack: 0,
        data: [{
            x: 0,
            low: 1,
            high: 1.1
        }, {
            x: 0,
            low: -5,
            high: -4.5
        }, {
            x: 0,
            low: -4,
            high: -2
        }, {
            x: 1,
            low: -1,
            high: 0
        }]
    }]

以下是完整JSFIDLE的链接：