javascript - 表内的 js 时间序列/瀑布图

标签 javascript d3.js graph highcharts time-series

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

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

关于 JavaScript 库的建议? d3可以吗? Chrome 是如何做到的?抱歉,如果它是重复的,我确实尝试过搜索类似的内容,但不知道到底要搜索什么。

enter image description here

编辑:澄清。

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

示例:

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

最佳答案

目前还不清楚“它们只支持 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 .

关于javascript - 表内的 js 时间序列/瀑布图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48468379/

相关文章:

javascript - 使用 jQuery AJAX 检索数据而无需在 php 中重新加载页面

javascript - AngularJS 1.2 的迁移路径

javascript - D3 单选和函数调用

javascript - 选择不更新数据

c - 为什么我的代码返回段错误?

javascript - ajax 请求中的 formdata 返回 Uncaught TypeError : Illegal invocation error

javascript - 如何使用 Javascript 打印到 HTML 标签

javascript - 使用 Jasper Reports 渲染 SVG 标记

algorithm - 分布式拓扑排序算法

algorithm - 这是我能得到的最好的复杂度吗?