表中的js时间序列/瀑布图

Question

我需要在表格中创建时间序列图。例如，chrome 开发工具中的网络选项卡是如何完成的（下图）。他们称之为“瀑布”。我从 d3 和 highcharts 中看到了几个例子，但它们只支持 y 轴上的单列。

我正在尝试显示一系列警报。因此，当警报发生/结束时，需要在不同的列和右侧的每一行中显示所有警报详细信息。

关于 javascript 库的建议？ d3可以吗？铬是如何做到的？对不起，如果它是重复的，我真的尝试过搜索类似的东西，但不知道到底要搜索什么。

编辑：澄清。

每个类别只有一分。但我需要将类别中的所有数据显示为列。从下面添加的示例中，需要显示粗体列标题。

例子：

+---------+------------+------------+---------+-- ------+--------+------------------+ | alert_id |警报名称 | alert_desc |等等……|开始 |结束 |时间序列.... | +---------+------------+------------+---------+-- ------+--------+------------------+ | a1 |名称1 |描述1 | ... |时间1 |时间2 | |==| | +---------+------------+------------+---------+-- ------+--------+------------------+ | a2 |名称2 |描述2 | .... |时间11 |时间22 | |=====| | +---------+------------+------------+---------+-- ------+--------+------------------+ | a3 |名称3 |描述3 | .... | .. | ... | |========| | +---------+------------+------------+---------+-- ------+--------+------------------+

Answer 1

你说的“他们只支持 y 轴上的一列”并不是很清楚，但是，是的，每个类别可以有多个点。我正在使用columnrange 系列。看看你需要的data 格式。您需要明确说明数据点的类别索引：

series: [{
    name: 'Temperatures',
    data: [
        {x: 0, low: -9.7, high: 9.4},
        {x: 0, low: 20.7, high: 30.4},

        {x: 1, low: -9.7, high: -5.5},

        {x: 2, low: 1, high: 20},
        {x: 2, low: 50, high: 55},
    ]
}]

最少的工作example。