GrapeCity의 SpreadJS v14 릴리스에는 JavaScript 응용 프로그램 개발을 위한 몇 가지 새로운 기능과 기존 기능이 포함되어 있습니다. 이러한 기능은 다음 영역에서 효과적입니다.

• 새로운 v14 디자이너 컴포넌트
• 셀 상호 작용
• 계산 능력 향상
• 차트 기능 향상

새로운 v14 디자이너 컴포넌트

GrapeCity의 SpreadJS 디자이너는 SpreadJS로 Excel과 유사한 사용자 인터페이스를 구현한 것입니다. 리본, 상태 표시줄, 수식 입력줄, 상황에 맞는 메뉴, 연결된 대화 상자 등의 기능이 있습니다.

기본 SpreadJS 제품은 디자이너의 무료 데스크톱 버전으로 구성되어 있으며, 개발자는 이 버전을 자신의 컴퓨터에 설치해 스프레드시트 템플릿 디자인 능력을 향상할 수 있습니다.

지난 몇 년 동안 고객은 자신의 응용 프로그램에서 구현할 수 있는 디자인 인터페이스를 요청했습니다.

이에 응답하여 GrapeCity는 Spread 디자이너 컴포넌트라고 하는 별도의 애드온 제품을 만들었습니다. GrapeCity는 SpreadJS 디자이너를 컴포넌트화하여 유연성을 높였습니다. SpreadJS v14 디자이너에 포함된 기능은 다음과 같습니다.

• 리본의 탭에서 버튼을 추가 또는 삭제
• 스타일 지정을 변경할 수 있는 옵션
• 다양한 버튼의 기능을 변경할 수 있는 기능
• 사용자 정의 대화 상자

이 애드온을 구매하시면 응용 프로그램의 SpreadJS 디자이너 컴포넌트에서 뛰어난 기능과 UI를 이용하실 수 있습니다.

새로운 디자이너에 대해 자세히 알아보려면, 디자이너 컴포넌트 페이지를 방문해주세요.

셀 상호 작용

일부 다른 기능은 사용자와 셀의 상호 작용에 집중되어 있습니다. 이러한 기능은 다음과 같습니다.

• 증분 로드
• 접근성 지원
• 여러 열 선택기
• 메모 표시기 사용자 정의
• HTML 내보내기
• getRange API 개선
• Excel에서 이미지 복사
• NumbersFitMode
• 자동 병합을 통한 SelectionMode
• 표 확장 행 API
• 스크롤 막대로 픽셀 스크롤
• Excel 채우기 효과 및 패턴

증분 로드

대량의 데이터를 다루는 작업을 할 때 증분 로드를 사용하면 성능이 향상됩니다.

이 기능을 활성화하면 SpreadJS가 백그라운드에서 조금씩 값과 수식을 로드하므로 사용자는 데이터가 로드될 때 통합 문서를 확인할 수 있습니다. JSON에서 SpreadJS로 통합 문서를 로드할 때 다음과 같이 증분 로드를 사용하십시오.

var jsonOptions = {  
        incrementalLoading: true  
}  
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss1'));  
spread.fromJSON(JSON.parse(jsonStr), jsonOptions);

접근성 지원

GrapeCity는 SpreadJS v14에 화면 판독기와의 호환성과 ADA 규정 준수를 포함하여, 응용 프로그램에서 접근성 지원이 필요한 고객을 더 효과적으로 도울 수 있게 되었음을 알려드리게 되어 자랑스럽습니다.

지원되는 화면 판독기는 Windows용 NVDA, Windows Narrator, OS X용 VoiceOver입니다.

여러 열 선택기

GrapeCity는 새로운 드롭다운 유형인 여러 열 선택기를 SpreadJS v14에 추가했습니다.

데이터 소스 및 열 정보를 지정하여 이 드롭다운을 만든 다음, 스타일을 설정할 수 있습니다. 속성 함수는 반환된 개체를 구문 분석하는 데 특히 유용합니다.

메모 표시기 사용자 정의

이전에는 메모 표시기가 셀 오른쪽 상단에 빨간색 삼각형으로 표시되었습니다.

SpreadJS v14에서는 사용자가 API 호출로 색과 크기를 변경할 수 있습니다.

