[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

확대/축소

간트 차트는 특정 작업 또는 전체 프로젝트에 집중할 수 있도록 크기 조정(확대/축소)을 지원합니다. 이를 위해 timescale 클래스의 다음 메서드를 사용하여 다양한 줌(zoom) 작업을 수행할 수 있습니다.

  • zoomFactor: 시간 눈금(timescale)의 확대/축소 배율을 가져오거나 설정합니다.

  • zoomIn(): 시간 눈금을 다음 수준으로 확대합니다.

  • zoomOut(): 시간 눈금을 다음 수준으로 축소합니다.

  • zoomAuto(): 각 계층의 눈금 레이블에 따라 적절한 배율로 자동 확대합니다.

  • zoomTo(): 지정한 배율로 시간 눈금을 확대합니다.

  • zoomToRange(): 지정한 날짜 범위가 뷰포트 영역에 표시되도록 시간 눈금을 확대합니다.

다음은 시간 눈금에 대한 다양한 줌 작업을 보여주는 샘플 코드입니다:

// 확대/축소 배율을 가져오기
    var timescale = ganttSheet.project.timescale;   
    console.log(timescale.zoomFactor);
// 시간 눈금을 확대
   var timescale = ganttSheet.project.timescale;
   timescale.zoomIn();
// 시간 눈금을 축소
   var timescale = ganttSheet.project.timescale;
   timescale.zoomOut();
// 시간 눈금을 자동으로 확대
   var timescale = ganttSheet.project.timescale;
   timescale.zoomAuto();
// 지정한 배율로 시간 눈금을 확대
   var timescale = ganttSheet.project.timescale;
   var zoomFactor = 2;   timescale.zoomTo(zoomFactor);
// 지정한 날짜 범위로 시간 눈금을 확대
   var timescale = ganttSheet.project.timescale;
   var startDate = new Date(2023, 7, 6);
   console.log(startDate);
   var endDate = new Date(2023, 7, 13);
   console.log(endDate);
   timescale.zoomToRange(startDate, endDate);

아래 GIF는 간트 차트에서 다양한 줌 작업이 수행되는 모습을 보여줍니다.

Ask ChatGPT


TimescaleZoom