! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

SpreadJS v17 > 새로운 소식

본문 바로가기

SpreadJS

새로운 소식

정식출시 SpreadJS v17

페이지 정보

작성자 MESCIUS 작성일 2024-02-22 15:07 조회 123회 댓글 0건

본문

이번 SpreadJS V17에는 새롭고 흥미로운 기능들이 많이 업데이트 되었습니다!


시작하기 앞서 우리는 새롭게 선보이는 두 가지 기능을 살펴볼 것입니다. 



그런 다음 아래와 같이 V17의 향상된 여러 기능을 자세히 살펴보겠습니다.




 

 

GanttSheet  | 간트시트 - NEW


새로운 GanttSheet (간트시트)를 소개합니다!


이 새로운 시트 유형은 기본적으로 SpreadJS 내에 Gantt(간트)를 완전히 구현한 것으로, 작업 분할 구조 및 프로덕션 일정 등 다양한 작업이 가능합니다.

GanttSheet(간트시트)는 Gantt 차트 동작 및 스프레드시트 사용자 인터페이스를 갖춘 빠른 데이터 바인딩된 DataTable 시각화 컨트롤입니다.


GanttSheet를 사용하면 여러 이점을 얻을 수 있습니다.

  • 시각적 계획 프로젝트 작업, 타임라인 및 종속성을 명확하게 시각적으로 표현하여 더 쉽게 프로젝트를 만들고 효과적으로 관리할 수 있습니다.
  • 작업 종속성 작업 종속성을 정의하고 시각화하여, 작업이 서로 연결된 방식과 지연이 전체 프로젝트 타임라인에 미치는 영향을 확인할 수 있습니다.
  • 진행률 추적 완료된 작업을 표시하고 계획된 타임라인과 비교하여 각 작업과 전체 프로젝트의 진행률을 추적합니다.
  • 기한 관리 프로젝트 마일스톤과 기한을 설정할 수 있으므로 프로젝트를 예정대로 진행하고 지정된 기간 내에 완료할 수 있습니다.


작업을 관리 및 정렬하고 달력 설정을 변경할 수 있으며, SSJSON, SJS 및 Excel을 가져오고 내보낼 수도 있습니다.

새로운 JavaScript GanttSheet 추가 기능

데모 | 도움말


간트시트를 시작하는 방법에 대해 자세히 알아보시려면, 아래의 글을 참고해 주시기 바랍니다.



 

ReportSheet  | 리포트시트 - NEW


SpreadJS V17에 새로운 ReportSheet (리포트시트)가 도입되었습니다.


이 새로운 SpreadJS용 시트 유형은 스프레드시트 기반의 보고서 작성 및 관리 작업을 지원합니다.


마케팅 전략, 여행 보고서, 판매 추적 보고서, 직원 보고서 등을 반복적인 엑셀 기반의 보고서, 각종 증명서 및 서식/양식을 만드는 데 유용하게 사용될 것입니다.


보통 이러한 작업에는 많은 시간과 노력이 필요하지만, ReportSheet(리포트시트)를 사용하면 간단하고 유연하게 처리할 수 있습니다. 이 새로운 추가 기능은 데이터 입력, 페이징, 데이터 필터링, 정렬 및 조건부 서식을 지원합니다.


ReportSheet를 사용하면 응용 프로그램에 많은 이점을 줄 수 있습니다.

  • 템플릿 및 데이터 통합 관리​ ReportSheet와 TemplateSheet를 함께 사용하면 보고서 설정과 데이터를 원활하게 통합할 수 있습니다. TemplateSheet에는 ReportSheet에서 DataManager의 데이터와 함께 해당 보고서를 효율적으로 생성하기 위해 활용하는 다양한 보고서 관련 설정이 포함되어 있습니다.
  • 유연성 향상 소스 데이터를 바인딩하기 위한 매우 유연한 구문과 API를 제공하며, 필드에서 쉬운 데이터 모집단 규칙을 따르며 데이터 입력 API도 제공합니다.
  • 간편한 사용자 정의 생성된 모든 보고서의 서식과 모양이 표준화되어, 다양한 데이터 집합에 걸쳐 일관성이 유지됩니다.
  • 포괄적인 데이터 처리 기능 데이터를 사용자 친화적인 방식으로 관리하고 표시합니다. ReportSheet는 보고서 생성만을 위한 도구가 아니라, 데이터 입력, 페이지 매기기, 데이터 필터링, 정렬 및 조건부 서식을 지원하는 포괄적인 도구입니다.