var comment = new GC.Spread.Sheets.Comments.Comment();  
comment.indicatorSize(10); // Default is 6  
comment.indicatorColor('blue'); // Default is 'red'  
sheet.comments.add(5, 5, comment);

HTML 내보내기

셀 범위를 HTML 표로 내보냅니다. SpreadJS에서 보고서 표를 디자인하여 HTML로 내보내면 SpreadJS와 같은 모양이 됩니다.

이 보고서 표를 HTML 페이지에 추가하면 보고서를 쉽게 사용자 정의할 수 있습니다.

getRange API 개선

이전 버전에서는 getRange API를 사용하는 경우 지정된 셀 범위를 가져오려면 행 인덱스, 열 인덱스, 행 수, 열 수가 필요했습니다. SpreadJS v14에서는 더 편리한 매개 변수인 범위 주소를 문자열로 사용합니다.

다음과 같이 코드를 단순화하십시오.

// Get a single cell: sheet.getRange(0, 0, 1, 1)  
sheet.getRange("A1")  
// Get whole columns: sheet.getRange(-1, 0, -1, 3)  
sheet.getRange("A:C")  
// Get whole rows: sheet.getRange(0, -1, 3, -1)  
sheet.getRange("1:3")  
// Get a range: sheet.getRange(0, 0, 3, 3)  
sheet.getRange("A1:C3")

Excel에서 이미지 복사

사용자 요청에 따라 SpreadJS는 이제 Excel에서 이미지를 복사해 시트에 붙여넣는 기능을 지원합니다.

Excel에서와 마찬가지로 붙여넣은 이미지는 크기, 테두리, 배경이 동일합니다. 차트와 셰이프는 이미지로 복사됩니다. 여러 이미지를 SpreadJS로 붙여넣으면 하나의 큰 이미지로 변환됩니다.

통합 문서에 대한 allowCopyPasteExcelStyle 옵션은 기본적으로 활성화되어 있습니다.

spread.option.allowCopyPasteExcelStyle = true;

NumbersFitMode

NumberFitMode 옵션으로 사용자 정의 날짜 및 숫자 형식에 대한 표시 전략을 설정할 수 있습니다.

이 옵션에는 두 가지 열거 옵션, 즉 마스크와 오버플로가 있습니다.

• GC.Spread.Sheets.NumbersFitMode.mask: 기본적으로 활성화되어 있으며 셀에 맞지 않는 숫자나 날짜 대신에 "###"을 표시합니다.
• GC.Spread.Sheets.NumbersFitMode.overflow: 넘치는 날짜나 숫자를 인접 셀에 채웁니다.
  

자동 병합을 통한 SelectionMode

처음에 자동 병합은 자동으로 병합된 셀 범위에서 사용자가 개별 셀을 선택하고 편집할 수 있도록 설계되었습니다.

이제 사용자는 자동으로 병합된 셀을 범위가 지정된 셀인 것처럼 선택할 수 있습니다. 간단한 API 호출로 이 모드를 끄고 켤 수 있습니다.

GC.Spread.Sheets.AutoMergeMode.SelectionMode.source  
GC.Spread.Sheets.AutoMergeMode.SelectionMode.merged

표 확장 행 API

SpreadJS v13에는 표에 데이터가 추가될 때 행을 자동으로 확장하는 기능이 포함되어 있었습니다.

SpreadJS v14는 다음과 같이 이 기능을 활성화하거나 비활성화하는 API가 있는 것이 특징입니다.

table.expandBoundRows(true);

스크롤 막대로 픽셀 스크롤

SpreadJS의 이전 릴리스에서는 픽셀 기반 스크롤을 추가하여 사용자가 기본 설정된 행별로 스크롤하는 대신에 특정 양의 픽셀만큼 스크롤할 수 있었습니다.

이 기능은 통합 문서에서 행이 엄청나게 많고 스크롤하면 시트가 의도한 것보다 더 많이 스크롤될 때 특히 유용합니다.

GrapeCity는 v14에서 이 기능을 훨씬 더 강화했습니다. 이제 픽셀 스크롤은 수동 스크롤뿐만 아니라 스크롤 막대의 영향도 받습니다.

채우기 효과 및 패턴

셀에 대한 채우기 효과 및 패턴은 Excel의 기능이지만 SpreadJS에서는 구현된 적이 없었습니다.

