패널

시나리오 패널은 통합 문서 시나리오를 관리하는 즉시 사용 가능한 사이드 패널입니다. 시나리오 조회 및 선택, 값 적용 또는 복원, 시나리오 캡처 활성화, 이름 편집, 재정의 표시 여부와 잠금 상태 관리, 재정의 셀 탐색 및 시나리오 삭제를 지원합니다.

시나리오 패널은 통합 문서 시나리오를 조회, 적용 및 편집하는 패널을 제공합니다. 주요 기능은 다음과 같습니다. 시나리오 표시: 시나리오 세부 정보, 재정의 시트 및 재정의 셀과 함께 시나리오 목록을 표시합니다. 적용 및 복원: 패널에서 시나리오를 적용하거나 복원하고, 적용된 모든 시나리오를 복원합니다. 시나리오 활성화/비활성화: 편집된 셀을 캡처해 선택한 시나리오에 기록하거나 활성 시나리오를 비활성화합니다. 이름 바꾸기: 시나리오 이름을 클릭하고 편집하여 이름을 변경합니다. 제거: 시나리오 또는 개별 재정의 셀을 제거합니다. 탐색: 시나리오 재정의에 포함된 셀로 빠르게 이동합니다. 예제
var spread; var scenarioPanel; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(workbook) { workbook.suspendPaint(); workbook.fromJSON(json); workbook.resumePaint(); scenarioPanel = new GC.Spread.Sheets.Scenarios.ScenarioPanel('scenarioPanelHost'); scenarioPanel.attach(workbook); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div id="scenarioPanelHost" class="scenario-panel-host"></div> </div> </body> </html>
var json = { "version": "18.0.0", "name": "", "docProps": { "docPropsApp": {}, "docPropsCore": {} }, "sheetCount": 1, "users": [ { "id": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}", "name": "Ethan(VP of Sales)", "color": "#26A69A" }, { "id": "{483FF98B-BB90-4EB4-8329-761CD56778AE}", "name": "Emma(Finance Director)", "color": "#A6A634" } ], "customList": [], "defaultSheetTabStyles": {}, "builtInFileIcons": {}, "sheets": { "연간 매출 예측": { "name": "연간 매출 예측", "isSelected": true, "rowCount": 19, "columnCount": 7, "activeRow": 11, "activeCol": 4, "visible": 1, "theme": "Office", "data": { "dataTable": { "0": { "0": { "value": "선풍기 연간 매출 예측", "style": { "autoFormatter": {}, "font": "bold 16px Arial", "fontWeight": "bold", "fontSize": "16px", "fontFamily": "Arial" } } }, "1": { "0": { "value": "4월까지의 실제 매출과 나머지 기간의 예측 입력입니다." } }, "2": { "0": { "value": "월", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "1": { "value": "수량", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "2": { "value": "단가", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "3": { "value": "매출", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "4": { "value": "비용", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "5": { "value": "이익", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } } }, "3": { "0": { "value": "1월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 622, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 29856, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 17416, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 12440, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "4": { "0": { "value": "2월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 631, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 30288, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 17668, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 12620, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "5": { "0": { "value": "3월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 713, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 34224, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 19964, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 14260, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "6": { "0": { "value": "4월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 854, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 40992, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 23912, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 17080, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "7": { "0": { "value": "5월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "formatter": "#,##0" } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "8": { "0": { "value": "6월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "formatter": "#,##0" } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "9": { "0": { "value": "7월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "10": { "0": { "value": "8월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "11": { "0": { "value": "9월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "12": { "0": { "value": "10월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "13": { "0": { "value": "11월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "14": { "0": { "value": "12월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "15": { "0": { "value": "Year Total", "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "1": { "value": 2820, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "#,##0", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } }, "2": { "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "3": { "value": 135360, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "$#,##0.00", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } }, "4": { "value": 78960, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "$#,##0.00", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } }, "5": { "value": 56400, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "$#,##0.00", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } } }, "17": { "0": { "value": "시나리오 재정의 셀", "style": { "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "1": { "value": "B8:C15", "style": { "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } } } }, "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rowHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "colHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "columns": [ { "size": 143 }, { "size": 88 }, { "size": 92 }, { "size": 116 }, { "size": 108 }, { "size": 116 } ], "defaultData": { "7": {}, "8": {}, "9": {}, "10": {}, "11": {}, "12": {}, "13": {}, "14": {} }, "leftCellIndex": 0, "topCellIndex": 0, "selections": { "0": { "row": 11, "col": 4, "rowCount": 1, "colCount": 1 }, "length": 1 }, "rowOutlines": { "items": [] }, "columnOutlines": { "items": [] }, "cellStates": {}, "states": {}, "outlineColumnOptions": {}, "autoMergeRangeInfos": [], "sharedFormulas": { "0": { "formula": "B4*C4", "baseRow": 3, "baseColumn": 3, "lastRow": 14, "lastColumn": 3 }, "1": { "formula": "B4*28", "baseRow": 3, "baseColumn": 4, "lastRow": 14, "lastColumn": 4 }, "2": { "formula": "D4-E4", "baseRow": 3, "baseColumn": 5, "lastRow": 14, "lastColumn": 5 }, "3": { "formula": "SUM(B4:B15)", "baseRow": 15, "baseColumn": 1, "lastRow": 15, "lastColumn": 5 }, "nextIndex": 4 }, "printInfo": { "paperSize": { "width": 850, "height": 1100, "kind": 1 } }, "gridline": { "showVerticalGridline": false }, "index": 0, "order": 0 } }, "sheetTabCount": 0, "namedPatterns": {}, "scenarios": { "Break-even": { "name": "Break-even", "userId": "{483FF98B-BB90-4EB4-8329-761CD56778AE}", "overrides": [ { "sheetName": "연간 매출 예측", "dataTable": { "7": { "1": { "value": 900 }, "2": { "value": 48 } }, "8": { "1": { "value": 1000 }, "2": { "value": 48 } }, "9": { "1": { "value": 1200 }, "2": { "value": 48 } }, "10": { "1": { "value": 1200 }, "2": { "value": 48 } }, "11": { "1": { "value": 1000 }, "2": { "value": 48 } }, "12": { "1": { "value": 800 }, "2": { "value": 48 } }, "13": { "1": { "value": 600 }, "2": { "value": 48 } }, "14": { "1": { "value": 600 }, "2": { "value": 48 } } } } ] }, "Pessimistic": { "name": "Pessimistic", "userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}", "overrides": [ { "sheetName": "연간 매출 예측", "dataTable": { "7": { "1": { "value": 960 }, "2": { "value": 48 } }, "8": { "1": { "value": 1100 }, "2": { "value": 48 } }, "9": { "1": { "value": 1800 }, "2": { "value": 48 } }, "10": { "1": { "value": 1800 }, "2": { "value": 48 } }, "11": { "1": { "value": 1200 }, "2": { "value": 48 } }, "12": { "1": { "value": 800 }, "2": { "value": 48 } }, "13": { "1": { "value": 600 }, "2": { "value": 48 } }, "14": { "1": { "value": 600 }, "2": { "value": 48 } } } } ] }, "Optimistic": { "name": "Optimistic", "userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}", "overrides": [ { "sheetName": "연간 매출 예측", "dataTable": { "7": { "1": { "value": 1000 }, "2": { "value": 48 } }, "8": { "1": { "value": 1400 }, "2": { "value": 55 } }, "9": { "1": { "value": 2300 }, "2": { "value": 55 } }, "10": { "1": { "value": 2300 }, "2": { "value": 55 } }, "11": { "1": { "value": 1400 }, "2": { "value": 48 } }, "12": { "1": { "value": 1000 }, "2": { "value": 48 } }, "13": { "1": { "value": 700 }, "2": { "value": 48 } }, "14": { "1": { "value": 700 }, "2": { "value": 48 } } } } ] } }, "scenarioAdditionalInfo": { "appliedScenarios": {}, "baseValues": { "연간 매출 예측": {} } }, "pivotCaches": {} };
html, body { height: 100%; margin: 0; overflow: hidden; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; font-family: Arial, sans-serif; } .sample-spreadsheets { width: calc(100% - 360px); height: 100%; overflow: hidden; float: left; } .scenario-panel-host { float: right; width: 360px; height: 100%; box-sizing: border-box; padding: 6px; border-left: 1px solid #ddd; background: #fafafa; overflow: hidden; }