SpreadJS SHAPES(도형) 기능을 사용하면 JavaScript 응용 프로그램에서 데이터, 대시보드 및 보고서의 모양을 개선할 수 있습니다.

기본 제공 도형(도형)와 사용자 정의 도형으로 구성된 이 기능을 사용하면 데이터 기반 그래픽, 순서도, Gantt 차트, 주석 및 모든 도형 필요에 따라 스프레드시트와 응용 프로그램을 개선할 수 있습니다.

SpreadJS에는 여러 Excel 도형을 비롯하여 180개 이상의 도형에 대한 지원이 포함됩니다. 또한 SpreadJS는 데이터 기반 도형을 사용하여 고급 기능을 제공합니다. 예를 들어 데이터베이스 또는 기타 데이터 소스의 데이터를 사용하여 도형 속성을 동적으로 생성할 수 있으며, 이를 통해 제조 공장용 모형처럼 대화형 프로세스 모형을 만들 수 있습니다.

위 그림은 SpreadJS에서 어떻게 여러 도형을 사용하여 기업에서 작업, 프로세스 또는 워크플로의 단계를 보여주는 데 사용하는 보기 좋은 순서도를 만드는 한 가지 예입니다.

이 블로그에서는 이 멋진 기능을 최대한 활용하는 방법, SpreadJS 도형을 추가, 수정 및 사용자 정의하는 방법과 해당 도형을 사용하여 javaScript 응용 프로그램에서 원시 데이터를 시각화하는 방법으로 값을 추가하는 방법을 살펴볼 것입니다.

도형 유형

기본 제공 도형

기본 제공 도형을 사용하면 어떠한 기능 손실도 없이 도형이 포함된 Excel 통합 문서를 원활하게 가져오고 내보낼 수 있습니다. 60개가 넘는 기본 제공 도형에는 기본 도형, 화살표, 풍선 및 작업 버튼이 포함됩니다. 다이어그램 및 대시보드를 빠르게 작성할 수 있습니다.

SpreadJS Designer에서 기본 제공 도형은 아래 범주로 구분됩니다.

• 선/연결선: 다양한 선, 화살표, 연결선 등을 찾을 수 있습니다.

• 사각형: 여러 가지 유형의 사각형을 찾을 수 있습니다.

• 기본 세이프: 삼각형, 타원형, 다이아몬드형 등과 같은 여러 가지 기본 도형을 찾을 수 있습니다.

• 블록 화살표: 위로, 아래로, 오른쪽, 왼쪽 화살표를 비롯하여 다양한 화살표를 찾을 수 있습니다.

• 수식 도형: 이 범주에는 더하기, 빼기, 곱하기, 나누기, 같음 및 같지 않음 등과 같은 도형이 포함됩니다.

• 순서도: 도형을 사용하여 고유한 순서도를 만들 수 있습니다.

• 별 및 현수막: 다양한 별 및 현수막 도형을 찾을 수 있습니다.

• 설명선: 직사각형 설명선, 타원형 설명선, 설명선 등 여러 가지 유형의 설명선을 찾을 수 있습니다.

카메라 스크린샷

카메라 도형은 지정된 셀 범위의 동적 스냅샷을 만들 수 있는 기능으로, 멋진 대시보드를 만드는 데 아주 유용합니다. 카메라 도형에는 실제 셀 범위의 실시간 변경 사항이 모두 반영됩니다.

일반적인 도형처럼 작동하고 Excel 가져오기/내보내기, 그룹화/그룹 해제, 복사/붙여넣기 및 시트 간 지원을 포함합니다. 카메라 도형은 다른 시트의 데이터가 포함된 대시보드 또는 보고서를 표시하는 경우처럼 변경 사항이 현재 표시되지 않더라도 스프레드스트의 변경 사항을 관찰하는 데 유용합니다.

카메라 도구를 사용하면 데이터, 표 또는 그래프에서 선택한 부분의 스크린샷을 생성하여 연결된 그림으로 붙여넣을 수 있습니다. 붙여넣은 이미지는 CameraShape API를 사용하여 서식을 지정할 수 있습니다.

var shape = sheet.shapes.addCameraShape("myCameraShape1", "Sheet1!A1:D7", 240, 200); // Cells A!:D& contains the data you want to screenshot.
var shapeStyle = shape.style();
shapeStyle.fill.color = 'pink';
shapeStyle.fill.transparency = 0.5;
shapeStyle.line.color = 'green';
shapeStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot;
shapeStyle.line.width = 5;
shape.style(shapeStyle);

