You can add hyperlink to shape, line or group shape, tooltip and hyperlink target also support.
You can add hyperlink to shape, line or group shape using the following code:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 5 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var sheet1 = spread.getSheet(0);
var sheet2 = spread.getSheet(1);
var sheet3 = spread.getSheet(2);
var sheet4 = spread.getSheet(3);
var sheet5 = spread.getSheet(4);
sheet1.fromJSON(shape_hyperlink_data_sheet1);
sheet2.fromJSON(shape_hyperlink_data_sheet2);
sheet3.fromJSON(shape_hyperlink_data_sheet3);
sheet4.fromJSON(shape_hyperlink_data_sheet4);
sheet5.fromJSON(shape_hyperlink_data_sheet5);
initSheet1(sheet1);
initSheet2(sheet2);
initSheet3(sheet3);
initSheet4(sheet4);
initSheet5(sheet5);
spread.resumePaint();
}
function initSheet1(sheet) {
window.rightArrow1 = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 133, 143, 35);
applyUsageShapeStyle(rightArrow1);
rightArrow1.hyperlink({ url: "sjs://'Sheet Location'!A1", target: 0, tooltip: "goes to 'Sheet Locaton'!A1" });
window.rightArrow2 = sheet.shapes.add("rightArrow2", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 193, 143, 35);
applyUsageShapeStyle(rightArrow2);
rightArrow2.hyperlink({ url: "sjs://'Email Address'!A1", target: 0, tooltip: "goes to 'Email Address'!A1" });
window.rightArrow3 = sheet.shapes.add("rightArrow3", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 254, 143, 35);
applyUsageShapeStyle(rightArrow3);
rightArrow3.hyperlink({ url: "sjs://'Access URL'!A1", target: 0, tooltip: "goes to 'Access URL'!A1" });
window.rightArrow4 = sheet.shapes.add("rightArrow4", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 314, 143, 35);
applyUsageShapeStyle(rightArrow4);
rightArrow4.hyperlink({ url: "sjs://'Custom Command'!A1", target: 0, tooltip: "goes to 'Custom Command'!A1" });
}
function initSheet2(sheet) {
backToFirstPage(sheet);
}
function initSheet3(sheet) {
backToFirstPage(sheet);
window.rect1 = sheet.shapes.add("rectangle1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 175, 327, 268, 35);
var email = 'JoneBarkley@example.com';
applyLinkageShapeStyle(rect1, email);
rect1.hyperlink({ url: email, target: 0 });
}
function initSheet4(sheet) {
backToFirstPage(sheet);
window.rect2 = sheet.shapes.add("rectangle2", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 209, 327, 268, 35);
applyLinkageShapeStyle(rect2, 'www.spreadjs.com');
rect2.hyperlink({ url: "http://developer.mescius.com", target: 0, tooltip: "goes to SpreadJS" });
}
function initSheet5(sheet) {
backToFirstPage(sheet);
window.rect3 = sheet.shapes.add("rectangle3", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 261, 188, 280, 140);
applyTimerShapeStyle(rect3, 'Click here to start a timer');
var stopWatch = new Stopwatch(rect3);
rect3.hyperlink({
command: function () {
if (!stopWatch.started) {
stopWatch.start();
} else {
stopWatch.stop();
}
}
});
}
function backToFirstPage(sheet) {
window.leftArrow = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 525, 410, 189, 35);
applyUsageShapeStyle(leftArrow, 'Back To First Page');
leftArrow.hyperlink({ url: "sjs://'Shape Hyperlink'!A1", target: 0, tooltip: "goes to 'Shape Hyperlink'!A1" });
}
function applyUsageShapeStyle(shape, text) {
shape.adjustments([0.38, 0.36, 0.52, 0.8]);
shape.text(text || 'Check Usage');
var style = shape.style();
style.fill.type = 0;
style.line.color = "rgb(11,116,77)";
style.textEffect.color = "rgb(11,116,77)";
style.textFrame.vAlign = 1;
shape.style(style);
}
function applyLinkageShapeStyle(shape, text) {
shape.text(text);
var style = shape.style();
style.fill.type = 0;
style.line.transparency = 1;
style.textEffect.color = "rgb(5,99,193)";
style.textFrame.vAlign = 1;
style.textEffect.font = "20px Calibri"
shape.style(style);
}
function applyTimerShapeStyle(shape, text) {
shape.text(text);
var style = shape.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"
shape.style(style);
}
var Stopwatch = function (shape) {
let interval, ms, sec, min, _started, startTime, endTime;
reset();
function reset() {
ms = 0;
sec = 0;
min = 0;
shape.text('Click here to start a timer\r\n00 : 00 : 000');
}
function start() {
this.started = _started = !_started;
startTime = new Date();
if (!interval) {
interval = setInterval(update, 10);
}
}
function stop() {
this.started = _started = !_started;
if (interval) {
clearInterval(interval);
interval = null;
var text = shape.text()
shape.text(text.replace('Click again to stop', 'Click to restart again'));
ms = 0;
sec = 0;
min = 0;
}
}
function update() {
endTime = new Date();
var s = endTime - startTime;
ms = s % 1000;
s = (s - ms) / 1000;
sec = s % 60;
s = (s - sec) / 60;
min = s % 60;
let milli = (Array(3).join('0') + ms).slice(-3);
let seconds = sec < 10 ? '0' + sec : sec;
let minute = min < 10 ? '0' + min : min;
let timer = minute + " : " + seconds + " : " + milli;
shape.text(timer + '\r\nClick again to stop');
}
this.start = start;
this.stop = stop;
this.started = _started;
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/shape-hyperlink-data.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 class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
