カスタムスパークライン

スパークラインをカスタマイズできます。このサンプルでは、スパークラインを作成して特別なビジネスロジックを実装する方法を示します。

SparklineExタイプで、次の2つのメソッドを公開します。これらのメソッドは、スパークラインを独自にカスタマイズするために有効です。 createFunction: SparklineExのデータと設定を提供するカスタム関数を作成します。 paint: 数式からデータと設定を参照してスパークラインを描きます。 カスタマイズしたスパークラインタイプを作成した後は、addSparklineExメソッドを使用して、カスタムスパークラインをSpreadに追加できます。次に、例を示します。
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, "Tokyo"); 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() + 1)));//+9 sheet.setValue(3, 2, new Date(utcNow.setHours(utcNow.getHours() - 14)));//-5 } setInterval(updateTime, 1000); updateTime(); spread.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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; }