Gantt 간트 차트

간트 차트예요.

출처: 문서

본문

언제 사용하나요

사용자가 막대 그래프로 프로젝트, 진행 상황, 그 밖의 시간 관련 시스템 진전의 내재적 관계가 시간에 따라 어떻게 흘러가는지 보여 줘야 할 때 사용해요.

기본 사용법

• d-gantt-scale(시간 축) 컨테이너는 시간축 기준선의 위치 잡기 기준 부모 요소가 되므로, position을 설정하거나 table, td, th, body 요소여야 해요.

• d-gantt-scale(시간 축) 컨테이너와 d-gantt-bar(시간 막대) 컨테이너의 너비는 GanttService가 제공하는 메서드로 시작·끝 시간을 계산해 설정해야 하고, 초기화 후에는 ganttScaleConfigChange를 구독해 동적으로 설정해야 해요.

• 시간 막대의 move, resize 이벤트는 그 막대의 시작·끝 시간과 시간 축의 시작·끝 시간을 바꿔요. 시간 막대의 resize, move 이벤트와 ganttScaleConfigChange를 구독해서 변화를 기록하세요.

• 시간 막대의 move, resize 이벤트에 맞춰 가장 바깥 컨테이너의 스크롤을 조정하면 더 좋은 경험을 줄 수 있어요.

:::demo

<template>
  <d-fullscreen :zIndex="100" @fullscreenLaunch="fullscreenLaunch">
    <d-gantt :startDate="startDate" :endDate="endDate"></d-gantt>
  </d-fullscreen>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const curYear = new Date().getFullYear()

    const startDate = ref(new Date(curYear, 3, 1))
    const endDate = ref(new Date(curYear, 10, 1))
    const fullscreenLaunch = () => {}
    return {
      fullscreenLaunch,
      startDate,
      endDate,
    }
  },
})
</script>

<style></style>

:::

Gantt 파라미터

d-gantt 이벤트

더 알아보기 (Learn more)

시간 축 컨테이너와 시간 막대 컨테이너의 너비를 GanttService로 계산해 맞춰야 하는 저수준 컴포넌트예요. startDate와 endDate로 표시할 기간을 정해요.