대각선 셀

SpreadJS의 대각선 셀 타입은 셀 내부에 대각선을 삽입할 수 있도록 해주는 셀 타입입니다. 이 셀 타입은 테이블 헤더를 디자인하거나 보고서에서 데이터 영역을 구분할 때 유용하게 사용할 수 있습니다.

대각선 셀은 대각선으로 구분된 여러 개의 텍스트 항목을 표시할 수 있습니다. 셀의 값은 이러한 항목들이 어떻게 표시될지를 결정합니다. 특정 셀에 대각선 셀 타입을 설정하려면 GC.Spread.Sheets.CellTypes.Diagonal() 메서드를 사용하면 됩니다. Excel로 내보낼 때, 대각선 셀은 이미지로 변환됩니다.

대각선 셀 서식

아래 섹션에서는 대각선 셀에 필요한 다양한 설정에 대해 설명합니다.

분기 방향

분기 방향은 대각선이 시작되어 끝나는 방향을 정의합니다. 분기 방향이 무엇이든 간에, 항목들은 항상 시계 방향으로, 상단부터 하단까지 순서로 배열됩니다. 셀 내부의 대각선을 어떤 방향으로 설정할지를 정의하려면 DivergeDirection 열거형의 속성을 사용합니다.

아래 표는 ["Year", "Product", "Region"] 항목을 표시할 때, 서로 다른 분기 방향에 따라 어떻게 표시되는지를 보여줍니다.

Ask ChatGPT

분기 방향	샘플 이미지
TopLeftToBottomRight
BottomLeftToTopRight

셀 값 유형

divergeDirection 설정에 따라 대각선의 분기 방향이 달라집니다. 대각선에 표시되는 값은 시트에서 해당 셀의 값(value) 에 따라 결정됩니다. setValue 메서드를 사용하여 셀의 값을 설정할 수 있습니다.

값 유형	설
String	셀 값이 문자열일 경우, 항목을 쉼표(`,`)로 구분합니다. 단, 이 경우 결과 항목에는 쉼표가 포함되지 않습니다. 예시: 셀 값: `"Year, Product, Region"` 결과 항목: `["Year", "Product", "Region"]` 쉼표 앞이나 뒤에 빈 문자열이 있더라도 유효한 항목으로 간주됩니다. 예시: 셀 값: `"Year, Product, Region,"` 결과 항목: `["Year", "Product", "Region", " "]`
Array	입력 항목에 쉼표를 포함하고 싶을 경우, 문자열 배열을 셀 값으로 설정합니다. 배열 항목이 문자열이 아닌 경우 자동으로 문자열로 변환됩니다. 예시: 셀 값: `sheet.setValue(0, 0, ["Year, Month", "Product", "Region, City"])` 결과 항목: `["Year, Month", "Product", "Region, City"]`
CalcArray	셀 값이 CalcArray인 경우, 해당 CalcArray는 단일 배열로 평탄화(flatten)되어 배열로 처리됩니다.
기타	기타 모든 값 유형은 문자열로 변환되어 처리됩니다.

참고: 셀 값이 문자열일 경우, 사용자는 해당 셀을 더블 클릭하거나 API를 통해 편집 모드로 진입하여 대각선 셀을 편집할 수 있습니다. 편집 모드에서는 입력 필드 및 수식 텍스트박스에 셀의 텍스트 값이 표시되며, 쉼표로 구분된 문자열을 입력하여 값을 수정할 수 있습니다.
단, 셀 값이 배열일 경우 셀 내에서 직접 편집할 수 없습니다.

항목 표시 규칙

항목 수 (Item counts)	표시 규칙 (Display rules)
항목 ≤ 1	일반 텍스트 셀처럼 동작함
항목 = 2	셀을 대각선으로 나눔
항목 = 3	대각선 끝점을 셀 길이나 높이의 1/3 지점에 고정
항목 > 3	항목 수에 따라 셀을 동일한 영역으로 나눔
항목 ≥ 10	인덱스 10까지만 표시되며, 그 이상의 항목은 무시됨

대각선 스타일

대각선 셀 타입은 대각선을 그릴 때 기본적으로 GC.Spread.Sheets.LineBorder('black',GC.Spread.Sheets.LineStyle.thin) 같은 스타일을 사용합니다:

lineBorder 메서드를 사용하여 대각선의 외형을 변경할 수 있으며, 이 대각선의 스타일은 일반 셀 테두리의 스타일과 동일하게 동작합니다.

대각선 셀 타입에 적용할 수 있는 스타일은 다음과 같습니다:

배경색
전경색
글꼴
글꼴 스타일
글꼴 크기
글꼴 두께

텍스트 방향

항목 수에 따라 텍스트의 그려지는 위치와 방향이 달라질 수 있습니다. 항목이 2개 또는 3개일 경우, 첫 번째와 마지막 항목은 수평으로 표시되며, 중간 항목은 대각선을 따라 기울여 표시됩니다. 하지만 항목이 3개를 초과하면 모든 항목이 대각선을 따라 기울여 표시됩니다.

텍스트 줄바꿈 및 클리핑

대각선 셀(Diagonal Cell)은 너비와 높이 모두 자동 맞춤을 지원합니다. 너비 자동 맞춤은 대각선 셀의 다양한 영역에서 모든 텍스트를 수평으로 표시할 수 있도록 조정하며, 높이 자동 맞춤은 텍스트가 한 줄에 들어가지 않을 경우 삼각형 영역 안에서 텍스트를 줄바꿈하여 표시합니다.

수평 항목의 경우, 텍스트가 셀 영역을 초과하면 먼저 줄바꿈을 시도하고, 그 후 남는 텍스트는 잘려서표시됩니다.

기울어진 항목의 경우, 텍스트가 셀 영역을 초과하면 바로 잘려서 표시됩니다.

참고: \n 또는 \r\n과 같은 하드 줄바꿈은 대각선 셀에서는 지원되지 않습니다.

오른쪽에서 왼쪽 레이아웃

워크시트가 오른쪽에서 왼쪽 방향으로 설정된 경우, 대각선 방향은 다음과 같이 반대로 적용됩니다:

분기 방향	왼쪽에서 오른쪽	오른쪽에서 왼쪽
TopLeftToBottomRight
BottomLeftToTopRight

다음 코드 샘플을 참조하여 대각선 셀 유형을 설정할 수 있습니다.

Ask ChatGPT

sheet.setRowHeight(1, 150);
sheet.setRowHeight(2, 120);
sheet.setColumnWidth(1, 140);

var diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
diagonalCellType.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.topLeftToButtomRight);
var style = new GC.Spread.Sheets.Style();
style.cellType = diagonalCellType;
style.foreColor = "green";
style.backColor = "#ddebf7";
style.font = "italic normal 15px Mangal";
sheet.setStyle(1, 1, style);
sheet.setValue(1, 1, ["Year", "Month", "Product", "Region, City"]);

var dialognalCellType2 = new GC.Spread.Sheets.CellTypes.Diagonal();
dialognalCellType2.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.bottomLeftToTopRight)
var lineStyle = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.thick);
dialognalCellType2.lineBorder(lineStyle);
var style1 = new GC.Spread.Sheets.Style();
style1.cellType = dialognalCellType2;
sheet.setStyle(2, 1, style1);
sheet.setValue(2, 1, "Bottom Left,To,Top Right");

SpreadJS 디자이너 사용하기

SpreadJS 디자이너에서도 대각선 셀 유형을 설정할 수 있습니다. 홈(HOME) 탭의 스타일(Style1s) 그룹에서 셀 편집기(Cell Editors) > 셀 형식(Cell Type) > 대각선(Diagonal) 옵션을 선택하면 됩니다.

DiagonalCellType.70ed1e

대각선 셀 유형(Diagonal CellType) 대화상자의 값(Value) 탭을 사용하면 셀 값 유형 설정, 항목 텍스트 표시, 시작점(Diverge Direction)을 설정할 수 있습니다.

DiagonalCellTypeDialog1.b98825

또한, 대각선 셀 유형(Diagonal CellType) 대화상자의 대각선 스타일(Diagonal Style) 탭에서는 필요에 따라 대각선의 스타일을 변경할 수 있습니다.

DiagonalCellTypeDialog2.e225ee