[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

도형에 하이퍼링크 추가

SpreadJS는 도형, 연결선 도형, 그룹 도형에 하이퍼링크를 추가하는 기능을 지원합니다. 이 기능은 JSON 및 Excel 입출력(I/O)에서도 지원됩니다.



하이퍼링크 추가

hyperlink 메서드를 사용하여 도형에 하이퍼링크를 추가할 수 있으며, 다음과 같은 설정이 포함된 객체 배열을 인수로 받습니다:

  • URL 위치 (string): 하이퍼링크의 URL을 지정합니다. 웹사이트, 셀 참조, 이메일 주소 등이 될 수 있습니다.

  • 툴팁 (string): 하이퍼링크에 마우스를 올렸을 때 표시될 메시지를 지정합니다.

  • Target (number): 링크를 클릭했을 때 연결된 문서가 어디에서 열릴지를 지정합니다. HyperlinkTargetType 열거형(enum)에서 값을 선택할 수 있으며, 기본값은 0으로 새 창 또는 탭에서 열립니다.

// 도형에 하이퍼링크 추가=
var circle = sheet.shapes.add("circle", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 40, 60, 100, 100);
circle.text("Visit Google");
circle.hyperlink({url: "http://www.google.com", tooltip: 'go to google'});

기존 도형에 하이퍼링크가 설정되어 있는 경우, 새로운 하이퍼링크를 설정하면 기존 하이퍼링크 데이터는 삭제되고 새 데이터로 대체됩니다.


함수나 명령 문자열을 하이퍼링크 데이터에 전달하여, 하이퍼링크 클릭 시 사용자 정의 동작을 수행하도록 만들 수도 있습니다. 아래 예제는 타이머 기능을 수행하는 사용자 정의 하이퍼링크를 추가합니다:



var rect3 = sheet.shapes.add("rectangle3", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 261, 188, 280, 140);
            
// 타이머 명령을 포함한 사용자 정의 하이퍼링크 생성
var stopWatch = new Stopwatch(rect3);   // Stopwatch()는 간단한 스톱워치 명령을 포함하는 사용자 정의 함수
rect3.hyperlink({
    command: function () {
        if (!stopWatch.started) {
            stopWatch.start();
        } else {
            stopWatch.stop();
        }
    }
});
rect3.text('Click here to start a timer');
var style = rect3.style();
style.fill.type = 0;
style.line.color = "rgb(11,116,77)";
style.textEffect.color = "rgb(11,116,77)";
style.textFrame.hAlign = 1;
style.textFrame.vAlign = 1;
style.textEffect.font = "22px Calibri"
rect3.style(style);

참고: JSON 입출력을 수행할 경우, command 속성에 함수를 전달하면 해당 함수는 저장되지 않습니다. 따라서 함수보다는 명령 문자열을 사용하는 것이 권장됩니다.

하이퍼링크 수정

인수를 전달하지 않고 hyperlink() 메서드를 호출하면, 도형에 설정된 기존 하이퍼링크 정보를 얻을 수 있습니다. 이를 통해 기존 하이퍼링크 객체를 수정한 뒤 다시 메서드에 전달하여 설정할 수 있습니다.

//기존 도형의 하이퍼링크 정보 가져오기
var circleLink = circle.hyperlink();            
circleLink.url = "www.google.co.in";
// 변경된 하이퍼링크 설정
circle.hyperlink(circleLink);

참고: 변경된 하이퍼링크 데이터를 다시 hyperlink() 메서드에 설정하지 않으면, 도형은 기존 데이터를 계속 사용합니다.

하이퍼링크 제거

hyperlink(null)을 호출하여 도형에서 하이퍼링크를 제거할 수 있습니다.

// 도형 하이퍼링크 제거
circle.hyperlink(null);

사용 시나리오

예를 들어, 분기별 매출 분석 보고서를 생성하는 경우를 생각해보겠습니다. 보고서에는 대시보드가 포함된 시트와 각 분기의 데이터가 포함된 개별 시트들이 존재합니다. 이때, 각 도형에 하이퍼링크를 설정하면 시트 간 빠르게 탐색할 수 있어 매우 편리합니다.



// Dashboard 시트에 각 분기를 나타내는 도형 추가
var Q1shape = sheetDashboard.shapes.add("Q1shape", GC.Spread.Sheets.Shapes.AutoShapeType.pentagon, 30, 60, 100, 100);
Q1shape.text("Quarter 1");
Q1shape.hyperlink({ url: "sjs://Sheet2!A1", tooltip: 'Go to Quarter 1' });

var Q2shape = sheetDashboard.shapes.add("Q2shape", GC.Spread.Sheets.Shapes.AutoShapeType.pentagon, 140, 60, 100, 100);
Q2shape.text("Quarter 2");
Q2shape.hyperlink({ url: "sjs://Sheet3!A1", tooltip: 'Go to Quarter 2' });

var Q3shape = sheetDashboard.shapes.add("Q3shape", GC.Spread.Sheets.Shapes.AutoShapeType.pentagon, 250, 60, 100, 100);
Q3shape.text("Quarter 3");
Q3shape.hyperlink({ url: "sjs://Sheet4!A1", tooltip: 'Go to Quarter 3' });

var Q4shape = sheetDashboard.shapes.add("Q4shape", GC.Spread.Sheets.Shapes.AutoShapeType.pentagon, 360, 60, 100, 100);
Q4shape.text("Quarter 4");
Q4shape.hyperlink({ url: "sjs://Sheet5!A1", tooltip: 'Go to Quarter 4' });

//이전 및 다음 버튼용 도형을 다른 시트에 추가
var BackToDashboardQ1 = sheet1.shapes.add("BackToDashboard", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle,210, 500, 164, 35);
BackToDashboardQ1.text("Dashboard");
BackToDashboardQ1.hyperlink({ url: 'sjs://Sheet1!A1', tooltip: ' Go to Dashboard' });
var RightArrowNextQ1 = sheet1.shapes.add("RightArrowNextQ1", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 400, 500, 164, 35);
RightArrowNextQ1.text("Q2");
RightArrowNextQ1.hyperlink({ url: 'sjs://Sheet3!A1', tooltip: 'Go Next Quarter - Q2' });

var LeftArrowPreviousQ2 = sheet2.shapes.add("LeftArrowPreviousQ2", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 20, 500, 164, 35);
LeftArrowPreviousQ2.text("Q1");
LeftArrowPreviousQ2.hyperlink({ url: 'sjs://Sheet2!A1', tooltip: 'Go to Previous Quarter Q1' });
var BackToDashboardQ2 = sheet2.shapes.add("BackToDashboard", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle,210, 500, 164, 35);
BackToDashboardQ2.text("Dashboard");
BackToDashboardQ2.hyperlink({ url: 'sjs://Sheet1!A1', tooltip: ' Go to Dashboard' });
var RightArrowNextQ2 = sheet2.shapes.add("RightArrowNextQ2", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 400, 500, 164, 35);
RightArrowNextQ2.text("Q3");
RightArrowNextQ2.hyperlink({ url: 'sjs://Sheet4!A1', tooltip: 'Go to Next Quarter - Q3' });

var LeftArrowPreviousQ3 = sheet3.shapes.add("LeftArrowPreviousQ3", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 20, 500, 164, 35);
LeftArrowPreviousQ3.text("Q2");
LeftArrowPreviousQ3.hyperlink({ url: 'sjs://Sheet3!A1', tooltip: 'Go to Previous Quarter Q2' });
var BackToDashboardQ3 = sheet3.shapes.add("BackToDashboard", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle,210, 500, 164, 35);
BackToDashboardQ3.text("Dashboard");
BackToDashboardQ3.hyperlink({ url: 'sjs://Sheet1!A1', tooltip: ' Go to Dashboard' });
var RightArrowNextQ3 = sheet3.shapes.add("RightArrowNextQ3", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 400, 500, 164, 35);
RightArrowNextQ3.text("Q4");
RightArrowNextQ3.hyperlink({ url: 'sjs://Sheet5!A1', tooltip: 'Go to Next Quarter - Q4' });

var LeftArrowPreviousQ4 = sheet4.shapes.add("LeftArrowPreviousQ4", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 20, 500, 164, 35);
LeftArrowPreviousQ4.text("Q3");
LeftArrowPreviousQ4.hyperlink({ url: 'sjs://Sheet4!A1', tooltip: 'Go to Previous Quarter Q3' });
var BackToDashboardQ4 = sheet4.shapes.add("BackToDashboard", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle,210, 500, 164, 35);
BackToDashboardQ4.text("Dashboard");
BackToDashboardQ4.hyperlink({ url: 'sjs://Sheet1!A1', tooltip: ' Go to Dashboard' });

SpreadJS 디자이너 사용하기

Spread 디자이너에서는 도형에 하이퍼링크를 추가할 수 있으며, '하이퍼링크(Hyperlink)' 대화상자를 통해 설정할 수 있습니다. 도형을 마우스 오른쪽 버튼으로 클릭한 후 컨텍스트 메뉴에서 '링크(Link)' 옵션을 선택하거나, 리본 메뉴의 '하이퍼링크(Hyperlink)' 버튼을 클릭하여 '하이퍼링크' 대화상자를 열 수 있습니다.

'하이퍼링크' 대화상자에서는 주소, 연결 대상(Target), 화면 설명(Screen Tip) 등의 옵션을 설정할 수 있습니다.



도형을 선택한 후 마우스 오른쪽 버튼을 클릭하면 표시되는 컨텍스트 메뉴에서 편집(Edit) 또는 제거(Remove) 옵션을 선택하여 도형의 하이퍼링크를 수정하거나 삭제할 수 있습니다.




또한 하이퍼링크가 포함된 도형을 오른쪽 클릭으로 선택한 후 이동 포인터를 사용해 이동하거나 크기를 조정할 수 있습니다.

Ask ChatGPT