카메라 도형 사용:

• 깔끔한 대시보드 만들기: 코드를 몇 줄만 작성하면 javascript 대시보드에서 모든 요소의 크기가 올바르게 조정되도록 하는 것과 관련된 문제를 잊어버릴 수 있습니다. 카메라 도형을 사용하면 다양한 표 및 차트의 사진을 찍어 해당 이미지를 새로운 워크시트에 함께 배치할 수 있습니다.

• 스파크라인 바꾸기: 카메라 도구를 사용하면 차트 사진을 찍은 다음 셀에 맞춰 사진 크기를 조정할 수 있습니다. 차트 데이터가 바뀌면 이미지도 바뀝니다.

• 다른 워크시트 육안 검사: 다른 워크시트에 입력한 데이터를 바탕으로 데이터의 차트 또는 표가 어떻게 바뀌었는지 추적하려는 경우 카메라 도형을 사용할 수 있습니다.

• 팝업 창: 카메라 도형을 추가 데이터 창으로 사용하고 SpreadJS 기능을 사용하여 표시하거나 숨길 수 있습니다. 이는 대시보드에 매우 유용합니다. 예를 들어, 제품 번호를 클릭하면 제품 그림이 표시됩니다.

SpreadJS에서는 카메라 도형을 빠르게 이동 또는 회전하거나 크기를 조정할 수 있습니다. 또한 다른 도형와 그룹화하거나 그룹 해제하고 하나의 시트에서 복사하여 다른 시트에 붙여넣을 수 있습니다.

사용자 정의 도형

SpreadJS 도형의 가장 흥미로운 기능은 사용자 정의 도형을 만들 수 있는 기능입니다. 이 기능은 SpreadJS의 수준을 스프레드시트보다 한 단계 더 높입니다. 이제 더욱 발전된 다이어그램 및 응용 프로그램을 만들 수 있습니다. 여기에는 좌석 배치도, 기계/전자 장비 상태 모니터링, 수익 분석 및 조직도 등이 포함됩니다.

사용자 정의 도형의 가장 강력한 기능 중 하나는 데이터에서 도형을 생성하는 것입니다. 차트와 마찬가지로, 사용자 정의 도형 속성은 코드에 정의되어 있거나 통합 문서에 셀 범위 참조로 정의되어 있든 상관없이 특정 데이터가 구동할 수 있습니다.

따라서 사용자가 데이터를 쉽게 가져와 데이터를 위해 개발자 정의 다이어그램 및 대시보드 형태로 도형을 만들 수 있습니다.

이를 보여 주는 완벽한 예는 자동차 보험 샘플로, 자세한 내용은 블로그 게시글 Build a JavaScript car insurance app(JavaScript 자동차 보험 앱 빌드)에서 확인할 수 있습니다. 이 샘플에서 데이터는 별도 시트에 들어 있고, 도형은 해당 시트의 데이터를 사용하여 정의했습니다.

디자이너를 위한 사용자 정의 도형 메뉴가 없지만 코드를 통해 정의할 수 있습니다. 이러한 방식으로 여러 속성을 사용하여 모델을 정의한 다음 추가 시 도형에 해당 모델을 적용할 수 있습니다.

var shapeModel = {
  left: "=Sheet1!B7",
  top: "=Sheet1!C7",
  width: "=Sheet1!D7",
  height: "=Sheet1!E7",
  options: {
      fill: {
          type: 1,
          color: startColor,
          transparency: "0.5"
      }
  },
  path: [
      [
          ["A", 100,75,40,0,2*Math.PI],
          ["Z"]
      ]
  ]
};
​
sheet.shapes.add('MyShape', shapeModel);

SpreadJS 도형을 사용하면 여기서 다룬 것보다 훨씬 더 많은 작업을 수행할 수 있습니다. SpreadJS는 추가된 기능으로 더 많은 유형의 응용 프로그램에 더 적절할 수 있으며, 이는 SpreadJS가 단순한 스프레드시트 이상임을 나타냅니다. 다음은 몇 가지 아이디어입니다.

• 사용자가 책상에 앉아 있는 사람을 확인하거나 어메니티 정보를 추가할 수 있는 시각적 대화형 평면도 만들기

• 제조 시설의 생산 평면도를 만들고 성능 저하 또는 문제가 발생하는 영역 강조 표시

• Gantt 차트 및 조직도 만들기

도형 사용자 정의

