时间间隔的JavaScript视觉时间线图

Question

过去几天我一直在使用vis.js试图实现我所需要的而没有成功。

我在线用户像列表： [{x: 09:00, y: 0}, {x: 09:10, y: 1}, {x: 09:20, y: 2}] 在这种情况下，我想画，将有3个长方形的图形，要先将00:10 x 0并不会是可见的，那么00:10 x 1和最后00:10 x 2所以最终结果会是这样的： enter image description here

我试图做的事情与visjs但我只能画一个图表（如函数是连续的）

然后我试图与酒吧这样做：但是酒吧宽度是固定的（我不能设置不同酒吧的每一个线条的宽度）

<div id="visualization"></div> 
<script type="text/javascript"> 
    var container = document.getElementById('visualization'); 
    var items = [ 
    {x: '09:00', y: 0}, 
    {x: '09:10', y: 1}, 
    {x: '09:20', y: 2} 
    ]; 

    var dataset = new vis.DataSet(items); 
    var options = { 
    start: '09:00', 
    end: '09:20' 
    }; 
    var graph2d = new vis.Graph2d(container, dataset, options); 
</script> 

Answer 1

像这样的东西应该工作：

function DateFromHours(date, hourString) { 
 
    var split = hourString.split(":"); 
 
    date.setHours(split[0]); 
 
    date.setMinutes(split[1]); 
 
    return date 
 
} 
 

 
var container = document.getElementById('visualization'); 
 
var items = [ 
 
    {x: "09:00", y: 0}, 
 
    {x: "09:10", y: 1}, 
 
    {x: "09:20", y: 2} 
 
]; 
 

 
items.forEach(function (item) { 
 
    item.x = DateFromHours(new Date(), item.x); 
 
}); 
 

 
var dataset = new vis.DataSet(items); 
 
var options = { 
 
    style:'bar', 
 
    barChart: {width:50, align:'center'}, // align: left, center, right 
 
    drawPoints: false, 
 
    dataAxis: { 
 
     icons:true 
 
    }, 
 
    orientation:'top', 
 
    start: DateFromHours(new Date(), '9:00'), 
 
    end: DateFromHours(new Date(), '10:00') 
 
}; 
 
var graph2d = new vis.Graph2d(container, items, options);

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script> 
 
<div id="visualization"></div>

我从this example派生它。您可以右键点击该页面并对其执行检查命令以查找它的JavaScript。

我看了api文档here它看起来你的x必须是一个有效的日期，所以我更新所有的值是有效的日期格式（可以解析日期应该工作的字符串，但'9： 00'对于日期解析器来说不够具体）。我使用forEach来更新你的数组中的对象的x属性。我还使用了在JavaScript中给出的Date对象的一些标准属性