Gantt 차트는 프로젝트 관리 소프트웨어에서 일반적으로 사용되어 이해 관계자가 프로젝트 일정 및 타임라인을 추적할 수 있도록 합니다.

이 차트는 프로젝트, 타임라인, 기한, 활동과 작업 간 관계를 빠르게 확인하고 시각적 막대 스타일 표시로 여러 단계를 투영할 수 있기 때문에 매우 쉽게 이해할 수 있습니다.

아래 지침을 따르면 고유한 JavaScript 프로젝트 관리 스프레드시트에 동일한 Gantt 차트 기능을 쉽게 추가할 수 있습니다.

SpreadJS 스프레드시트 조건부 서식 기능과 개발자 라이선스에 포함된 연관된 Spread Designer를 사용하여 JavaScript 코드를 한 줄도 작성하지 않고 이 샘플을 완성할 것입니다!

디자이너를 설치해야 하는 경우 문서를 참조하십시오.

작업 및 날짜

이 샘플의 경우 새 웹사이트를 빠르게 만들기 위해 타임라인을 만들어 보겠습니다.

Gantt 차트의 기본 데이터 소스는 작업 목록, 해당하는 시작 날짜와 종료 날짜입니다. 다음 표는 해당 작업과 데이터베이스 또는 다른 파일에 저장될 수 있는 날짜일 수 있습니다.

다음으로, 달력 날짜, Gantt 차트 막대, 티켓 또는 시작/종료 날짜가 변경되는 경우 막대 타임라인을 자동으로 업데이트하는 옵션이 포함된 프로젝트 타임라인을 추가합니다.

타임라인 설정

1. 표에 시작 주 날짜를 추가하여 시작합니다. 예를 들어, 셀 E4에 "3/1/2021"을 추가합니다.
2. 날짜만 표시하여 날짜의 서식을 지정합니다. 아래 지침에 따라 지정할 수 있습니다.

• 셀을 선택합니다.

• 마우스 오른쪽 버튼을 클릭하고 "셀 서식" 옵션을 선택합니다.

• 숫자 탭의 범주 상자에서 "사용자 정의"를 선택합니다.

• 대화 상자 오른쪽에 있는 유형 필드에 d를 입력합니다.

• 확인을 선택합니다.

3. 셀 F4에 =1+E4를 입력한 다음 (셀 Y4까지) 끌어 3주에 해당하는 날짜를 입력합니다.

4. 이제 주 헤더를 추가해 보겠습니다. E4:K4 셀을 선택한 다음 병합하고 가운데 맞춤 리본 옵션을 선택합니다.

5. E3, "=E3"을 참조하여 날짜를 추가합니다. 다른 2주(L4:R4 및 S4:Y4)에 대해서도 동일하게 수행합니다. 이러한 수식의 경우 두 번째 주에는 "=E3+7"을, 세 번째 주에는 "=L3+7"을 사용합니다.

6. 다음으로, 요일 이름을 추가해 보겠습니다. 이 샘플의 경우 주 이름의 첫 글자만 표시하고 싶습니다. 셀 E5에 "=LEFT(TEXT(E4,"ddd"),1)" 수식을 입력하면 됩니다. 이 셀을 오른쪽으로 끌어 채워 이 수식을 이 행의 다른 셀에도 적용합니다.

결과가 다음 이미지처럼 표시됩니다. 여기서 했던 것처럼 테두리와 색상을 추가하여 타임라인을 시각적으로 분리할 수도 있습니다,

조건부 서식을 통해 Gantt 차트에 막대 추가

이 예에서는 조건부 서식을 사용하여 Gantt 차트 막대를 생성합니다. 타임라인의 날짜가 작업의 시작 날짜와 종료 날짜 사이에 있는 경우 이러한 셀은 회색으로 채워집니다. 수식을 사용하여 이 규칙을 추가합니다.

SpreadJS 디자이너에서 다음 작업을 수행합니다.

1. Gantt 막대가 표시될 영역을 선택합니다. 이 예에서는 다음 셀입니다. E7:Y10,E12:Y15,E17:Y19,E21:Y22,E24:Y26. 프로젝트 단계에 할당된 셀을 제외했습니다.