이동 및 회전

ShapeBase API를 사용하여 모든 도형의 속성을 사용자 정의할 수 있습니다.

• allowMove: 도형 이동을 비활성화할지 여부를 가져오거나 설정합니다.

• allowResize: 도형 크기 조정을 비활성화할지 여부를 가져오거나 설정합니다.

• allowRotate: 도형 회전을 비활성화할지 여부를 가져오거나 설정합니다.

• showHandle: 도형 핸들을 표시할지 여부를 가져오거나 설정합니다.

• isSelected: 이 도형을 선택할지 여부를 가져오거나 설정합니다.

• width/height: 도형의 너비 또는 높이를 가져오거나 설정합니다.

• x/y: 도형의 가로 또는 세로 위치를 가져오거나 설정합니다.

기본 도형의 경우 도형의 스타일 및 회전을 변경할 수도 있습니다.

• rotate: 도형의 회전 각도를 가져오거나 설정합니다(도 단위).

• style: 도형의 스타일을 가져오거나 설정합니다.

채우기

SpreadJS를 사용하여 도형의 배경 속성을 변경합니다. 선택한 색으로 도형을 채우고/채우거나 투명도 속성을 원하는 백분율로 변경할 수 있습니다. 또한 단색 채우기, 그라데이션 채우기, 그림 채우기 및 질감 채우기 등 도형에 특별한 채우기 효과를 추가할 수 있습니다.

let style = shape.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.none };
//style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.solid, color: 'pink', transparency: 0.5 };
//style.fill = {
//   type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
//   direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearRight,
//   stops: [ {color: 'blue', position: 0 }, {color: 'pink', position: 1} ]
//};
//style.fill = { src: "data:image/jpeg;base64..." };
//style.fill = { src: "data:image/jpeg;base64...", tilePictureAsTexture: true };
shape.style(style);

테두리

SpreadJS를 사용하면 도형에 테두리를 추가하고 색, 투명도, 너비 등 여러 서식을 테두리에 적용할 수 있습니다.

//basic shape border
  var rect = sheet.shapes.add('rect', GC.Spread.Sheets.Shapes.AutoShapeType.lineCallout2, 100, 50, 300, 200);
  var shapeStyle = rect.style();
  shapeStyle.line.compoundType = GC.Spread.Sheets.Shapes.CompoundType.thickThin;
  rect.style(shapeStyle);
//connector border
  var line = sheet.shapes.addConnector("myShape2", GC.Spread.Sheets.Shapes.ConnectorType.straight, 220, 120, 300, 120);
  shapeStyle = line.style();
  shapeStyle.line.compoundType = GC.Spread.Sheets.Shapes.CompoundType.triple;
  line.style(shapeStyle);

참고: 연결선 도형의 테두리 속성은 기본적으로 해당 도형의 전체 배경입니다.

도형 텍스트

textEffect와 textFrame을 사용하여 연결에 추가한 텍스트에 서식을 지정할 수 있습니다.

  var rectangle = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 50, 50, 100, 100);
  var rectangleStyle = rectangle.style();
​
  rectangleStyle.textEffect.color = 'yellow';
  rectangleStyle.textEffect.transparency = 0.5;
  rectangleStyle.textEffect.font = '20px Arial';
  rectangleStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
  rectangleStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
  rectangle.style(rectangleStyle);
  rectangle.text('This is a text!');

도형의 텍스트를 편집하려는 경우 해당 텍스트를 두 번 클릭합니다.

위 javascript 함수를 사용하여 도형을 추가하고 도형 서식을 지정하는 것 외에 개발자 라이선스와 함께 포함되어 연결된 Spread Designer를 사용할 수도 있습니다. 디자이너를 설치해야 하는 경우 문서를 참조하세요.

다음은 SpreadJS Designer에서 도형을 추가하거나 도형의 서식을 지정하는 방법에 대한 몇 가지 지침입니다.

"삽입" 탭에는 사용자가 추가할 수 있는 모든 도형이 표시된 "도형" 드롭다운이 있습니다.

도형을 삽입한 후에는 SpreadJS에서 사용자 정의할 수 있습니다. 마우스 오른쪽 버튼을 클릭한 후 "도형 서식"을 선택합니다.

디자이너에서 도형 서식을 클릭하면 시트 오른쪽에 패널이 표시되며 여기에서 도형을 사용자 정의할 수 있습니다. 도형에 색을 지정하고 해당 도형의 테두리 속성 집합, 기타 도형 크기, 정렬, 위치, 이동 등의 속성을 지정할 수 있습니다.

