확대/축소

GanttSheet 차트 영역을 확대/축소하여 차트를 더 많이 또는 더 적게 표시할 수 있습니다.

확대/축소 비율 확대/축소 비율은 날짜 표시줄의 확대/축소 비율을 나타내는 숫자 값입니다. 확대/축소 비율을 변경하려면 날짜 표시줄의 확대/축소 함수를 호출합니다. 확대/축소 날짜 표시줄에서 확대/축소할 수 있습니다. 자동 확대/축소 각 계층의 눈금 레이블에 따라 날짜 표시줄을 적절한 비율로 자동으로 확대/축소할 수도 있습니다. 확대/축소 값 날짜 표시줄을 지정한 비율로 확대/축소할 수 있습니다. 다음 코드는 날짜 표시줄을 확대/축소하여 대상 날짜 범위를 뷰포트에 표시합니다. 날짜 표시줄은 가장 가까운 눈금으로 조정됩니다. 계층 단위 조정 부울 값은 확대/축소 비율에 따라 계층 단위를 적절한 값으로 조정하는지를 나타냅니다. API에서 기본적으로 true입니다. timescale.zoomIn(adjustTierUnit); timescale.zoomOut(adjustTierUnit); timescale.zoomTo(zoomFactor, adjustTierUnit); timescale.zoomToRange(startDate, endDate, adjustTierUnit);
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var myTable; var ganttSheet; var adjustTierUnit = true; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); initSplitView(spread); }; function initSpread(spread) { spread.suspendPaint(); initDataSource(spread); initGanttSheet(spread); spread.resumePaint(); } function initDataSource(spread) { var tableName = "Gantt_Id"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var dataManager = spread.dataManager(); myTable = dataManager.addTable("myTable", { batch: true, remote: { read: { url: apiUrl } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } }); } function initGanttSheet(spread) { ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet); var view = myTable.addView("ganttView", [ { value: "taskNumber", caption: "NO.", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120 } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }).then(function() { ganttSheet.project.timescale.zoomOut(); }); initSidePanel(ganttSheet); } function initSidePanel(ganttSheet) { var adjustTierUnitCheckbox = document.getElementById("adjust-tier-unit"); var zoomAutoButton = document.getElementById("zoom-auto"); var zoomInButton = document.getElementById("zoom-in"); var zoomOutButton = document.getElementById("zoom-out"); var zoomFactorInput = document.getElementById("zoom-factor"); var zoomToButton = document.getElementById("zoom-to"); var zoomToTypeSelect = document.getElementById("zoom-to-type"); var zoomToRangeButton = document.getElementById("zoom-to-range"); adjustTierUnitCheckbox.addEventListener("click", function() { if (adjustTierUnitCheckbox.classList.contains("active")) { adjustTierUnitCheckbox.classList.remove("active"); adjustTierUnit = false; } else { adjustTierUnitCheckbox.classList.add("active"); adjustTierUnit = true; } }); zoomAutoButton.addEventListener("click", function() { ganttSheet.project.timescale.zoomAuto(); syncPanel(ganttSheet); }); zoomInButton.addEventListener("click", function() { ganttSheet.project.timescale.zoomIn(adjustTierUnit); syncPanel(ganttSheet); }); zoomOutButton.addEventListener("click", function() { ganttSheet.project.timescale.zoomOut(adjustTierUnit); syncPanel(ganttSheet); }); zoomToButton.addEventListener("click", function() { var factor = Number(zoomFactorInput.value); if (!isNaN(factor)) { ganttSheet.project.timescale.zoomTo(factor, adjustTierUnit); syncPanel(ganttSheet); } }); zoomToRangeButton.addEventListener("click", function() { var zoomToType = zoomToTypeSelect.value; var project = ganttSheet.project; if (zoomToType === "0") { var task = ganttSheet.getActiveTask(); if(task && task.finish && task.start) { project.timescale.zoomToRange(task.start, task.finish); } } else if (zoomToType === "1") { var startDate = Math.min.apply(null, project.tasks.filter(function(t) {return t.start}).map(function(t) {return t.start.valueOf()})); var finishDate = Math.max.apply(null, project.tasks.filter(function(t) {return t.finish}).map(function(t) {return t.finish.valueOf()})); project.timescale.zoomToRange(new Date(startDate), new Date(finishDate)); } else if (zoomToType === "2") { let count = Number(zoomToRangeCountInput.value); let unit = Number(zoomToRangeUnitSelect.value); let start = project.timescale.currentDate; let defaultMilliseconds = [ 365 * 24 * 60 * 60 * 1000, // Years= 0, 365 / 2 * 24 * 60 * 60 * 1000, // HalfYears= 1, 365 / 4 * 24 * 60 * 60 * 1000, // Quarters= 2, 30 * 24 * 60 * 60 * 1000, // Months= 3, 10 * 24 * 60 * 60 * 1000, // ThirdsOfMonth= 4, 7 * 24 * 60 * 60 * 1000, // Weeks= 5, 24 * 60 * 60 * 1000, // Days= 6, 60 * 60 * 1000, // Hours= 7, 60 * 1000, // Minutes= 8 ]; let finish = new Date(start.valueOf() + defaultMilliseconds[unit] * count); project.timescale.zoomToRange(start, finish); } syncPanel(ganttSheet); }); } function syncPanel(ganttSheet) { var zoomFactorInput = document.getElementById("zoom-factor"); zoomFactorInput.value = ganttSheet.project.timescale.zoomFactor; } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api'; } function initSplitView(spread) { var host = document.getElementById("split-view"); var content = host.getElementsByClassName("split-content")[0]; var panel = host.getElementsByClassName("split-panel")[0]; new SplitView({ host: host, content: content, panel: panel, refreshContent: function() { spread.refresh(); } }); }
<!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"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <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-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/splitView/splitView.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="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="split-view" class="sample-tutorial"> <div id="ss" class="sample-spreadsheets split-content"></div> <div class="options-container split-panel"> <div class="option-row option-title"> Zoom the ganttsheet chart area. </div> <div class="option-block"> <div class="option-row"> <label class="option-checkbox active" id="adjust-tier-unit">Adjust Tier Unit</label> <div class="option-info">* checkbox toggle whether adjust tier unit or not when zoom. It affects the result of zoom in, zoom out, zoom to and zoom to range.</div> </div> </div> <div class="option-block"> <div class="option-row"> <input type="button" id="zoom-auto" class="option-button" value="Zoom Auto" /> </div> <div class="option-row"> <input type="button" id="zoom-in" class="option-button" value="Zoom In" /> </div> <div class="option-row"> <input type="button" id="zoom-out" class="option-button" value="Zoom Out" /> </div> </div> <div class="option-block"> <div class="option-row input-box"> <label for="zoom-factor">Zoom Factor</label> <input type="text" id="zoom-factor" value="1" /> <div class="option-info valid">* valid value: number</div> </div> <div class="option-row"> <input type="button" id="zoom-to" class="option-button" value="Zoom To" /> </div> <div class="option-row selection-box"> <label for="zoom-to-type">Demo Range</label> <select id="zoom-to-type"> <option value="0">Selected Task</option> <option value="1">Entire Project</option> <!-- <option value="2">Custom Range</option> --> </select> </div> <!-- <div class="option-block toggle hide" id="custom-zoom-panel"> <div class="option-info toggle">* toggle panel for the "Demo Range" option when you selected "Custom Range" item.</div> <div class="option-row selection-box"> <label for="zoom-to-range-unit">Custom Zoom Unit</label> <select id="zoom-to-range-unit"> <option value="0">Years</option> <option value="1">Half Years</option> <option value="2">Quarters</option> <option value="3">Months</option> <option value="4">Thirds of Months</option> <option value="5">Months</option> <option value="6">Weeks</option> <option value="7" selected>Days</option> <option value="8">Hours</option> <option value="8">Minutes</option> </select> </div> <div class="option-row input-box"> <input type="text" id="zoom-to-range-count" value="1" /> <label for="zoom-to-range-count">Custom Zoom Count</label> <div class="option-info valid">* valid value: integer</div> </div> </div> --> <div class="option-row"> <input type="button" id="zoom-to-range" class="option-button" value="Zoom To Range" /> </div> </div> </div> </div> </html>
.option-block { background: #fff; padding: 8px; margin: 12px 0; border-radius: 4px; border: 1px dashed #82bc00; box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1); } .option-block.toggle { border: 1px dotted #f7a711; } .option-row { font-size: 14px; box-sizing: border-box; padding: 4px 0; } .option-title { font-weight: bold; color: #656565; } .option-info { font-size: 12px; color: #919191; margin-top: 6px; font-weight: normal; } .option-info.valid { color: #82bc00; } .option-info.toggle { color: #f7a711; } .option-button { width: 100%; padding: 0; line-height: 20px; background: #82bc00; color: #fff; transition: 0.3s; cursor: pointer; outline: none; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border: none; } .option-button:hover { background: #82bc00; color: #fff; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4); } .option-checkbox { background: #fff; border: 1px dashed #f7a711; color: #f7a711; padding: 2px 4px; transition: 0.3s; box-sizing: border-box; cursor: pointer; } .option-checkbox.active { color: #fff; background: #f7a711; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border-radius: 4px; } .selection-box { position: relative; } .selection-box > select { text-align: left; width: 100%; height: 20px; padding: 0; line-height: 20px; background: transparent; border: none; border-bottom: 2px solid #656565; color: #656565; transition: 0.3s; cursor: pointer; outline: none; box-sizing: border-box; } .selection-box > select > option { background: white; } .selection-box > select:focus { border-bottom: 2px solid #82bc00; color: #82bc00; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); } .selection-box > label { position: absolute; cursor: pointer; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; right: 0; top: 6px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); } .input-box { position: relative; } .input-box > input[type=text] { width: 100%; background: transparent; border: none; color: #656565; border-bottom: 2px solid #656565; outline: none; box-sizing: border-box; transition: 0.3s; } .input-box > input[type=text]:focus { color: #82bc00; border-bottom: 2px solid #82bc00; } .input-box > label { cursor: pointer; position: absolute; right: 0; top: 5px; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); }