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

JavaScript 스프레드시트에서 폼 컨트롤을 사용하여 대출 계산기 제작 > 온라인 스터디

본문 바로가기

고급기능 JavaScript 스프레드시트에서 폼 컨트롤을 사용하여 대출 계산기 제작

페이지 정보

작성자 GrapeCity 작성일 2023-05-11 09:55 조회 205회 댓글 0건

본문

첨부파일

많은 비즈니스 애플리케이션에서는 다양한 데이터 소스와 상호 작용하여 빠른 데이터 분석을 위해 대시보드와 같은 창의적이고 직관적인 방식으로 데이터 소스를 표시하고 더 나은 비즈니스 결정을 내리도록 지원해야 합니다.


최근 v16 릴리스 SpreadJS에서 JavaScript 스프레드시트는 고급 데이터 입력 및 선택 항목을 워크시트에 더욱 쉽게 추가하도록 적용 가능한 새로운 Excel 스타일 형식을 제공합니다.


폼 컨트롤을 사용하여 차트 시트에 컨트롤을 추가하는 등 셀 데이터를 쉽게 참조하고 상호 작용하는 데 사용할 수 있습니다. Excel은 목록에서 항목을 선택하는 데 유용한 대화 상자 시트에 여러 컨트롤을 제공합니다.


이번 블로그에서는 JavaScript 스프레드시트 내에서 폼 컨트롤의 다양한 여러 유형을 추가하도록 SpreadJS 폼 컨트롤을 사용하여 완전한 기능의 대출 계산기를 만듭니다.


이번 블로그에서는 SpreadJS 폼 컨트롤을 사용하여 JavaScript 스프레드시트 내에 여러 가지 유형의 양식 컨트롤을 추가하는 완벽한 기능을 갖춘 대출 계산기를 만듭니다.




시작하기 


SpreadJS의 폼 컨트롤을 사용하여 고급 데이터 입력 및 선택 항목을 워크시트에 추가할 수 있으므로, 셀 데이터를 보다 쉽게 참조하고 상호 작용 할 수 있습니다. 


SpreadJS의 v16 릴리스에서 몇 가지 흥미로운 Excel 스타일 폼 컨트롤이 여러분들의 시도를 기다리고 있습니다.


해당 샘플에서는 새로운 필수 기능을 사용하여 함수형 대출 계산기 만드는 방법에 대해 안내합니다.

워크 시트의 다양한 영역에 스타일을 지정하고, 배치하여 사용자 친화적인 폼 컨트롤을 구성하는 방법을 살펴 보겠습니다.

JavaScript 대출 계산기


예시 파일을 다운로드하고 따라해 보세요.



대출 금액 


스핀 버튼 컨트롤은 대출 금액을 지정하는 데 탁월합니다. 이 기능을 사용하면 값을 미리 결정된 양만큼 쉽게 늘리거나 줄일 수 있습니다.

JavaScript 대출 계산기


SpreadJS에서는 아래 표시된 대로 addFormControl 메서드에서 매개 변수로 FormControlType 열거의 spinButton을 전달하여 spinButton 폼 컨트롤을 워크시트에 추가할 수 있습니다.


//add spinButton
let spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes.
FormControlType.spinButton 50, 50, 160, 100);


options 메서드를 사용하여 spinButton 옵션을 설정하고 값을 할당할 수도 있습니다.

//set spinButton options
var options = spinButton.options();
options.minValue = 100000;
options.maxValue = 3000000;
options.step = 100;
options.cellLink = "'Loan Calculations'!C4";
spinButton.options(options);


이 컨트롤을 워크시트에 추가하는 또 다른 방법은 SpreadJS에서 제공하는 디자이너 컴포넌트를 사용하는 것입니다.


JavaScript 대출 계산기


삽입 탭에서 컨트롤 패널을 클릭하고 '스핀 버튼' 컨트롤 유형을 선택합니다. 셰이프 서식 대화 상자를 사용하여 spinButton 옵션을 정의할 수 있습니다.


컨트롤 옵션은 아래와 같이 스핀 버튼 옵션을 정의하고 값을 할당하는 기능을 제공합니다.

JavaScript 대출 계산기



대출 기간 


대출 기간을 결정하는 데에 도움이 되는 옵션으로 Combo Box 컨트롤을 사용할 수 있습니다. Combo Box는 드롭다운 목록에 나열된 값에서 값을 선택할 수 있는 드롭다운 요소입니다.


JavaScript 대출 계산기


단기 대출과 장기 대출 모두에 적합한 계산기를 만들기 위해 대출 기간을 지정할 수 있도록, 1~25년의 기간을 나열했습니다.


JavaScript 대출 계산기


워크시트에서 FormControlType 열거의 comboBox 옵션을 addFormControl 메서드의 매개 변수로 추가할 수 있습니다.


//add comboBox
var comboBox = sheet.shapes.addFormControl("comboBox", GC.Spread.Sheets.Shapes.
FormControlType.comboBox, 100, 50, 200, 30);
​