도형을 마우스 오른쪽 버튼으로 클릭한 다음 텍스트 편집을 선택하거나 도형 내부를 두 번 클릭하면 도형 내에 텍스트를 추가할 수 있습니다. SpreadJS에서 이 텍스트를 사용자 정의할 수 있습니다. 도형 서식 패널 내에 있는 텍스트 옵션을 사용하면 가능합니다. 텍스트, 글꼴 또는 정렬의 색을 지정할 수 있습니다. 아래 스크린샷은 사용자가 텍스트 속성을 변경하는 방법을 보여 줍니다.

도형 서식 패널은 연결선 도형에도 사용할 수 있습니다. 아래 두 개의 스크린샷은 연결선의 색, 종료 화살표 유형, 연결선의 폭 등을 어떻게 변경할 수 있는지 보여 줍니다.

도형의 향상된 기타 기능

그룹화

SpreadJS는 개별 도형을 도형 그룹으로 그룹화하는 작업을 지원합니다. 이 그룹 도형은 도형 그룹을 간편하고 빠르게 선택 및 편집하는 작업을 관리하는 데 사용됩니다.

var shape1 = sheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
var shape2 = sheet.shapes.addConnector("shape2", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 200, 50, 300, 200);
var shapes = [shape1, shape2];
var groupShape = sheet.shapes.group(shapes)
sheet.shapes.ungroup(groupShape);

위 코드를 사용하여 여러 도형을 그룹화하거나 그룹 해제할 수 있습니다. SpreadJS에서는 도형 정렬 옵션 또는 배포 옵션을 사용하거나 도형을 다른 도형 또는 그리드에 맞추는 등 손쉬운 방법으로 여러 도형의 위치를 미세하게 조정할 수 있습니다.

다음은 이렇게 하기 위한 코드입니다.

var commandManager = spread.commandManager();
commandManager.execute({
  cmd: 'moveShapesByHAlign', //moveShapesByVAlign, moveShapesByHDistribute, moveShapesByVDistribute
  sheetName: sheet.name(),
  shapeNames: ['rect1','line1'],
  alignment: GC.Spread.Sheets.Shapes.HorizontalAlign.left
});

하이퍼링크

SpreadJS에서는 도형, 연결선 도형 또는 그룹 도형에 하이퍼링크를 추가할 수 있습니다. 하이퍼링크는 웹 사이트 URL, 이메일 주소 또는 SpreadJS 시트/셀 참조일 수 있으며, 하이퍼링크를 사용하면 거의 모든 위치로 쉽게 이동할 수 있습니다.

  var myShape = sheet.shapes.add("shape", GC.Spread.Sheets.Shapes.AutoShapeType.myShape, 100, 50, 100, 150);
  myShape.hyperlink({url: "https://www.grapecity.com", target: 0, tooltip: 'goes to GrapeCity homepage'});

속성 수식

기본 제공 도형든 사용자 정의 도형든 수식을 사용하여 도형의 개별 속성을 변경할 수 있습니다.

var shape1 = sheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 50, 50, 50, 50);
shape1.setFormula('style.fill.color', '=Sheet1!B2');// fills the shape with the color stated in cell B2
shape1.getFormula('style.fill.color');// returns 'Sheet1!B2'

이 강력한 기능을 사용하면 데이터베이스 또는 다른 데이터 소스의 데이터를 사용하여 도형 속성을 동적으로 생성하여 javascript 응용 프로그램에 멋진 대화형 도형을 많이 적용할 수 있습니다.

도형 선택 창

Designer 컴포넌트를 사용하면 사용자는 시트에서 도형을 빠르게 선택하거나, 숨기거나 표시할 수 있는 새로운 도형 선택 창을 활용할 수 있습니다.

위 내용을 요약하면, SpreadJS 도형은 유연하고 모양을 변경하는 데 도움이 되며, 보고서 및 대시보드에 몇 가지 기능적이고 실용적인 응용 프로그램을 제공합니다. 세 가지 요점은 다음과 같습니다.

• 도형 레이어를 사용하면 멋진 모양의 대시보드를 빌드할 수 있습니다.

• 도형와 함께 하이퍼링크 기능을 사용하면 버튼 링크를 만들 수 있습니다.

• 수식 입력줄 내에서 동적 셀을 참조하여 동적 도형 내에서 콘텐츠 및 데이터를 만들 수 있습니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