SpreadJS가 포함된 JavaScript로 표시된 현재 COVID-19 데이터
페이지 정보
작성자 GrapeCity 작성일 2021-04-09 09:48 조회 3,710회 댓글 0건본문
관련링크
당사의 JavaScript 스프레드시트인 SpreadJS는 강력한 계산 엔진, 사용하기 쉬운 템플릿 빌더, URL을 통해 데이터에 쉽게 연결하는 방법을 제공하고 지원합니다. 이 자습서에서는 URL의 가져온 데이터를, SpreadJS의 디자이너를 사용해 만든 대시보드 템플릿에 시각적으로 표시함으로써 활용하는 방법을 설명합니다.
표시되는 모든 데이터는 가 제공하고 유지 관리합니다.
수행 단계:
대시보드 템플릿을 만들어 적용
콤보 상자 셀 유형 만들기
URL 데이터를 셀 바인딩 데이터 소스로 설정
1단계: 대시보드 템플릿을 만들어 적용
이 섹션에서는 SpreadJS를 사용해 템플릿을 만들고 페이지가 로드될 때 URL 데이터를 템플릿의 데이터 소스로 설정하는 방식으로 URL 데이터를 사용해 템플릿을 채웁니다.
SpreadJS는 SpreadJS의 런타임 디자이너 및 를 제공합니다. 디자이너는 나중에 셀 바인딩을 사용해 데이터를 채울 수 있는 템플릿 빌더 옵션을 제공합니다. 템플릿 빌더는 데이터 탭에 있습니다.
AutoGenerateLabel 옵션을 사용해 바인딩 경로 레이블을 자동으로 만듭니다. 이 데모를 위해 다음 항목을 추가하십시오.
state
dataQualityGrade
positiveIncrease 및 negativeIncrease
pending
hospitalizedCurrently
inIcuCurrently
onVentilatorCurrently
death
recovered
totalTestResults
셀을 선택하고 생성된 노드를 두 번 클릭하거나 노드를 끌어서 원하는 영역에 놓을 수 있습니다. 그런 다음, 셀이 병합될 때 데이터가 표시되었으면 하는 방식으로 셀을 디자인할 수 있습니다.
디자이너를 사용할 때 차트, 스파크라인, 셰이프 및 모든 스타일 지정 형식을 사용할 수도 있습니다. 이 데모의 목적상 템플릿을 이러한 방식으로 디자인하였습니다.
디자이너를 사용해 템플릿에 적용할 수 있는 SpreadJS의 또 다른 기능은 하이퍼링크입니다. 이 예시에서는 COVID Tracking Project의 메인 사이트로 연결되는 하이퍼링크를 오른쪽 아래에 있는 셀에 추가하겠습니다. 이 예시에 사용할 URL은 https://covidtracking.com/입니다.
이 하이퍼링크를 추가하려면 다음과 같이 셀을 선택하고 링크를 마우스 오른쪽 버튼으로 클릭하여 선택한 다음, 링크를 붙여넣으십시오.
대시보드 템플릿을 다 만들었으면 인스턴스를 JavaScript 파일로 내보냅니다. 아래는 디자이너로 이 작업을 수행하는 방법을 보여주는 gif 이미지입니다. 여기서는 JavaScript 파일의 이름을 *template*으로 지정했습니다.
다음은 이 예시를 위해 만든 대시보드 템플릿을 다운로드할 수 있는 링크입니다.
JSON 대시보드에서 템플릿을 가져오고 인스턴스를 새로 고침하기
최종 단계: 프로젝트에 template.js 파일을 포함한 후 SpreadJS의 및 메서드를 사용해 대시보드 템플릿에서 SpreadJS를 로드한 다음, 인스턴스를 새로 고칩니다.
다음과 같이 HTML 태그에 탬플릿 JSON 파일인 template.js를 포함합니다.
1.1 - Include the template javascript file exported from the runtime designer <script src="template.js" type="text/javascript"></script></td>
그런 다음, 및 메서드를 사용해 템플릿에서 SpreadJS 인스턴스를 로드합니다. 다음 코드 조각은 이 작업을 1.2 표식과 함께 보여줍니다.
var spread = new GC.Spread.Sheets.Workbook( document.getElementById("ss") ); var spreadNS = GC.Spread.Sheets; // 1.2 - Load SpreadJS from the template created with runtime designer spread.fromJSON(template); spread.options.showHorizontalScrollbar = false; spread.options.showVerticalScrollbar = false; spread.options.tabStripVisible = false; // 1.2 - Refresh the spread instance spread.refresh(); var sheet = spread.getActiveSheet(); sheet.options.colHeaderVisible = false; sheet.options.rowHeaderVisible = false;
2단계: ComboBox 셀 유형 만들기
드롭다운 셀 유형을 만들어 최종 사용자가 정보를 보고자 하는 상태를 선택합니다. 콤보 상자를 만든 후 셀 유형 및 기본값을 다음과 같이 B1 (0,1)로 설정합니다.
// 2.1 - Create combo box cell type for state selection var combo = new spreadNS.CellTypes.ComboBox(); combo .items([ { text: "Select a State", value: "" }, { text: "AL", value: "AL" }, { text: "AK", value: "AK" }, { text: "AZ", value: "AZ" }, { text: "AR", value: "AR" }, { text: "CA", value: "CA" }, { text: "CO", value: "CO" }, { text: "CT", value: "CT" }, { text: "DE", value: "DE" }, { text: "DC", value: "DC" }, { text: "FL", value: "FL" }, { text: "GA", value: "GA" }, { text: "HI", value: "HI" }, { text: "ID", value: "ID" }, { text: "IL", value: "IL" }, { text: "IN", value: "IN" }, { text: "IA", value: "IA" }, { text: "KS", value: "KS" }, { text: "KY", value: "KY" }, { text: "LA", value: "LA" }, { text: "ME", value: "ME" }, { text: "MD", value: "MD" }, { text: "MA", value: "MA" }, { text: "MI", value: "MI" }, { text: "MN", value: "MN" }, { text: "MS", value: "MS" }, { text: "MO", value: "MO" }, { text: "MT", value: "MT" }, { text: "NE", value: "NE" }, { text: "NV", value: "NV" }, { text: "NH", value: "NH" }, { text: "NJ", value: "NJ" }, { text: "NM", value: "NM" }, { text: "NY", value: "NY" }, { text: "NC", value: "NC" }, { text: "ND", value: "ND" }, { text: "OH", value: "OH" }, { text: "OK", value: "OK" }, { text: "OR", value: "OR" }, { text: "PA", value: "PA" }, { text: "RI", value: "RI" }, { text: "SC", value: "SC" }, { text: "SD", value: "SD" }, { text: "TN", value: "TN" }, { text: "TX", value: "TX" }, { text: "UT", value: "UT" }, { text: "VT", value: "VT" }, { text: "VA", value: "VA" }, { text: "WA", value: "WA" }, { text: "WV", value: "WV" }, { text: "WI", value: "WI" }, { text: "WY", value: "WY" }, ]) .editorValueType(spreadNS.CellTypes.EditorValueType.text); // 2.1 - Set the default value of select a state sheet .getCell(0, 1, spreadNS.SheetArea.viewport) .cellType(combo) .value("Select a State");</td>
3단계: URL 데이터를 셀 바인딩 데이터 소스로 설정
이제 B1 셀에 combobox 셀 유형이 적용된 것을 볼 수 있습니다. 그다음에는 사용자가 콤보 상자에서 항목을 선택할 때 사용자 정의 함수를 만듭니다.
3.1 CellChanged 이벤트에 인스턴스 바인딩하기
먼저 콤보 상자 셀 유형 변경 시 반환된 값을 사용해 최종 사용자가 선택한 상태를 파악해야 합니다. 이를 위해서는 먼저 를 다음과 같이 SpreadJS 인스턴스에 바인딩해야 합니다.
// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => { if (args.propertyName === "value") { var cellType = args.sheet.getCellType(args.row, args.col); if ( !cellType || !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox) ) { return; } var state = args.newValue.toLowerCase(); // Test: the state selected should alert when selected console.log(state); } });</td>
3.2 선택한 상태로 API의 URL 만들기
위 코드를 적용하고 선택 후 상태 약어를 통해 테스트 성공 알림을 받고 나면 상태 변수를 사용해 원하는 URL을 가져와 COVID-19 Tracking Project API에서 상태 데이터를 가져옵니다. 이 과정은 아래 3.2에 나와 있습니다.
// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => { if (args.propertyName === "value") { var cellType = args.sheet.getCellType(args.row, args.col); if ( !cellType || !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox) ) { return; } var state = args.newValue.toLowerCase(); // Test: The state selected should alert when selected alert(state); // 3.2 - use the selected state for API's url to get the data var apiUrl = "https://covidtracking.com/api/v1/states/" + state + "/current.json"; // Test: The Covid Tracking Projects state API's URL should appear in console console.log(apiUrl); } });</td>
3.3 URL 데이터를 가져와 셀 바인딩 소스로 설정
두 테스트 모두 기대한 결과를 얻었다면 이제 3.1 및 3.2 파트에 포함된 alert 및 console을 제거해도 됩니다. 그다음에는 3.2 단계에서 만든 URL과 함께 를 사용해 URL의 API에서 JSON 데이터를 가져옵니다. 이어서 아래 3.3으로 표시된 부분과 같이 반환된 데이터를 시트 셀 바인딩 데이터 소스로 설정합니다.
// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => { if (args.propertyName === "value") { var cellType = args.sheet.getCellType(args.row, args.col); if ( !cellType || !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox) ) { return; } var state = args.newValue.toLowerCase(); // 3.2 - use the selected state for API's url to get the data var apiUrl = "https://covidtracking.com/api/v1/states/" + state + "/current.json"; // 3.3 - getJSON data from URL $.getJSON(apiUrl, function (data) { spread.suspendPaint(); spread.suspendCalcService(); // 3.3 - Set the URL's data as the sheets data source sheet.setDataSource( new GC.Spread.Sheets.Bindings.CellBindingSource(data) ); spread.refresh(); spread.resumeCalcService(); spread.resumePaint(); }); } });</td>
SpreadJS 응용 프로그램은 모든 단계의 코드 논리를 적용하고 런타임 디자이너 템플릿을 만들어 적용한 후 디자이너로 추가된 템플릿의 셀 바인딩 경로를 사용해 데이터를 표시합니다.
3.4 SpreadJS 뷰포트 수정
이제 SpreadJS 뷰포트를 수정하여 열 및 행 헤더, 세로 및 가로 스크롤 막대, 탭 스트립을 제거합니다. 이렇게 하려면 시트 옵션인 및 을 false로 설정한 다음, 통합 문서 옵션인 , 및 을 설정하면 됩니다.
// 3.4) Modify the viewport var sheet = spread.getActiveSheet(); sheet.options.colHeaderVisible = false; sheet.options.rowHeaderVisible = false; spread.options.showHorizontalScrollbar = false; spread.options.showVerticalScrollbar = false; spread.options.tabStripVisible = false;
이것으로 자습서를 모두 살펴보았습니다. 우리는 SpreadJS 사용, 런타임 디자이너를 사용해 템플릿 만들기, 셀 유형 만들기, URL에서 데이터 소스 설정하기, 이벤트를 사용해 데이터 로드하기, SpreadJS 뷰포트 수정에 대해 알아보았습니다.
SpreadJS로 더 많은 작업을 하고 다른 여러 가지 기능에 대해 알아보려면 에서 30일 무료 평가판을 다운로드하십시오.
댓글목록
등록된 댓글이 없습니다.