SpreadJS 조건부 서식을 사용하여 간트(Gantt) 차트를 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2018-04-19 00:00 조회 4,362회 댓글 0건

본문

첨부파일

spreadjs-spreadsheets-gantt-chart-sample.zip (1.8K)

SpreadJS의 스프레드 시트 구성 요소인 SpreadJS 에는 많은 기능이 있으며 그 중 하나는 조건부 서식입니다. 이를 통해 개발자와 사용자는 설정할 수있는 특정 조건에 따라 셀 스타일을 설정할 수 있습니다. 이 기능을 사용하면 특정 수식을 사용하여 특정 셀의 색상을 설정하는 JavaScript Gantt 차트를 만들 수 있습니다. 다음과 같은 간트 차트를 작성합니다.

간트 차트와 최종 통합 문서

Spread.Sheets 프로젝트 설정

시작하려면 먼저 Spread.Sheets 라이브러리 및 스타일 파일을 로드해야 합니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>Gantt Charts with SJS Conditional Formatting</title>

   <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.1.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.1.min.js"></script>
</head>
</html>

페이지를 배포하는 경우, 배포 라이센스 키도 추가해야 합니다.

<script>
   GC.Spread.Sheets.LicenseKey = "<Your Deployment Key>";
</script>

그런 다음 DIV 요소를 추가하여 Spread.Sheets 인스턴스를 호스팅하십시오.

<body>
   <div id="ss" style="width: 1200px; height: 700px; border: 1px solid gray"&gt</div>
</body>

다음으로 나중에 작성할 함수 아래와 같이 우선 초기화하고 호출 변수를 추가하십시오

var spread, activeSheet, sampleTable, data, table, monthNameStyle;
window.onload = function () {
   spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   activeSheet = spread.getActiveSheet();
   activeSheet.setColumnCount(44);

   spread.suspendPaint();
   LoadData();
   SetGanttChart();
   spread.options.allowUserEditFormula = false;
   spread.resumePaint();
}

JavaScript Gantt 차트에 데이터 로드

통합 문서를 설정 한 후, 데이터를 추가 할 수 있습니다. 이 포스팅에서는 시트의 테이블에 데이터를 추가합니다. 테이블을 추가하고 바인딩 할 데이터 컬럼을 설정하고 데이터를 형식화합니다.

function LoadData() {
   data = [
      { "task": "Strategy Meeting", "start": "2018/1/11", "end": "2018/1/11" },
      { "task": "Product Design", "start": "2018/1/12", "end": "2018/1/15" },
      { "task": "Design Check", "start": "2018/1/15", "end": "2018/1/20" },
      { "task": "Function Implementation", "start": "2018/1/20", "end": "2018/1/25" },
      { "task": "Quality Inspection", "start": "2018/1/25", "end": "2018/2/10" },
      { "task": "Release", "start": "2018/2/10", "end": "2018/2/10" }
  ];

   table = activeSheet.tables.addFromDataSource("tableTasks", 1, 0, data);
   var dataColumns = ["Task", "Start", "End"];
   for (var d = 0; d < dataColumns.length; d++)
       table.setColumnName(d, dataColumns[d]);

   var dateFormatter = new GC.Spread.Formatter.GeneralFormatter("MM/dd/yyyy", "en-us");
   for (var r = 0; r <= table.range().rowCount; r++) {
       for (var c = 1; c < 3; c++) {
           activeSheet.getCell(r, c).formatter(dateFormatter);
      }
  }

   for (var c = 0; c < 3; c++) {
       activeSheet.setColumnWidth(c, 180);
  }
}

데이터 테이블이 있는 시트

JavaScript Gantt 차트 만들기

조건부 서식이 지정된 셀을 추가하기 전에 월(month)과 일(day)에 대한 컬럼을 추가합니다:

function SetGanttChart() {           
  activeSheet.addSpan(0, 3, 1, 22);
  activeSheet.setValue(0, 3, "January");
  activeSheet.addSpan(0, 25, 1, 10);
  activeSheet.setValue(0, 25, "February");

  var dayNumber = new Date(2018, 0, 10);
  for (var c = 3; c < 35; c++) {
       activeSheet.setValue(1, c, dayNumber);
       dayNumber.setDate(dayNumber.getDate() + 1);
   }
   var dayFormatter = new GC.Spread.Formatter.GeneralFormatter("dd", "en-us");
   for (var c = 3; c < 35; c++) {
      activeSheet.getCell(1, c).formatter(dayFormatter);
  }
  for (var c = 3; c < 35; c++) {
       activeSheet.setColumnWidth(c, 25);
   }           
}

JavaScript 간트 차트 개요가 추가되었습니다.

이제 셀에 수식을 추가하여 날짜 컬럼이 데이터 소스의 지정된 날짜 범위 내에 있는지 확인합니다. 그렇다면 "1"이 셀에 배치됩니다. 그렇지 않으면 비어 있습니다:

var forumlaString, dayColumnRange, dayColumnRangeString, dateRange, dateRangeString = "";
for (var r = 2; r <= table.range().rowCount; r++) {
   for (var c = 3; c < 35; c++) {
       formulaString = "IF(";
       dayColumnRange = new GC.Spread.Sheets.CellRange(activeSheet, 1, c, 1, 1);
       dayColumnRangeString = GC.Spread.Sheets.CalcEngine.rangeToFormula(dayColumnRange, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.colRelative, false);
       formulaString += dayColumnRangeString + "=MEDIAN(";
       dateRange = new GC.Spread.Sheets.CellRange(activeSheet, r, 1, 1, 2);
       dateRangeString = GC.Spread.Sheets.CalcEngine.rangeToFormula(dateRange, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.rowRelative, false);
       formulaString += dateRangeString + "," + dayColumnRangeString + "),1,\"\")";
       activeSheet.setFormula(r, c, formulaString);
  }
}

수식이 추가되면 값에 따라 셀의 색상을 설정하기 위해 조건부 서식을 추가할 수 있습니다. 값이 "1"이면 해당 셀의 색상을 설정하십시오. 그렇지 않으면 셀을 그대로 둡니다.

아래는 Gantt 차트의 Boby를 만듭니다.

var color = "lightBlue"
var styleBlue = new GC.Spread.Sheets.Style();
styleBlue.backColor = color;
styleBlue.foreColor = color;

activeSheet.conditionalFormats.addCellValueRule(
   GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.equalsTo,
   1,
   undefined,
   styleBlue,
  [new GC.Spread.Sheets.Range(2, 3, table.range().rowCount, 33)]);

조건부 서식 셀이 추가되었습니다.

차트를 더 읽기 쉽게 만들기 위해 데이터 영역과 머리글 주위에 테두리를 추가하고 서식을 추가할 수 있습니다.

function SetBorders() {
   monthNameStyle = new GC.Spread.Sheets.Style();
   monthNameStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
   monthNameStyle.backColor = "lightBlue";
   var border = new GC.Spread.Sheets.LineBorder;
   border.color = "black";
   border.style = GC.Spread.Sheets.LineStyle.double;
   monthNameStyle.borderLeft = border;
   monthNameStyle.borderTop = border;
   monthNameStyle.borderRight = border;
   monthNameStyle.borderBottom = border;

   for (var i = 3; i < 35; i++) {
       activeSheet.setStyle(0, i, monthNameStyle);
  }

   activeSheet.getRange(1, 3, table.range().rowCount, 1).setBorder(border, { left: true });
   activeSheet.getRange(1, 24, table.range().rowCount, 1).setBorder(border, { right: true });
   activeSheet.getRange(1, 34, table.range().rowCount, 1).setBorder(border, { right: true });
   activeSheet.getRange(table.range().rowCount, 3, 1, 32).setBorder(border, { bottom: true });
}