频谱时间序列图

Question

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

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

堆积条形图在视觉上最接近，但它不适用于时间序列数据，也不适用于二进制组（范围内，不在范围内）。

我需要为网络创建这个。我正在项目中使用其他图表的amcharts，所以我想尽可能使用它，但我对任何其他库开放。建议使用类似的图表类型，图表库或amcharts解决方法。

Answer 1

我可以建议尝试旋转（chart.rotate = true）amCharts序列图，这将允许在垂直轴上显示日期时间数据。我会使用指南（您可以为指南设置日期和日期，并指定填充颜色/不透明度），而不是堆积柱形图。

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

Answer 2

经过相当多的搜索后，我发现使用Highchart的列范围可以获得非常接近的结果＆＃39;图表。我仍然需要手动循环遍历时间序列数据或重新拉取它以获取每个查询的值，但这并不是一件大事。

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

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
        }]
    }]

这是指向完整JSFiddle的链接：http://jsfiddle.net/tschie/6wfkpkt9/4/