javascript - 显示带有日期和状态的设备的在线离线状态js jquery d3

Question

我一直在尝试用这种数据创建一个栏

"data":[
         ["2016-12-18 00:25:20",1],
         ["2016-12-19 00:25:20",0],
         ["2016-12-19 00:26:18",1],
         ["2016-12-19 05:50:21",0],
         ["2016-12-19 05:51:19",1],
         ["2016-12-20 05:25:46",0],
         ["2016-12-20 05:27:03",1],
         ["2016-12-20 05:50:17",0],
         ["2016-12-20 05:51:17",1],
         ["2016-12-21 03:25:43",0],
         ["2016-12-21 03:26:42",1],
         ["2016-12-21 05:50:27",0],
         ["2016-12-21 05:51:41",1],
         ["2016-12-22 03:25:30",0],
         ["2016-12-22 03:26:41",1],
         ["2016-12-22 05:50:22",0],
         ["2016-12-22 05:51:22",1]
     ]

这个日期和时间是设备上线或离线的时间段，其中1和0分别代表在线和离线，我一直使用https://github.com/flrs/visavail d3j 实现以获得如下结果

这个想法已在 https://uptimerobot.com/ 中实现.

flrs 的 Visavail 目前没有给出正确的结果，我只是想知道是否有人对此有其他想法。或者知道一些 d3 实现来显示这样的栏，或者如果我们从中取出 d3 并仅在 Jquery 或 JS 中执行此操作，是否可以创建这样的栏？有这样的数据吗？

Answer 1

没那么复杂，您可以使用简单的 line 元素来完成。

在此演示中，我绘制所有线条，但根据在线/离线状态设置不透明度:

var data = [
    ["2016-12-18 00:25:20", 1],
    ["2016-12-19 00:25:20", 0],
    ["2016-12-19 00:26:18", 1],
    ["2016-12-19 05:50:21", 0],
    ["2016-12-19 05:51:19", 1],
    ["2016-12-20 05:25:46", 0],
    ["2016-12-20 05:27:03", 1],
    ["2016-12-20 05:50:17", 0],
    ["2016-12-20 05:51:17", 1],
    ["2016-12-21 03:25:43", 0],
    ["2016-12-21 03:26:42", 1],
    ["2016-12-21 05:50:27", 0],
    ["2016-12-21 05:51:41", 1],
    ["2016-12-22 03:25:30", 0],
    ["2016-12-22 03:26:41", 1],
    ["2016-12-22 05:50:22", 0],
    ["2016-12-22 05:51:22", 1]
];

var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");

data.forEach(d => d[0] = parseTime(d[0]));

var scale = d3.scaleTime()
    .domain(d3.extent(data, d => d[0]))
    .range([0, 300])

var svg = d3.select("svg");

var lines = svg.selectAll(".lines")
    .data(data)
    .enter()
    .append("line")
    .attr("y1", 50)
    .attr("y2", 70)
    .attr("x1", d => scale(d[0]))
    .attr("x2", d => scale(d[0]))
    .attr("stroke", "red")
    .attr("stroke-width", 1)
    .attr("opacity", d => d[1] ? 1 : 0);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<rect x="0" y="50" width="300" height="20" fill="lightgreen"></rect>
</svg>

编辑:再次阅读您的问题，现在我看到您的时间间隔发生了变化:每个日期显示一个周期的开始时间和前一个周期的结束时间。我的错。

这是另一个片段。这(也是)一个非常简单的代码，我在其中绘制从给定日期开始到下一个日期结束的矩形。在线时段矩形为“绿色”，离线时段为“红色”:

var data = [
    ["2016-12-18 00:25:20", 1],
    ["2016-12-19 00:10:20", 0],
    ["2016-12-19 00:36:18", 1],
    ["2016-12-19 05:50:21", 0],
    ["2016-12-19 05:59:19", 1],
    ["2016-12-20 05:25:46", 0],
    ["2016-12-20 05:37:03", 1],
    ["2016-12-20 05:50:17", 0],
    ["2016-12-20 06:58:17", 1],
    ["2016-12-21 03:25:43", 0],
    ["2016-12-21 03:36:42", 1],
    ["2016-12-21 05:50:27", 0],
    ["2016-12-21 06:09:41", 1],
    ["2016-12-22 03:25:30", 0],
    ["2016-12-22 04:26:41", 1],
    ["2016-12-22 05:50:22", 0],
    ["2016-12-22 05:51:22", 1]
];

var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");

data.forEach(d => d[0] = parseTime(d[0]));

var scale = d3.scaleTime()
    .domain(d3.extent(data, d => d[0]))
    .range([0, 500])

var svg = d3.select("svg");

var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect")
    .attr("y", 50)
    .attr("height", 20)
    .attr("x", d => scale(d[0]))
    .attr("width", (d, i) => {
        if (data[i + 1]) {
            return scale(data[i + 1][0]) - scale(d[0])
        } else {
            return 0
        }
    })
    .attr("fill", d => d[1] ? "lightgreen" : "red");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500">
</svg>