[]
SpreadJS의 대각선 셀 타입은 셀 내부에 대각선을 삽입할 수 있도록 해주는 셀 타입입니다. 이 셀 타입은 테이블 헤더를 디자인하거나 보고서에서 데이터 영역을 구분할 때 유용하게 사용할 수 있습니다.
대각선 셀은 대각선으로 구분된 여러 개의 텍스트 항목을 표시할 수 있습니다. 셀의 값은 이러한 항목들이 어떻게 표시될지를 결정합니다. 특정 셀에 대각선 셀 타입을 설정하려면 GC.Spread.Sheets.CellTypes.Diagonal()
메서드를 사용하면 됩니다. Excel로 내보낼 때, 대각선 셀은 이미지로 변환됩니다.
아래 섹션에서는 대각선 셀에 필요한 다양한 설정에 대해 설명합니다.
분기 방향은 대각선이 시작되어 끝나는 방향을 정의합니다. 분기 방향이 무엇이든 간에, 항목들은 항상 시계 방향으로, 상단부터 하단까지 순서로 배열됩니다. 셀 내부의 대각선을 어떤 방향으로 설정할지를 정의하려면 DivergeDirection
열거형의 속성을 사용합니다.
아래 표는 ["Year", "Product", "Region"]
항목을 표시할 때, 서로 다른 분기 방향에 따라 어떻게 표시되는지를 보여줍니다.
Ask ChatGPT
분기 방향 | 샘플 이미지 |
---|---|
TopLeftToBottomRight | |
BottomLeftToTopRight |
divergeDirection
설정에 따라 대각선의 분기 방향이 달라집니다. 대각선에 표시되는 값은 시트에서 해당 셀의 값(value) 에 따라 결정됩니다. setValue
메서드를 사용하여 셀의 값을 설정할 수 있습니다.
값 유형 | 설 |
---|---|
String | 셀 값이 문자열일 경우, 항목을 쉼표( 예시: 셀 값: 결과 항목: 쉼표 앞이나 뒤에 빈 문자열이 있더라도 유효한 항목으로 간주됩니다. 예시: 셀 값: 결과 항목: |
Array | 입력 항목에 쉼표를 포함하고 싶을 경우, 문자열 배열을 셀 값으로 설정합니다. 배열 항목이 문자열이 아닌 경우 자동으로 문자열로 변환됩니다. 예시: 셀 값: 결과 항목: |
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 디자이너에서도 대각선 셀 유형을 설정할 수 있습니다. 홈(HOME) 탭의 스타일(Style1s) 그룹에서 셀 편집기(Cell Editors) > 셀 형식(Cell Type) > 대각선(Diagonal) 옵션을 선택하면 됩니다.
대각선 셀 유형(Diagonal CellType) 대화상자의 값(Value) 탭을 사용하면 셀 값 유형 설정, 항목 텍스트 표시, 시작점(Diverge Direction)을 설정할 수 있습니다.
또한, 대각선 셀 유형(Diagonal CellType) 대화상자의 대각선 스타일(Diagonal Style) 탭에서는 필요에 따라 대각선의 스타일을 변경할 수 있습니다.