Demos
Features
Sparklines
Custom Sparkline

Custom Sparkline

SpreadJS allows users to create their own sparkline templates by implementing their own custom business logic, such as a customized clock for different time zones.

JavaScript
Angular
Vue
Vue3
React
Description
app.vue
index.html
styles.css
Copy to CodeMine

The SparklineEx class has two methods that help you customize your own sparkline:

  • createFunction: The function of SparklineEx. The sparkline formula will be defined by the function and it provides the data and settings for Sparkline.
  • paint: Renders the Sparkline with the data and settings from the sparkline formula.

After creating a customized sparkline type, you can use the addSparklineEx method to add your custom sparkline to SpreadJS. For example:

    function CustomSparkline(){
       GC.Spread.Sheets.Sparklines.SparklineEx.call(this);
    }
    CustomSparkline.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
    CustomSparkline.prototype.createFunction = function(){
       var func = new GC.Spread.CalcEngine.Functions.Function('CUSTOMSPARKLINE',1,255);
       func.evaluate = function(args){};
       func.acceptsReference = function(argIndex){};
       //...
       return func;
    }
    CustomSparkline.prototype.paint = function(context,value,x,y,width,height){
       //context - The canvas's 2d context.
       //value - The value evaluated by the custom function.
       //paint sparkline.
    };
    $(function(){
       var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
       spread.addSparklineEx(new CustomSparkline());
    });
The SparklineEx class has two methods that help you customize your own sparkline: createFunction: The function of SparklineEx. The sparkline formula will be defined by the function and it provides the data and settings for Sparkline. paint: Renders the Sparkline with the data and settings from the sparkline formula. After creating a customized sparkline type, you can use the addSparklineEx method to add your custom sparkline to SpreadJS. For example:
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> </div> </template> <script> import Vue from 'vue'; import '@mescius/spread-sheets-vue' import GC from '@mescius/spread-sheets'; import './styles.css'; class Clock extends GC.Spread.Sheets.Sparklines.SparklineEx { constructor() { super(); } createFunction() { let func = new GC.Spread.CalcEngine.Functions.Function("CLOCK", 1, 1); func.evaluate = function (args) { return args[0]; }; return func; } _drawCircle(context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.stroke(); } _drawCenter (context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.fill(); } _drawHand(context, centerX, centerY, loc, radius) { let 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(); } _drawHands (context, value, centerX, centerY, radius) { let 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); } _drawNumerals(context, centerX, centerY, radius) { let 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); }); } } paint(context, value, x, y, width, height) { if (!(value instanceof Date)) { return; } let 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(); } } let App = Vue.extend({ name: "app", data: function() { return { spread: null }; }, methods:{ initSpread(spread) { spread.suspendPaint(); spread.addSparklineEx(new Clock()); let sheet = spread.sheets[0]; let style = new GC.Spread.Sheets.Style(); style.hAlign = GC.Spread.Sheets.HorizontalAlign.center; style.vAlign = GC.Spread.Sheets.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() { let now = new Date(); let 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(); } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script>
<!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/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app" style="height: 100%;"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);