눈금선

GanttSheet 차트 영역의 눈금선 스타일을 변경할 수 있습니다. 아래 옵션을 변경하여 작동 방식을 알아보십시오.

사용 가능한 눈금선 설정할 수 있는 눈금선의 종류는 다음 7개입니다. ganttRows topTierColumn middleTierColumn bottomTierColumn currentDate projectStart projectFinish 눈금선 유형 설정할 수 있는 선 유형은 다음 5개입니다. empty thin dashed dotted dashDot 예시 모든 GanttSheet 눈금선의 경우 사용할 수 있는 속성은 lineType, lineColor, interval입니다. 간격 눈금선 ganttRows에 간격 눈금선을 추가할 수 있습니다. 사용 가능한 속성은 intervalLineType, intervalLineColor, interval입니다. 일반 눈금선을 설정할 수도 있습니다.
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var myTable; var ganttSheet; 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, visible: false } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); ganttSheet.project.timescale.tierMode = GC.Spread.Sheets.GanttSheet.TimescaleTierMode.topMiddleBottom; ganttSheet.project.timescale.topTier.unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.thirdsOfMonth; }).then(function() { ganttSheet.gridlines.bottomTierColumn = { lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed, lineColor: "#c85b11" }; ganttSheet.gridlines.ganttRows.lineType = GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin; ganttSheet.gridlines.ganttRows.lineColor = "#abd08f"; ganttSheet.gridlines.ganttRows.interval = 2; ganttSheet.gridlines.ganttRows.intervalLineType = GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot; ganttSheet.gridlines.ganttRows.intervalLineColor = "#9cc3e5"; }); initSidePanel(ganttSheet); } function initSidePanel(ganttSheet) { var setButton = document.getElementById("set-gridline"); var intervalPanel = document.getElementById("interval-panel"); var affectItemOption = document.getElementById("affectItem"); var lineTypeOption = document.getElementById("lineType"); var lineColorOption = document.getElementById("lineColor"); var intervalLineTypeOption = document.getElementById("intervalLineType"); var intervalLineColorOption = document.getElementById("intervalLineColor"); var intervalOption = document.getElementById("interval"); var option = convertToNormalOptions(ganttSheet, "ganttRows"); syncOptionToPanel(option); affectItemOption.addEventListener('change', function(e) { var target = affectItemOption.value; if (affectItemOption.value === "ganttRows") { intervalPanel.classList.remove("hide"); } else { intervalPanel.classList.add("hide"); } var option = convertToNormalOptions(ganttSheet, target); syncOptionToPanel(option); }); setButton.addEventListener('click', function() { var target = affectItemOption.value; var lineType = Number(lineTypeOption.value); var lineColor = lineColorOption.value; var intervalLineType = Number(intervalLineTypeOption.value); var intervalLineColor = intervalLineColorOption.value; var interval = Number(intervalOption.value); var option = convertToGanttGridlineOptions(lineType, lineColor, intervalLineType, intervalLineColor, interval); if (option) { ganttSheet.gridlines[target] = option; } }); function syncOptionToPanel(option) { if (option.lineType) { lineTypeOption.value = option.lineType; } if (option.lineColor) { lineColorOption.value = option.lineColor; } if (option.intervalLineType) { intervalLineTypeOption.value = option.intervalLineType; } if (option.intervalLineColor) { intervalLineColorOption.value = option.intervalLineColor; } if (option.interval) { intervalOption.value = option.interval; } } } function convertToGanttGridlineOptions(lineType, lineColor, intervalLineType, intervalLineColor, interval) { var option = {}; if (typeof lineType === "number") { option.lineType = lineType; if (lineType !== 0) { if (lineColor) { option.lineColor = lineColor; } } } if (typeof intervalLineType === "number") { option.intervalLineType = intervalLineType; if (intervalLineType !== 0) { if (lineType) { option.intervalLineColor = intervalLineColor; } if (typeof interval === "number" && parseInt(interval) === parseFloat(interval)) { option.interval = interval; } } } return option; } function convertToNormalOptions(ganttSheet, target) { return ganttSheet.gridlines[target]; } 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"> Change the provided properties to see how they affect the gridlines in gantt chart area. </div> <div class="option-block"> <div class="option-row selection-box"> <label for="affectItem">Affect Item</label> <select id="affectItem"> <option value="ganttRows" selected="selected">ganttRows</option> <option value="topTierColumn">topTierColumn</option> <option value="middleTierColumn">middleTierColumn</option> <option value="bottomTierColumn">bottomTierColumn</option> <option value="currentDate">currentDate</option> <option value="projectStart">projectStart</option> <option value="projectFinish">projectFinish</option> </select> </div> <div class="option-row selection-box"> <label for="lineType">Line Type</label> <select id="lineType"> <option value="0">empty</option> <option value="1" selected="selected">thin</option> <option value="3">dashed</option> <option value="4">dotted</option> <option value="9">dashDot</option> </select> </div> <div class="option-row input-box"> <label for="lineColor">Line Color</label> <input type="text" id="lineColor" value="#abd08f" /> <div class="option-info valid">* valid value: color string</div> </div> </div> <div class="option-block toggle" id="interval-panel"> <div class="option-info toggle">* toggle panel for the "Affect Item" option when you selected "ganttRows" item.</div> <div class="option-row option-title"> <div>Set Interval Gridline Styles:</div> </div> <div class="option-row selection-box"> <label for="intervalLineType">Interval Line Type</label> <select id="intervalLineType"> <option value="0">empty</option> <option value="1">thin</option> <option value="3">dashed</option> <option value="4">dotted</option> <option value="9" selected="selected">dashDot</option> </select> </div> <div class="option-row input-box"> <label for="intervalLineColor">Interval Line Color</label> <input type="text" id="intervalLineColor" value="#9cc3e5" /> <div class="option-info valid">* valid value: color string</div> </div> <div class="option-row input-box"> <label for="interval">Interval</label> <input type="text" id="interval" value="2" /> <div class="option-info valid">* valid value: integer</div> </div> </div> <div class="option-row"> <input type="button" id="set-gridline" class="option-button" value="Set Gridline" /> </div> </div> </div> </html>
.options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; box-shadow: inset 0px 0 4px 0 rgba(0,0,0,0.4); } .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); }