스프레드시트 UI 컴포넌트의 JavaScript ReportSheet 추가 기능

데모 | 도움말


리포트시트를 시작하는 방법에 대해 자세히 알아보시려면, 아래의 글을 참고해 주시기 바랍니다.



 

차트 기능 향상  


폭포 차트 | Waterfall


SpreadJS에 새로운 차트 유형, 폭포(Waterfall) 차트가 추가되었습니다.


이 차트는 더하거나 뺀 값으로 누계를 표시합니다.이 값은 양수와 음수 값이 포함된 열로 정렬되며 컬러 코딩을 통해 양수와 음수 값이 구분됩니다.


최초 및 최종 열은 일반적으로 가로 축을 따라 정렬되며, 중간 값은 일반적으로 부동 열입니다.

JS 스프레드시트 API에 폭포 차트 추가


부드러운 꺾은선형 차트


이제 SpreadJS의 꺾은선형 차트에서 곡선을 사용한 서식을 지원합니다.

SpreadJS에서 꺾은선형 차트용 곡선 지원 시작



다중 선택을 통해 차트 삽입


SpreadJS에서도 이제 Excel과 유사하게 다중 선택을 사용하여 차트를 삽입할 수 있습니다.


연속된 데이터 영역을 선택하는 것 외에, 이제 Ctrl 키를 눌러 연속되지 않은 여러 영역을 선택하여 차트를 만들 수 있습니다.


코드에서 각 범위 사이에 쉼표를 넣어 여러 범위를 지정할 수 있습니다.

sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$4,Sheet1!$E$3:$G$3,Sheet2!$A$1:$A$3");


JS 스프레드시트에서 다중 선택을 통해 차트 삽입



도형 기반 차트 렌더링


차트가 DOM 기반이 아닌 도형 기반으로 수정되었습니다.


내부적인 변경에 가까우며 기존 차트에 영향을 주는 것은 아니지만, 이제 Z-Order 관리, 그룹화, 다른 도형과의 연결이 추가로 지원됩니다.




 

통합 문서 기능 향상  



붙여넣기 특수 옵션 추가


SpreadJS에서 이제 더 많은 붙여넣기 특수 옵션을 지원하며, 여기에는 다음이 포함됩니다.

  • 메모 - 메모만 붙여넣기

  • 유효성 검사 - 데이터 유효성 검사 규칙만 붙여넣기

  • 원본 테마 모두 사용 - 동일한 워크시트 테마의 모든 셀 내용 붙여넣기

  • 테두리만 제외하고 모두 사용 - 테두리를 제외한 모든 셀 내용과 서식 붙여넣기

  • 열 너비 - 복사된 셀 하나 또는 셀 범위의 열 붙여넣기

  • 수식 및 숫자 서식 - 수식과 모든 숫자 서식 옵션만 붙여넣기

  • 값 및 숫자 서식 - 값과 모든 숫자 서식 옵션만 붙여넣기

데모 | 도움말



시트 탭 스타일 지원


시트 탭에서 이제 사용자가 설정할 수 있는 스타일을 지원합니다.

스타일에는 텍스트 스타일, 배경색 및 아이콘이 포함됩니다.




사용자 정의 표 열 스타일 확장


이제 표가 자동 확장될 때 사용자 정의 표 열 스타일도 올바르게 확장됩니다. 


JS 스프레드시트 컴포넌트에서 사용자 정의 Excel 표 열 스타일이 다음 행으로 확장됨




TopRowChanged/LeftColumnChanged 이벤트 기능 향상


TopRowChanged 및 LeftColumnChanged 이벤트에서 이제 픽셀 스크롤을 지원합니다.


변경되기 전에는 이벤트가 실행되기 전에 전체 행 또는 열을 스크롤해야 했지만, 지금은 픽셀 스크롤이 활성화될 때 이벤트가 실행되고 스크롤 변경에 대한 스크롤 상태가 표시됩니다.



텍스트 양쪽 정렬


SpreadJS에서 이제 텍스트의 양쪽 정렬을 지원합니다.


가운데 정렬보다 간단하지만, 텍스트도 자동으로 줄 바꿈됩니다.




마지막 Excel 정렬 상태 유지 


