概述
本 Demo 展示了如何创建自定义迷你图函数。通过继承 SparklineEx 类并实现 createFunction 和 paint 方法，创建了一个时钟迷你图，可以显示不同时区的实时时钟。
实现思路
创建 Clock 类继承自 SparklineEx，实现自定义迷你图类型
实现 createFunction 方法，定义名为 CLOCK 的自定义函数，接收时间参数
实现 paint 方法，使用 Canvas API 绘制时钟表盘、指针和数字
使用 addSparklineEx 方法注册自定义迷你图到 Workbook
在工作表中使用 =CLOCK() 公式调用自定义迷你图
通过定时器实时更新时间数据，实现动态时钟效果
代码解析
创建自定义迷你图类
这段代码创建了一个继承自 SparklineEx 的 Clock 类。SparklineEx 是所有迷你图类型的基类，自定义迷你图需要继承此类。
实现 createFunction 方法
createFunction 方法返回一个自定义函数对象。这里创建了名为 CLOCK 的函数，接受 1 个参数，evaluate 方法直接返回传入的参数值（日期对象）。
实现 paint 方法绘制时钟
paint 方法是绘制迷你图的核心。参数 context 是 Canvas 的 2D 上下文，value 是 createFunction 返回的值，x、y、width、height 定义了单元格的绘制区域。该方法检查 value 是否为 Date 对象，然后绘制时钟的圆形表盘、指针和数字。
注册自定义迷你图
使用 addSparklineEx 方法将自定义迷你图注册到 Workbook，之后可以在公式中使用 CLOCK 函数。
在工作表中使用自定义迷你图
通过 setFormula 方法在单元格中设置公式，调用 CLOCK 函数并传入时间单元格引用，迷你图会在单元格中渲染时钟图形。
运行效果
表格显示三个城市的时钟：北京（东八区）、伦敦（零时区）、纽约（西五区）
每个时钟单元格中显示一个完整的模拟时钟，包含表盘、时针、分针、秒针和数字
时钟每秒自动更新，实时显示当前时间
秒针显示为红色，时针和分针显示为黑色
API 参考
SparklineEx.createFunction()
创建自定义函数，用于为 SparklineEx 提供数据和设置。返回值为 Function 对象。
SparklineEx.paint()
context: CanvasRenderingContext2D - 画布的二维上下文
value: any - 由自定义函数计算的值
x: number - 相对于画布的 x 坐标
y: number - 相对于画布的 y 坐标
width: number - 单元格的宽度
height: number - 单元格的高度
Workbook.addSparklineEx()
sparklineEx: SparklineEx - 要添加的自定义迷你图实例
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
spread.suspendPaint();
function Clock() {
spreadNS.Sparklines.SparklineEx.call(this);
}
Clock.prototype = new spreadNS.Sparklines.SparklineEx();
Clock.prototype.createFunction = function () {
var func = new GC.Spread.CalcEngine.Functions.Function("CLOCK", 1, 1);
func.evaluate = function (args) {
return args[0];
};
return func;
};
Clock.prototype._drawCircle = function (context, centerX, centerY, radius) {
context.beginPath();
context.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
context.stroke();
};
Clock.prototype._drawCenter = function (context, centerX, centerY, radius) {
context.beginPath();
context.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
context.fill();
};
Clock.prototype._drawHand = function (context, centerX, centerY, loc, radius) {
var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;
context.beginPath();
context.moveTo(centerX, centerY);
context.lineTo(centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius);
context.stroke();
};
Clock.prototype._drawHands = function (context, value, centerX, centerY, radius) {
var date = value, hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour;
this._drawHand(context, centerX, centerY, hour * 5 + (date.getMinutes() / 60) * 5, radius / 2);
this._drawHand(context, centerX, centerY, date.getMinutes(), radius * 3 / 4);
context.strokeStyle = "red";
this._drawHand(context, centerX, centerY, date.getSeconds(), radius * 3 / 4);
};
Clock.prototype._drawNumerals = function (context, centerX, centerY, radius) {
var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
angle,
numeralWidth;
if (radius > 0) {
numerals.forEach(function (numeral) {
angle = Math.PI / 6 * (numeral - 3);
numeralWidth = context.measureText(numeral).width;
context.beginPath();
context.fillText(numeral, centerX + Math.cos(angle) * radius + numeralWidth / 2, centerY + Math.sin(angle) * radius + numeralWidth / 2);
});
}
};
Clock.prototype.paint = function (context, value, x, y, width, height) {
if (!(value instanceof Date)) {
return;
}
var centerX = x + width / 2,
centerY = y + height / 2,
margin = 10,
padding = 10,
radius = Math.min(width, height) / 2 - margin;
if (radius <= 0) {
return;
}
context.save();
//draw circle
this._drawCircle(context, centerX, centerY, radius);
//draw center
this._drawCenter(context, centerX, centerY, 3);
//draw hands
this._drawHands(context, value, centerX, centerY, radius);
//draw numerals
this._drawNumerals(context, centerX, centerY, radius - padding);
context.restore();
};
spread.addSparklineEx(new Clock());
var sheet = spread.sheets[0];
var style = new spreadNS.Style();
style.hAlign = spreadNS.HorizontalAlign.center;
style.vAlign = spreadNS.VerticalAlign.center;
sheet.setDefaultStyle(style);
sheet.getCell(0, 1).value("Universal Time").font("20px Arial");
sheet.setValue(1, 0, "Beijing");
sheet.setValue(1, 1, "London");
sheet.setValue(1, 2, "New York");
sheet.setFormula(2, 0, '=CLOCK(A4)');
sheet.setFormula(2, 1, '=CLOCK(B4)');
sheet.setFormula(2, 2, '=CLOCK(C4)');
sheet.getRange(3, -1, 1, -1).formatter("hh:mm:ss tt");
sheet.setRowHeight(0, 50);
sheet.setRowHeight(2, 200);
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(1, 200);
sheet.setColumnWidth(2, 200);
function updateTime() {
var now = new Date();
var utcNow = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(), now.getUTCMilliseconds());
sheet.setValue(3, 0, new Date(utcNow.setHours(utcNow.getHours() + 8)));//+8
sheet.setValue(3, 1, new Date(utcNow.setHours(utcNow.getHours() - 8)));//0
sheet.setValue(3, 2, new Date(utcNow.setHours(utcNow.getHours() - 5)));//-4
}
setInterval(updateTime, 1000);
updateTime();
spread.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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 class="sample-tutorial">
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