GrapeCity는 채우기 효과 및 패턴을 포함하는 파일 가져오기 및 내보내기에 대한 추가 지원과 함께 이 기능을 SpreadJS v14에 도입했습니다.

계산 능력 향상

GrapeCity SpreadJS v14는 새로운 함수와 향상된 기능으로 업데이트된 계산 엔진이 특징입니다. 이러한 향상 기능에는 다음이 포함됩니다.

• OBJECT 함수
• PROPERTY 함수
• RANGEBLOCK 함수
• 반복 계산
• X 및 LET 함수
• CONVERT 함수
• 스파크라인 합계 열 계단식 배열
• 헤더 수식 및 SparklineEx

OBJECT 함수

GrapeCity는 SpreadJS v13 릴리스에 RangeCellType을 도입하여 사용자가 단일 셀에서 템플릿으로 사용할 셀 범위를 정의할 수 있게 했습니다.

열 및 행 크기를 조정하는 번거로움 없이 복잡한 레이아웃을 디자인하여 서로 통합할 수 있습니다.

SpreadJS v14는 새로운 OBJECT 함수가 있는 것이 특징입니다. 이 함수를 통해 사용자는 속성 이름 및 식 집합에서 개체를 정의할 수 있습니다.

개체를 다른 셀에 대한 데이터 바인딩에 사용하거나 RangeCellType 또는 RANGEBLOCK 매개 변수로 사용할 수 있습니다.

OBJECT(property1, expression1, property2, expression2, ...)  
- property: The property of the object, can be a cell range reference or a text string  
- expression: The value of the corresponding property, can be a cell range reference or a text string  
Examples:  
OBJECT(A1:A3, B1:B3)  
OBJECT(A1, B1, A2, B2)  
OBJECT("name", "test")

PROPERTY 함수

SpreadJS v14 PROPERTY 함수를 통해 개발자는 속성에 따라 개체를 구문 분석할 수 있습니다.

이 함수는 다음과 같이 배치됩니다.

PROPERTY(data_expression, property_path)  
- data_expression: The object data, which accepts a cell reference whose value is an object or the result of the OBJECT function  
- property_path: The property path in the object, which goes through the object properties  
Example:  
=PROPERTY(G10, "User.Address.Home")

이 함수를 사용해 개체 속성을 검사하거나 여러 열 선택기에서 이 함수를 사용해 반환된 개체를 해당 속성 값으로 구문 분석할 수 있습니다.

RANGEBLOCK 함수

RANGEBLOCK 함수는 RangeCellTypes와 함께 작동하는 또 하나의 새로운 함수입니다.

이 함수를 사용해 RangeCellTypes 내에서 스파크라인을 구현할 수 있습니다. 대시보드와 다중 행 시나리오를 구현하는 데 이상적입니다.

스파크라인 합계 열 계단식 배열

계단식 배열 차트 기능은 손익계산서와 대차대조표를 합계와 함께 차트로 표시할 때 특히 유용합니다.

헤더 수식 및 SparklineEx

경우에 따라 헤더 행의 열 수식 또는 스파크라인은 데이터 집합을 요약하는 데 유용합니다.

고정된 행 또는 열과 마찬가지로 이 기능을 통해 개발자는 헤더 안에 수식과 스파크라인을 표시할 수 있으므로 사용자가 어느 방향으로 스크롤하든지 간에 보이게 됩니다.

반복 계산

순환 참조라고도 하는 반복 계산은 이전 결과를 반복적으로 사용함으로써 특정 계산을 완료하는 데 도움이 됩니다. GrapeCity는 이러한 사용자 요청 기능을 추가하게 되어 기쁩니다.

투자의 미래 가치를 계산하거나 자동 타임스탬프를 파일에 추가할 수 있습니다.

SpreadJS에서 반복 계산을 사용하는 CalcEngine.goalSeek 함수로 what-if 분석을 수행하십시오.

X 및 LET 함수

이러한 새 함수로 XMATCH, XLOOKUP, LET이 있습니다. 사용자는 이 함수를 통해 이해하기 쉬운 수식을 만들고 대용량 데이터 집합으로 계산 작업을 할 수 있습니다. VLOOKUP 및 MATCH에 비해 XLOOKUP과 XMATCH는 더 빠른 알고리즘을 사용하고 더 유연한 옵션을 제공합니다.

