表

Question

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

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

关于javascript库的建议？ d3有可能吗？铬如何做到这一点？很抱歉，如果它重复，我真的尝试搜索类似的东西，但不知道究竟要搜索什么。

编辑：澄清。

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

示例：

+----------+------------+------------+---------+--------+--------+------------------------------+
| alert_id | alert_name | alert_desc | etc.... | start  | end    | timeseries....               |
+----------+------------+------------+---------+--------+--------+------------------------------+
| a1       | name1      | desc1      | ...     | time1  | time2  |    |==|                      |
+----------+------------+------------+---------+--------+--------+------------------------------+
| a2       | name2      | desc2      | ....    | time11 | time22 |       |=====|                |
+----------+------------+------------+---------+--------+--------+------------------------------+
| a3       | name3      | desc3      | ....    | ..     | ...    |                   |========| |
+----------+------------+------------+---------+--------+--------+------------------------------+

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。