시간 간격에 대한 JavaScript 시각적 타임 라인 그래프

Question

지난 며칠 동안 vis.js을 사용하여 성공하지 못하고 있습니다.

나는 그 같은 온라인 사용자의 목록을 가지고 : 나는 3 개 사각형이있을 것이다 그래프를 그리려는 이러한 경우에 [{x: 09:00, y: 0}, {x: 09:10, y: 1}, {x: 09:20, y: 2}] , 첫 번째 00:10 x 0되며 실 거예요 그럼, 마지막 00:10 x 1 마지막 00:10 x 2를 볼 수 있습니다 내가 visjs와 함께 일을하려고 enter image description here

하지만 난 단지 (함수가 연속 같은)

가 그럼 난 바로이 일을 시도 그래프를 그릴 수 있어요 : 결과는 무엇인가 같은 것하지만 바 너비가 고정되어있다. 각 막대 바의 폭)이 같은

<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에서 산출했다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 inspect 명령을 사용하여 javascript를 찾을 수 있습니다.

나는 API 문서 here을 보았습니다. 귀하의 모든 값이 유효한 날짜 형식 (날짜로 분석 할 수있는 문자열은 작동하지만 '9 : 00 '은 날짜 분석기에 충분하지 않습니다).

forEach을 사용하여 배열에있는 개체의 x 속성을 업데이트했습니다. 또한 JavaScript에서 제공되는 Date 객체의 표준 속성을 사용했습니다.