LET 함수를 통해 사용자는 복잡한 계산 작업을 할 때 중간 수식을 더 쉽게 정의할 수 있습니다. 기본적으로 사용자는 수식 내에서 사용할 변수를 정의할 수 있습니다. 이 함수는 수식을 단순화하고 수식 내에서 식이 반복되는 경우 성능을 높이는 데 도움이 됩니다.

CONVERT 함수

이제 SpreadJS v14에서는 몇 가지 새로운 단위의 CONVERT 함수를 지원합니다.

단위에는 두께와 질량, 거리, 힘, 압력, 온도, 볼륨, 영역, 바이너리 접두사가 있습니다.

새로운 차트와 향상된 기능

SpreadJS v14에는 새로운 차트 기능과 새로운 차트 유형이 포함되어 있습니다.

• 깔때기형 차트
• 축 교차점
• 패턴 채우기
• 가로/세로 막대형 차트 간격 너비 및 겹치기
• 도넛형 차트 구멍 크기
• 차트의 줄 바꿈
• DataLabel 구분 기호 옵션

깔때기형 차트

SpreadJS v14에는 깔때기형 차트가 지원 Excel 차트 유형으로 포함되어 있습니다.

깔때기형 차트가 포함된 Excel로 내보내거나 깔때기형 차트가 포함된 Excel에서 가져온 Excel 파일은 이러한 차트를 성공적으로 로드합니다.

이러한 차트는 영업 프로세스의 단계를 표시하고 각 단계의 잠재적 수익을 보여주는 데 가장 효과적입니다. 또한 깔때기형과 유사하게 일반적으로 각 수준에서 감소하는 값을 통해 사용자의 플로우를 보여주고, 전송된 이메일로 시작하는 이메일 캠페인을 진행하고, 이 중에서 몇 개나 조회, 클릭되었는지 등을 보여줄 수 있습니다.

축 교차점

일부 차트에서는 다양한 여러 차트의 조합을 표시할 수 있습니다. 이러한 경우 X축과 Y축이 서로 교차하는 지점을 선택할 수 있는 기능이 유용합니다.

다음과 같이 SpreadJS v14에는 이러한 교차점을 설정할 수 있는 API가 포함되어 있습니다.

let axes = chart.axes();  
axes.primaryCategory.crossPoint = 3;  
axes.primaryValue.crossPoint = 100;

또는 GC.Spread.Sheets.Charts.AxisCrossPoint 열거로 이러한 교차점을 설정할 수 있습니다. 자동, 최대값 또는 최소값으로 설정할 수 있습니다.

패턴 채우기

Excel의 차트 기능 중 하나는 여러 차트에 패턴 채우기를 추가하는 것입니다.

이제 SpreadJS v14에서는 이 기능을 지원합니다. 차트의 전경 또는 배경에 여러 가지 패턴을 적용할 수 있습니다:

가로/세로 막대형 차트 간격 너비 및 겹치기

SpreadJS v14 세로 및 가로 막대형 차트에는 두 가지 새로운 속성, 즉 간격 너비와 계열 겹치기가 있습니다.

• gapWidth: 막대 또는 열 클러스터 사이의 공백을 막대 또는 열 너비의 백분율로 설정(0~5)
• overlap: 막대 또는 열 위치 설정(-1~1)
   

도넛형 차트 구멍 크기

SpreadJS v14를 통해 사용자는 도넛형 차트에서 구멍 크기를 사용자 정의할 수 있습니다. 더 넓은 조각을 표시하여 텍스트가 긴 데이터 레이블을 더 잘 수용할 수 있습니다. 구멍 크기를 0으로 설정하고 데이터를 조작하여 대시보드용 게이지 차트를 만들 수 있습니다.

차트의 줄 바꿈

이제 SpreadJS 차트에서는 Excel과 마찬가지로 축 레이블, 범례 텍스트 등 차트 영역에 줄 바꿈을 지원합니다.

DataLabel 구분 기호 옵션

이전에 DataLabels 차트에서는 쉼표만 구분 기호로 지원했습니다. 이제 SpreadJS v14에서는 세미콜론, 마침표, 줄 바꿈도 지원합니다.