options 메서드를 사용하여 comboBox 옵션을 설정하고, 입력 범위를 할당하며, 드롭다운 길이를 설정하고, 셀을 연결할 수도 있습니다.


//set comboBox options
var options = comboBox.options();
options.inputRange = "'Loan Term'!A2:A26";
options.cellLink = "'Loan Calculations'!C7";
options.dropDownLines = 4;
comboBox.options(options);
comboBox.value(14);



이자율 


이자율을 정의하기 위한 좋은 방법은 양식에서 컨트롤을 논리적으로 그룹화하여 가독성을 개선할 수 있는 그룹 상자 컨트롤을 사용하는 것입니다. groupBox 내에서 배타적 선택만 허용하는 옵션 버튼으로 이자율을 제시했습니다.


JavaScript 대출 계산기


JavaScript 워크시트에 groupBox 폼 컨트롤을 추가하려면 addFormControl 메서드에서 매개 변수로 FormControlType 열거의 groupBox 옵션을 전달해야 합니다.


//add groupBox
var groupBox = sheet.shapes.addFormControl("groupBox", GC.Spread.Sheets.Shapes.
FormControlType.groupBox, 40, 130, 240, 80);


디자이너 컴포넌트를 사용하는 경우, [삽입] 탭을 클릭하고 [폼 컨트롤] 패널에서 groupBox 컨트롤을 선택하여 groupBox를 삽입할 수 있습니다.


JavaScript 대출 계산기


마찬가지로, JavaScript 스프레드시트에서 optionButton을 추가하여 addFormControl 메서드에서 매개 변수로 FormControlType 열거의 optionButton 컨트롤을 우회할 수 있습니다.


마찬가지로, addFormControl 메서드에서 매개 변수로 FormControlType 열거의 optionButton 컨트롤을 우회하여 JavaScript 스프레드시트에 optionButton을 추가할 수 있습니다.


//add optionButton
var optionButton = sheet.shapes.addFormControl("optionButton", GC.Spread.Sheets.Shapes.
FormControlType.optionButton, 50, 50, 100, 30);


또한 options 메서드와 셀 연결을 사용하여 컨트롤의 옵션을 설정합니다.

//set optionButton options
var options = optionButton.options();
options.cellLink = "'Loan Calculations'!C8";
optionButton.options(options);
optionButton.value(true);


크시트에 optionButton추가하기 위해 적용할 수 있는 또 다른 방법은 삽입 탭 아래의 컨트롤 패널을 클릭하는 것입니다.


JavaScript 대출 계산기


도형 서식 대화 상자를 클릭하여 아래의 컨트롤 옵션을 지정할 수 있습니다.

JavaScript 대출 계산기


이자율을 계산한 '대출 계산' 시트에서 C8 셀과 이자율 optionButton을 연결했습니다.

JavaScript 대출 계산기



계약금 


계약금은 값비싼 상품이나 서비스를 구매하는 초기 단계에서 구매자가 지불하는 금액의 합계입니다.

앞서 언급한 바와 같이, 폼 컨트롤을 대시보드에 통합하여 차트 및 수식과 쉽게 상호 작용 할 수 있습니다. 이러한 폼 컨트롤 중 하나는 계약금을 정의하는 데 사용한 목록 상자 컨트롤입니다.

JavaScript 대출 계산기


워크시트에 listBox 폼 컨트롤을 추가할 수 있습니다.

이 작업은 FormControlType 열거의 listBox 옵션을 addFormControl 메서드의 매개 변수로 전달하여 수행할 수 있습니다.


//add listBox
var listBox = sheet.shapes.addFormControl("listBox", GC.Spread.Sheets.Shapes.FormControlType
.listBox, 100, 50, 200, 150);


options 메서드를 사용하여 listbox 옵션을 설정하고, 입력 범위를 할당하며, 선택 유형을 설정하고, 셀을 연결할 수도 있습니다.

따라서 사용자가 listbox 컨트롤에서 값을 변경하면 셀의 값도 변경됩니다.


//set listBox options
var options = listBox.options();
options.inputRange = "'Down Payment (%)'!A2:A11;
options.cellLink = "'Loan Calculations'!C5";
options.selectionType = GC.Spread.Sheets.Shapes.ListBoxSelectionType.single;
listBox.options(options);


대출 계산  


빌린 금액, 월별 상환, 총 이자 및 이전에 정의된 대출 금액의 합계 상환을 계산하는 데 사용한 수식 참조를 아래에서 찾아볼 수 있습니다.


  • 빌린 금액: 대출 금액 - (대출 금액 * 계약금) - 약정 수수료

  • 월별 상환: PMT(이자/12, 기간*12, 빌린 금액)

  • 합계 상환: 월별 상환 * 기간

  • 총 이자: 총 상환 - 빌린 금액


우리는 SpreadJS 폼 컨트롤 기능을 사용하여 대출 계산기를 만들었습니다.


실행하고 있는 작업에 가치와 품질을 더하는 추가 기능을 제공할 수 있게 되어 기쁩니다. 자, 기존 대시보드를 개선하거나 새로 만들 준비가 되셨나요?



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


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

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