2. 홈 탭에서 조건부 서식 메뉴를 선택합니다.

3. 새 규칙을 클릭합니다.

4. 규칙 유형으로 "수식을 사용하여 서식을 지정할 셀 결정"을 선택합니다.

5. 수식을 입력합니다. 이 경우에는 "=AND(E$4>=$B7,E$4<=$C7)" 수식을 입력합니다.

6. 서식 → 채우기를 클릭하고 배경으로 노란색을 선택합니다.

7. "확인"을 클릭합니다.

타임라인을 더욱 동적으로 만들기

타임라인을 더욱 동적으로 만들기 위해 다음 방법으로 계속 진행할 수 있습니다.

스프레드시트에 프로젝트 시작 및 주를 추가합니다. 이러한 변수는 사용자가 입력하고 해당 값에 따라 타임라인이 변경됩니다. 더 쉽게 이해하기 위해 해당 셀에 나중에 사용해야 할 특정 이름을 추가할 수 있습니다.

셀에 이름을 설정하려면 다음을 수행합니다.

1. 수식 탭에서 이름 관리자를 선택합니다.

2. 팝업에서 새로 만들기 버튼을 클릭하고 셀 이름을 설정합니다. 또한 메모를 추가하고 참조를 변경할 수 있습니다.

3. 동일한 프로세스를 반복하여 주에 대한 이름을 설정합니다.

4. 이름을 설정한 후 Gantt 타임라인의 첫 번째 날짜는 처음에 설정한 "3/1/2021"이 아니지만 수식(=project_start+(week-1)*7)으로 변경해야 합니다.

그렇게 한 후 프로젝트의 시작 날짜나 주를 변경하면 전체 타임라인이 변경됩니다.

진행률 열 추가

이 단계에서는 Gantt 표에서 TASK 다음에 새 열을 만들고 이름을 Progress라고 지정합니다. 이 열에는 특정 작업의 완료 비율이 포함됩니다. 좀 더 흥미롭게 만들기 위해 조건부 서식을 사용하여 백분율을 더 잘 표현할 수 있습니다.

1. 진행률 표시줄이 위치할 영역을 선택합니다.

2. 홈 탭에서 조건부 서식 메뉴를 선택합니다.

3. 데이터 막대를 선택한 다음 단색 채우기를 선택합니다.

단계의 진행률과 시작 날짜 및 종료 날짜를 계산할 수 있어 차트를 볼 때 더 많은 정보를 확인할 수 있습니다.

막대 일부에 다른 색으로 음영을 지정하여 차트에 진행률 표시하기

진행률을 바탕으로 막대의 일부에 음영을 지정하려면 조건부 서식을 사용할 수 있습니다. 방금 했던 것처럼 다른 수식을 사용하여 회색 막대를 추가할 때 음영 옵션을 추가할 수 있습니다. 따라서 다음과 같이 진행합니다.

1. 진행률(progress), 시작 날짜(start) 및 종료 날짜(end)에 속한 셀에 대해 사용자 정의 이름을 만듭니다. 이름을 만들기 위해 프로젝트 시작 및 주에 대해 사용자 정의 이름을 만들었을 때 사용한 로직을 따를 수 있습니다.

참고: 참조는 절대적이지 않습니다. 사용자 정의 이름은 특정 열의 행 7에서 시작하는 모든 행에 사용됩니다.

2. Gantt 막대가 표시될 영역을 선택합니다. 이 예에서는 다음 셀입니다. F7:Z10,F12:Z15,F17:Z19,F21:Z22,F24:Z26 - 프로젝트 단계에 할당된 셀을 제외했습니다.

3. 조건부 서식 → 새 규칙 → "수식을 사용하여 서식을 지정할 셀 결정"을 선택합니다.

4. *"=1AND(F$4>=start,F$4<=start+(progress(end-start+1))-1)"* 수식을 입력합니다.

5. 서식 → 채우기를 클릭하고 배경으로 녹색을 선택합니다.

