테이블 테마

간트 시트는 시트의 기본 모양을 제어하기 위해 GC.Spread.Sheets.Tables.TableTheme를 적용할 수 있습니다.applyTableTheme를 사용하여 테마를 적용하면 간트 시트는 테마 스타일을 가져와 여러 UI 영역에 분산 적용합니다.

테마 적용 범위

간트 시트는 다음 세 가지 시각적 영역으로 구성됩니다.

• 테이블 영역(작업 목록)

• 타임스케일(타임라인 헤더)

• 간트 차트 영역(타임라인 본문 및 작업 표시줄)

각 영역은 TableTheme의 서로 다른 스타일 집합을 사용합니다.

다음 섹션에서는 각 영역이 테마를 적용하는 방식을 설명합니다.

테이블 영역

테이블 영역은 TableTheme 스타일 전체를 사용합니다.다음 스타일이 적용됩니다.

• wholeTableStyle

• headerRowStyle

• firstRowStripStyle

• secondRowStripStyle

• 테두리

• 글꼴 및 텍스트 색

• 줄무늬 행 스타일

테마에 정의된 줄무늬 행 스타일은 간트 시트에서 지원됩니다.

작업 계층 구조 렌더링

테마의 글꼴 설정은 기본 제공 계층 구조 규칙과 결합되어 작업 유형을 시각적으로 구분합니다.

테마는 다음을 제공합니다.

• 글꼴 패밀리

• 기본 글꼴 색

간트 시트는 계층 구조를 강조하기 위해 미리 정의된 크기 및 굵기 조정을 적용합니다.이를 통해 다음을 보장합니다.

• 프로젝트 요약 작업이 가장 두드러지게 표시됨

• 요약 작업이 시각적으로 구분됨

• 일반 작업은 중립적으로 유지됨

타임스케일

타임스케일은 타임라인의 헤더 영역입니다.시각적 스타일은 테이블 영역의 열 머리글과 일치합니다.

타임스케일은 테마의 헤더 관련 스타일을 사용합니다.

• 배경색

• 헤더 텍스트 글꼴

• 헤더 텍스트 색

• 가로 눈금선 색

• 세로 눈금선 색

눈금선 렌더링에는 테두리 색만 사용됩니다.

간트 차트 영역

간트 차트 영역에는 다음이 포함됩니다.

• 타임라인 배경

• 눈금선

• 작업 표시줄

• 연결선

• 비작업 시간 배경

TableTheme에 해당 정의가 있는 요소만 테마 스타일을 사용할 수 있습니다.

TableTheme에 의해 스타일이 지정되는 요소

다음 요소는 테마 스타일을 사용합니다.

• 배경색

• 가로 눈금선 색

• 세로 눈금선 색

• 작업 표시줄 텍스트 글꼴

• 작업 표시줄 텍스트 색

작업 표시줄 텍스트 스타일은 작업 스타일 규칙과 결합됩니다.둘 다 텍스트 스타일을 정의하는 경우 작업 스타일 규칙이 우선 적용됩니다.

눈금선 렌더링은 다음 규칙을 따릅니다.

• 눈금선에 특정 색이 정의되어 있으면 해당 색을 사용합니다.

• 눈금선에 선 스타일은 정의되어 있지만 색이 없는 경우 해당 테마의 테두리 색을 사용합니다.

• 선 스타일이 정의되지 않은 경우 눈금선은 렌더링되지 않습니다.

TableTheme로 제어되지 않는 요소

다음 요소는 TableTheme의 영향을 받지 않습니다.

• 작업 표시줄 본문 채우기 및 테두리

• 작업 표시줄 연결선

• 비작업 시간 배경

• 마지막 열의 특수 스타일

이러한 요소를 사용자 지정하려면 해당 간트 시트 API를 사용하세요.

스타일 우선순위

여러 스타일 지정 메커니즘을 사용하는 경우 실제 우선순위는 다음과 같습니다.

TaskBar styleRule / Component-level settings
    > GanttSheet-specific APIs
        > TableTheme

적용된 TableTheme는 기본 레이어만 제공합니다.

예제

테마 적용

ganttSheet.applyTableTheme(
    GC.Spread.Sheets.Tables.TableThemes.medium2
);

TableTheme를 적용하면 다음 영역의 기본 모양이 업데이트됩니다.

• 테이블 영역

• 타임스케일

• 간트 차트 배경 및 눈금선

• 작업 표시줄 텍스트

테마 적용 및 눈금선 활성화

눈금선 색은 적용된 테마에서 가져올 수 있습니다.

// 테마 적용
ganttSheet.applyTableTheme(
    GC.Spread.Sheets.Tables.TableThemes.medium3
);

// 가로 및 세로 눈금선 활성화
ganttSheet.options.gridline = {
    horizontal: { lineStyle: 1 },
    vertical: { lineStyle: 1 }
};

눈금선에 선 스타일이 정의되어 있지만 색이 명시적으로 지정되지 않은 경우 색은 적용된 TableTheme에서 가져옵니다.

현재 테마 가져오기

var theme = ganttSheet.getTableTheme();

이 메서드를 사용하여 현재 적용된 TableTheme 인스턴스를 가져올 수 있습니다.

테마 스타일 재정의

테마 스타일은 기본 레이어로 동작합니다. 컴포넌트 수준 설정은 적용된 테마보다 우선 적용됩니다.

// 기본 제공 테이블 테마 적용
ganttSheet.applyTableTheme(
    GC.Spread.Sheets.Tables.TableThemes.light2
);

// 작업 표시줄 모양 재정의(TableTheme보다 높은 우선순위)
var rule = ganttSheet.project.taskStyleRules.getRule('task');

rule.style.taskbarStyle.middleColor = 'Accent 1';
rule.style.taskbarStyle.topText = 'name';

var index = ganttSheet.project.taskStyleRules.getIndexByItem(rule);
ganttSheet.project.taskStyleRules.setItemAt(index, rule);

작업 스타일 규칙은 TableTheme 스타일보다 우선 적용됩니다.

참고 항목

• 문서 테마

• 작업 표시줄 스타일

• 작업 레이아웃

• 눈금선