스크롤

간트 차트의 시간 눈금을 뷰포트 영역과 함께 픽셀 단위, 틱(tick) 단위, 지정된 단위 또는 지정된 날짜로 스크롤할 수 있습니다.

timescale 클래스의 scroll 메서드를 사용하여 수평 또는 수직 방향의 스크롤을 활성화할 수 있습니다. 이 메서드와 함께 스크롤 동작에 영향을 주는 다음 속성들을 사용할 수 있습니다.

픽셀 단위로 시간 눈금 스크롤하기

scroll(pixels) 메서드를 사용하여 시간 눈금을 픽셀 단위로 스크롤할 수 있습니다.

시간 눈금은 가장 가까운 틱으로 스크롤됩니다. 양수 픽셀은 앞으로, 음수 픽셀은 뒤로 스크롤합니다.

// 픽셀 단위로 시간 눈금 스크롤
// 앞으로 스크롤
var pixels = 50;
ganttSheet.project.timescale.scroll(pixels);
// 뒤로 스크롤
var pixels = -50;ganttSheet.project.timescale.scroll(pixels);

한 틱(tick) 단위로 시간 눈금 스크롤하기

scrollOneTick() 메서드를 사용하여 시간 눈금을 한 틱 단위로 스크롤할 수 있습니다.

값을 true로 설정하면 앞으로, false 또는 생략 시 뒤로 스크롤됩니다.

// 한 틱 단위로 시간 눈금 스크롤
// 앞으로 스크롤
ganttSheet.project.timescale.scrollOneTick(true);
// 뒤로 스크롤
ganttSheet.project.timescale.scrollOneTick();

지정된 단위로 시간 눈금 스크롤하기

scrollBy(count, unit) 메서드를 사용하여 지정된 단위 수만큼 시간 눈금을 스크롤할 수 있습니다.

스크롤 단위는 GC.Spread.Sheets.GanttSheet.TimescaleUnit 타입이며, 다음 값을 포함합니다: years, halfYears, quarters, months, thirdsOfMonth, weeks, days, hours, minutes

시간 눈금은 가장 가까운 틱으로 스크롤되며, 양수는 앞으로, 음수는 뒤로 스크롤합니다.

// 지정된 단위로 시간 눈금 스크롤
// 3일 앞으로 스크롤
var unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.days;
var count = 3;
ganttSheet.project.timescale.scrollBy(count, unit);
// 5개월 뒤로 스크롤
var unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.months;
var count = -5;
ganttSheet.project.timescale.scrollBy(count, unit);

지정된 날짜로 시간 눈금 스크롤하기

scrollTo(date) 메서드를 사용하여 지정된 날짜로 시간 눈금을 스크롤할 수 있습니다.

시간 눈금은 가장 가까운 틱으로 스크롤됩니다.

// 지정된 날짜로 시간 눈금 스크롤
var date = new Date("2023/8/20");
ganttSheet.project.timescale.scrollTo(date);

뷰포트 내에서 대상 날짜가 스크롤될 위치를 백분율로 제어할 수 있습니다. 기본 백분율은 0이며, 이는 대상 날짜가 뷰포트의 왼쪽에 위치하도록 스크롤합니다.

아래 코드 샘플은 대상 날짜가 뷰포트의 중앙에 위치하도록 스크롤하는 방법을 보여줍니다.

// 뷰포트 중앙에 날짜가 오도록 스크롤
var date = new Date("2023/8/20");
var percentOfViewport = 0.1;
ganttSheet.project.timescale.scrollTo(date, percentOfViewport);

아래 GIF는 간트 차트의 다양한 시간 눈금 스크롤 동작을 보여줍니다.