6. "확인"을 클릭합니다.

참고: 작업 기간이 5일이고 50% 완료된 경우에는 2일만 강조 표시됩니다.

상태 및 우선순위 열 추가

상태 및 진행률 열을 추가하기 위해 조건부 서식을 한 번 더 사용합니다.

먼저, 상태 열을 추가하고 값으로 진행률 셀을 참조합니다. 상태 표시기는 진행률 값에 따라 다른 색일 수 있습니다.

그런 다음 위 지침의 아래 부분으로 이동합니다.

1. 영역을 선택합니다.

2. 조건부 서식 → 새 규칙→ "값을 기준으로 모든 셀의 서식 지정"을 선택합니다.

3. 서식 스타일에서 "아이콘 집합"을 선택합니다.

4. 오른쪽 아이콘 스타일을 선택한 다음 "아이콘만 표시"를 클릭합니다.

5. 상태 원의 간격을 할당합니다. 0% - 검은색, 1~33% - 빨강, 34~66% - 노랑, 67~100% - 녹색.

6. "확인"을 클릭합니다.

그런 다음 작업 우선순위에 대해 다른 열을 추가해야 합니다. 이 열에서는 작업의 우선순위 (1-매우 높음, 4-낮음)를 결정해야 합니다.

그런 다음 아래 지침을 따릅니다.

1. 영역을 선택합니다.

2. 조건부 서식 → 새 규칙→ "값을 기준으로 모든 셀의 서식 지정"을 선택합니다.

3. 오른쪽 아이콘 스타일을 선택한 다음 "아이콘만 표시" 및 "아이콘 순서 거꾸로"를 선택합니다.

4. 간격을 할당합니다.

5. "확인"을 클릭합니다.

개요 열을 사용하여 단계 계층화

현재, 글꼴을 굵게 설정했기 때문에 단계가 구별됩니다. SpreadJS에서는 outlineColumn 속성을 사용하여 트리 보기에서 계층 데이터를 표시합니다. 이렇게 하려면 지침을 따릅니다.

1. 작업 셀을 선택하고 (마우스 오른쪽 버튼을 클릭하여) 상황에 맞는 메뉴를 엽니다.

2. 셀 서식을 선택합니다.

3. 텍스트 맞춤 의도를 1로 늘립니다. 그러면 작업 셀의 텍스트가 오른쪽으로 조금 더 이동합니다.

4. 단계 및 작업 텍스트 셀이 있는 열을 선택합니다. 마우스 오른쪽 버튼으로 클릭하고 개요 열을 선택합니다.

5. 최대 수준을 1로 늘리고 표시기 표시를 선택합니다. 사용자 정의 표시기 이미지를 선택하고 원하는 경우 다른 표시기를 사용할 수 있습니다. 기본적으로 표시기는 작은 삼각형입니다.

아래에서는 Gantt 차트가 작동하는 방식을 볼 수 있습니다. 타임라인은 동적이기 때문에 프로젝트 시작 날짜를 변경할 때마다 Gantt 타임라인도 바뀝니다.

표시를 위해 타임라인에 3주만 포함했지만 Week 변수를 변경하여 다른 주의 상태를 볼 수 있습니다.

또한 차트의 시작 날짜 및 종료 날짜와 진행률을 변경할 수도 있으며, 이는 Gantt 차트에 반영됩니다.

결론

사용자 정의 가능한 SpreadJS JavaScript 스프레드시트는 자세한 작업 일정, 진행률 및 업데이트가 포함된 사용자 정의 Gantt 보기를 만들기 위한 가장 유연한 컴포넌트입니다. 수식과 서식을 사용하여 필요에 맞춰 추가 열 및 계산으로 개선할 수 있습니다.

• SpreadJS의 무료 체험판을 다운로드 하여 Excel과 유사한 JavaScript 스프레드시트와 훨씬 더 많은 비즈니스에 필요한 기능을 엔터프라이즈 응용 프로그램에 얼마나 쉽게 포함할 수 있는지 살펴보세요.

• 첨부 파일을 통해 예제를 다운로드하여 따라해 보실 수 있습니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