이제 Excel 파일을 가져올 때, SpreadJS에서 정렬 조건을 유지하므로 해당 조건이 사라지지 않습니다.




 

계산 기능 향상  


IMAGE 함수 업데이트


IMAGE 함수가 Excel에서 구현된 것과 일치하도록 업데이트 되었습니다.

이 변경 사항에는 매개 변수의 순서 변경과 alt_textsizing 매개 변수의 추가가 포함됩니다.

JavaScript 스프레드시트 UI 컴포넌트 IMAGE 함수




Window 함수 기능 향상


TableSheet Window 함수도 FrameGroups 프레임 유형과 Exclude 매개 변수를 포함하도록 업데이트되었습니다.


FrameGroups 프레임 유형은 그룹에 의해 프레임의 시작 및 끝 경계로 정의됩니다.


Exclude 매개 변수는 프레임에서 행 또는 그룹을 제외할 수 있는 선택적 매개 변수입니다.




 

피벗 테이블 기능 향상  



글꼴 옵션 분할


Excel의 PivotTable 및 Table 글꼴 옵션을 더 효율적으로 지원하기 위해 글꼴 옵션이 여러 속성으로 분할되었습니다.


일반적으로 모든 글꼴 옵션의 설정에 셀의 font 속성을 사용할 수 있지만, fontFamily, fontSize, fontWeightfontStyle과 같은 개별 글꼴 옵션을 설정할 수 있도록 API도 제공됩니다.

// Font
activeSheet.getCell(2, 0).font('italic normal 12px Mangal');
activeSheet.getCell(4, 0).font('normal bold 15px Arial Black');
activeSheet.getCell(6, 0).font('normal normal 18px Georgia');
​
// FontFamily
activeSheet.getCell(2, 1).fontFamily('Mangal');
activeSheet.getCell(4, 1).fontFamily('Arial Black');
activeSheet.getCell(6, 1).fontFamily('Georgia');
​
// FontSize
activeSheet.getCell(2, 2).fontSize('12px');
activeSheet.getCell(4, 2).fontSize('20px');
activeSheet.getCell(6, 2).fontSize('28px');
​
// FontWeight
activeSheet.getCell(2, 3).fontWeight('bold');
activeSheet.getCell(4, 3).fontWeight('normal');
​
// Italic
activeSheet.getCell(2, 4).fontStyle('italic');
activeSheet.getCell(4, 4).fontStyle('normal');



PivotArea 오프셋 지원


이제 SpreadJS에서 PivotTable 내 특정 PivotArea의 스타일을 지정할 수 있도록 offset 속성을 제공합니다.


이 오프셋을 사용하여 스타일을 지정할 영역의 row, column, rowCount 및 colCount를 지정할 수 있습니다.

let style = new GC.Spread.Sheets.Style();
    style.backColor = "rgb(247, 167, 17)";
    let labelPivotAreaWithOffset = {
        labelOnly: true,
        references: [{
            fieldName: "Salesperson",
            items: ["Alan"]
        }],
        offset: {
            row: 1,
            col: 0,
            rowCount: 3,
            colCount: 1
        }
    };
    pivotTable.setStyle(labelPivotAreaWithOffset, style);
    let cornerPivotAreaWithOffset = {
        type: GC.Spread.Pivot.PivotAreaType.corner,
        offset: {
            row: 0,
            col: 1,
            rowCount: 1,
            colCount: 1
        }
    };
    pivotTable.setStyle(cornerPivotAreaWithOffset, style);
    let topRightPivotAreaWithOffset = {
        type: GC.Spread.Pivot.PivotAreaType.topRight,
        offset: {
            row: 0,
            col: 0,
            rowCount: 1,
            colCount: 4
        }
    };
    pivotTable.setStyle(topRightPivotAreaWithOffset, style);


JavaScript PivotArea 오프셋 스타일 지정



 

TableSheet 기능 향상  



계산된 필드 참조


DataManager에서 데이터 소스의 필드를 추가할 수 있지만, 이제 수식 데이터 형식의 가상 열도 사용할 수 있습니다.


이러한 수식 열을 TableSheet의 보기에서 누계 또는 주가 비율과 같은 값을 표시하도록 사용할 수도 있습니다.

JavaScript TableSheet 계산된 필드

