visjs 설정 옵션을 매번 영문으로 읽고 찾기가 번거로워 한국어로 번역.
현재 필요한 부분만 번역. 차차 추가 예정.
👉 공식 DOC 페이지
Configuration Options
옵션들은 타임라인 커스터마이징을 위해서 쓰이며, 옵션들은 JSON 객체로 정의된다. 모든 옵션들은 선택사항이다.
var options = {
width: '100%',
height: '30px',
margin: {
item: 20
{
};
| Name | Type | Default | Description |
|---|---|---|---|
| align | String | ‘center’ | ‘box’, ‘range’ 와 ‘background’ 타입의 아이템의 정렬을 정의. ‘auto'(default), ‘center’, ‘left’, ‘right’ 값을 사용 가능. ‘box’ 아이템에서 ‘auto’ 값은 ‘center’와 동일. ‘range’ 아이템에서 ‘auto’ 값은 동적이며 왼쪽에 위치하며 컨텐츠가 스크린에 항상 보여지게 움직인다. |
| autoResize | boolean | true | ‘true’인 경우, 컨테이너 사이즈가 변할 경우 타임라인은 자동으로 감지하여 자체적으로 다시 그린다. ‘false’인 경우, redraw() 함수를 이용하여 컨테이너 사이즈를 변경한 후 강제적으로 타임라인을 다시 그릴 수 있다. |
| clickToUse | boolean | false | |
| configure | boolean or function | false | |
| dataAttributes | string[] or ‘all’ | false | 배열에 따라 선택한 타임라인 항목에 ‘data-‘ 속성 형태의 DOM 요소를 추가 . 값이 ‘all’이면 타임라인의 모든 항목에 ‘data-‘ 속성 추가 |
| end | Date or Number or String or Moment | none | 타임라인 축의 초기 종료 날짜. 제공하지 않으면 항목 집합에 있는 가장 늦은 날짜가 종료 날짜로 간주. |
| format | object or function | none | |
| height | number or string | none | 타임라인 높이를 픽셀 또는 퍼센트로 정의. 높이 지정이 안되어 있거나 값이 null인 경우, 타임라인의 높이는 컨텐츠에 따라 높이가 자동으로 조정. ‘maxHeight’ 옵션을 이용하여 높이가 너무 길어지지 않도록 최대 높이값 설정도 가능. |
| horizontalScroll | boolean | false | 마우스 가로 스크롤 여부 설정. (false일 경우 타임라인이 확대 또는 축소됨) 이 옵션은 ‘zoomkey’ 옵션이 정의 되거나, ‘zoomable’ 옵션이 ‘false’로 정의 된 경우 사용 가능. |
| maxHeight | number or string | none | 타임라인의 최대 높이 값 설정 옵션. 숫자 또는 ‘300px’과 같은 문자열로 정의. |
| minHeight | number or string | none | 타임라인의 최소 높이 값 설정 옵션. 숫자 또는 ‘300px’과 같은 문자열로 정의. |
| moveable | boolean | true | 드래깅으로 타임라인을 움직이거나 확대 가능 여부를 설정. |
| showTooltips | boolean | true | ‘true’인 경우 |
| type | string | none | 타임라인 항목 기본 타입 설정. ‘box’, ‘point’, ‘range’, ‘background’ 중 선택. 개별 항목에서 이 설정 기본 타입 오버라이드 가능. undefined의 경우, 타임라인이 항목 데이터를 기반으로 자동으로 지정. |
| verticalScroll | boolean | false | |
| width | number or string | ‘100%’ | 타임라인 넓이를 픽셀 또는 퍼센트로 정의. |
| zoomable | boolean | true | 스크롤 또는 핀칭으로 타임라인을 확대하도록 설정. ‘moveable’ 옵션 설정이 ‘true’로 정의된 경우에만 사용 가능. |
| zoomKey | string | ” | 특정 키가 입력될 경우에만 타임라인을 확대하는 설정. ”(설정안함), ‘altKey’, ‘ctrlKey’, ‘shiftKey’ 또는 ‘metaKey’ 중 설정. ‘moveable’ 옵션 설정이 ‘true’로 정의된 경우에만 사용 가능. |
| start | Date or Number or String or Moment | none | 타임라인 축의 초기 시작 날짜. 제공하지 않으면 항목 집합에 있는 가장 빠른 날짜가 시작 날짜로 간주. |
| selectable | boolean | true | ‘true’인 경우, 타임라인의 항목 선택이 가능. 길게 |
| multiselect | boolean | false | ‘true’인 경우, ctrl+click, shift+click 또는 길게 항목을 누르면 항목 복수 선택이 가능하다. ‘selectable’ 옵션이 ‘true’인 경우에만 사용 가능. |
Leave a Reply