Vue Gantt 차트에서 취소선을 취소하는 방법

Vue는 간트 차트 플러그인을 포함하여 웹 애플리케이션 개발에 사용할 수 있는 많은 플러그인과 라이브러리가 포함된 인기 있는 JavaScript 프레임워크입니다. 간트 차트는 프로젝트의 진행 상황과 일정을 표시할 수 있는 시각적 타임라인을 제공하는 매우 일반적인 프로젝트 관리 도구입니다. 그런데 간트차트 플러그인을 사용하다 보면 취소선이 나타나는 경우가 있습니다. 이번 글에서는 간트차트 플러그인의 취소선을 취소하는 방법을 소개하겠습니다.

1. 취소선의 의미 이해하기

간트 차트에서 취소선은 일반적으로 작업이나 기간이 종료되었거나 특정 이정표에 도달했음을 나타냅니다. 취소선은 작업 상태를 명확하게 나타내므로 팀의 모든 사람이 프로젝트가 어떻게 진행되고 있는지 알 수 있습니다. 그러나 취소선이 표시되는 것을 원하지 않는 경우 취소하는 방법은 다음과 같습니다.

2. Vue에서 간트 차트 플러그인 사용하기

Vue에서 간트 차트 플러그인을 사용하는 것은 매우 간단합니다. npm을 사용하여 플러그인을 설치하고 해당 구성 요소를 소개하고 구성하기만 하면 됩니다. 다음은 Gantt 차트 플러그인 설치 및 도입 방법에 대한 기본 Vue 프로젝트 구조와 샘플 코드입니다.

<template>
  <div>
    <gantt-chart :tasks="tasks" :options="options" />
  </div>
</template>

<script>
import GanttChart from 'vue-gantt-chart';

export default {
  name: 'App',
  components: {
    GanttChart
  },
  data() {
    return {
      tasks: [
        {
          name: '任务1',
          start: '2022-02-01',
          end: '2022-02-03'
        },
        {
          name: '任务2',
          start: '2022-02-03',
          end: '2022-02-05'
        }
      ],
      options: {
        mode: 'day',
        showLastLine: true
      }
    };
  }
};
</script>

위 코드에서는 vue-gantt-chart 플러그인을 설치하고 Vue 컴포넌트로 등록했습니다. 또한 두 개의 작업과 해당 작업의 시작 및 종료 날짜를 포함하는 작업 개체를 정의합니다. 옵션 개체를 사용하면 Gantt 다이어그램의 모드 및 기타 옵션을 정의할 수 있습니다.

3. 취소선 취소

이제 취소선 취소 방법을 살펴보겠습니다. 벗기는 것은 매우 쉽습니다. 취소선을 나타내는 CSS 스타일을 "없음"으로 설정하기만 하면 됩니다.

다음은 간트 차트의 취소선을 취소하는 간단한 CSS 스타일시트입니다.

.gantt .bar-line {
  display: none;
}

위의 CSS 스타일시트를 Vue 구성 요소에 포함하여 간트 차트의 취소선을 취소할 수 있습니다. 특정 작업에 대한 취소선만 제거하려는 경우 해당 작업에 대해 별도의 CSS 클래스를 만들고 이를 해당 특정 작업에 대한 막대 차트에 적용할 수 있습니다.

예를 들어 작업 1의 취소선을 취소하려면 구성 요소에 다음 CSS 코드를 추가하면 됩니다.

.gantt .task.task1 .bar-line {
  display: none;
}

위 코드에서는 작업 1에 대한 CSS 클래스를 만들고 "task1"을 다음과 같이 사용했습니다. 수업 이름 . 또한 "display:none"을 사용하여 취소선 스타일을 "none"으로 설정했습니다.

4. 요약

Vue에서 Gantt 차트 플러그인을 사용하는 것은 매우 간단하며 취소선을 제거하는 것도 쉽습니다. 간트 차트에서 취소선을 취소하려면 취소선을 나타내는 CSS 스타일을 "없음"으로 설정하면 됩니다. 또한 특정 작업에 대한 CSS 클래스를 별도로 생성하여 작업 취소선을 취소할 수도 있으므로 유연성과 제어력이 향상됩니다.

위 내용은 Vue Gantt 차트에서 취소선을 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!