// Add product table.
var productTable = dataManager.addTable("productTable", {
    remote: {
        read: {
            url: baseApiUrl + "/Product"
        }
    },
    schema: {
        columns: {
            TotalUnits: {
               dataType: "formula",
               value: "[@UnitsInStock] + [@UnitsOnOrder]"
            },
            StockValue: {
                dataType: "formula",
                value: "[@UnitPrice] * ([@TotalUnits])"
            }
        }
    }
});
​
// Bind a view to the table sheet
var myView = productTable.addView("myView", [
    { value: "Id", caption: "ID", width: 50 },
    { value: "ProductName", caption: "Name", width: 170 },
    { value: "UnitPrice", caption: "Unit Price", style: { formatter: "$#,##0.00" }, width: 120 },
    { value: "UnitsInStock", caption: "Units In Stock", width: 120 },
    { value: "TotalUnits", caption: "Total Units", width: 120 },
    { value: "StockValue", caption: "Stock Value", style: { formatter: "$#,##0.00" }, width: 120 },
    { value: "=SUM([#1:@[UnitPrice]]*([#1:@[UnitsInStock]]+[#1:@[UnitsOnOrder]])", caption: "Running SUM", style: { formatter: "$#,##0.00" }, width: 150 },
    { value: "=[@StockValue]/SUM([UnitPrice] * ([UnitsInStock] + [UnitsOnOrder]))", caption: "Stock Value Ratio", style: { formatter: "0.00%" }, width: 160 }
]);




열의 트리거 수식


TableSheet의 트리거 수식은 특정 조건 또는 트리거에 따라 계산하는 수식입니다.


따라서 특정 조건을 기반으로 다시 계산하거나, 새 값이 입력되면 데이터를 지우거나, 열의 기본값을 제공할 수 있습니다.


다음은 트리거 수식의 몇 가지 예입니다.

var table = dataManager.addTable("Table", {
    schema: {
        columns: {
            createdDate: {
                dataType: "Date",
                trigger: {
                  when: "onNew",            <<------- apply the formula on created
                  formula: "=NOW()",        <<------- trigger formula to set current time
                  // fields: "*"            <<------- when triggered on new, there is no need to specify the affected fields
                },
            },
            updatedDate: {
                dataType: "Date",
                trigger: {
                  when: "onNewAndUpdate",   <<------- apply the formula on created and updated
                  formula: "=NOW()",        <<------- trigger formula to set current time
                  fields: "*"               <<------- all fields changed will have the formula applied to them
                },
            },
            label: {
                trigger: {
                    when: "onNewAndUpdate",      <<------- apply the formula on updated
                    formula: "=UPPER([@label])"  <<------- use the upper formula on the input text of the label field
                    fields: "label",             <<------- when the current column value is updated the formula will be applied
                  },
            },
            amount: {
                dataType: "number",
                trigger: {
                    when: "onNewAndUpdate",             <<------- apply the formula on updated
                    formula: "=[@price] * [@quantity]"  <<------- automatically evaluate the amount
                    fields: "price,quantity",           <<------- the changes of the price and quantity columns will cause the formula to calculate
                  },
            },
            price: { dataType: 'number' },
            quantity: { dataType: 'number' }
        },
    }
});




 


스파크라인 기능 향상  


롤리팝 분산 스파크라인


로운 롤리팝 분산 스파크라인을 사용하면 데이터 집합의 절대 및 상대 분산을 표시할 수 있습니다.


막대형 차트와 비슷하지만 사각형 대신 선을 사용하여 표시 공간이 줄어듭니다.

그 결과 많은 양의 데이터를 다룰 때 더 유용합니다.

JS 스프레드시트의 롤리팝 분산 스파크라인




 

디자이너 컴포넌트 기능 향상  


SpreadJS 바로 가기 명령


SpreadJS에서 키 조합에 대한 사용자 정의 바로 가기 명령을 추가할 수 있습니다.


별도의 프로젝트에 Excel에서 일반적으로 사용되는 몇 가지 명령을 구현했습니다.

아래의 링크를 통해 GitHub에서 다운로드할 수 있습니다.

- SpreadJS 키보드 단축키 다운로드


v17 릴리스에는 이 프로젝트의 바로 가기가 SpreadJS 디자이너 컴포넌트에 기본적으로 추가되어, 디자이너에서 추가 코드 없이 바로 가기를 사용할 수 있습니다.



이러한 기능에 대한 자세한 내용은 데모문서를 확인하시기 바랍니다.



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

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.