2016-10-18 3 views
0

visjs 막대 그래프를 단일 타임 스탬프 대신 시간 간격으로 작성하는 방법/해결 방법이 있습니까?단일 타임 스탬프 대신 시간 간격에 대한 Visjs 막대 그래프

예를 들어 10 분 간격으로 막대를 표시하고 싶습니다. 막대 그래프의 데이터를 설정하기위한 표준 방법은 X 축에 단일 좌표 배열이다

var items = [ 
    {x: '2016-10-18 18:00:00', y: 10}, 
    {x: '2014-10-18 18:10:00', y: 8}, 
    {x: '2014-10-18 18:20:00', y: 9}, 
    {x: '2014-10-18 18:30:00', y: 5}, 
    ... 
] 

옵션에서 우리는 그 다음 소정의 배율 하에서 오른쪽 정렬하고 (예를 들면, 50 개 픽셀) 대 바 폭을 설정하면 그래프가 멋지게 표시됩니다 - 막대가 다음 타임 스탬프에 도달하면 너비가 겹치지 않고 줄어 듭니다. 여기에 실제 바 폭이 옵션

var options = { 
    style:'bar', 
    barChart: {width:50, align:'right'}, 
    drawPoints: false 
} 

graph with adjacent bars

그러나 그래프 스케일이 변경되는 경우, 어느 시점 바에서이 예를 들어하지 전체 간격 (10 분 정도 간격을 포함하는 시작에서 설정 한 값보다 작은 유의하시기 바랍니다). 옵션에서 설정 한 바 폭이 규모에서 다음 줄의 시작에 도달하지 않기 때문에 :

graph with not adjacent bars

나는 옵션에서에 더 큰 가치를 줄 너비를 설정하려고하지만 어느 시점 바에서 중복 시작 :

graph with overlapping bars

개선하기 위해 수행 할 수있는 조치가 있습니까?

답변

0

'end'속성을 항목에 추가하여이 작업을 수행 할 수 있습니다 (항상 있거나 최근에 추가되었는지는 확실하지 않음). end 속성이 항목에 대한 사용

var items = [ 
    {x: '2016-10-18 18:00:00', end: '2016-10-18 18:10:00', y: 10}, 
    {x: '2014-10-18 18:10:00', end: '2014-10-18 18:20:00', y: 8}, 
    {x: '2014-10-18 18:20:00', end: '2014-10-18 18:30:00', y: 9}, 
    {x: '2014-10-18 18:30:00', end: '2014-10-18 18:40:00', y: 5}, 
    ... 
] 

이는 options에서 width 속성이 무시됩니다 : 10 분 간격으로 질문의 항목은 다음과 같이 구성해야 얻을합니다.