When exporting to Excel, you can export SparklineEx as an image by setting saveAsOption to true.
This feature is also supported by CustomSparkline.
Sample Code:
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById('spread-host'), { sheetCount: 2 });
document.querySelector('sjs-report-toolbar').attachSpread(spread);
initSpread(spread);
};
function initSpread(spread) {
initSheet(spread.getSheet(0));
initSheet1(spread.getSheet(1));
}
function initSheet(sheet) {
const data = [
['Salesperson', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Column Sparkline'],
['Courtney Graves', 76000, 68250, 72000, 99750, 45500, 120500],
['Crystal Cross', 118750, 89250, 121250, 92500, 60750, 122750],
['Jodi Hall', 75500, 56500, 65500, 62750, 77500, 51750],
['Andrew James', 76750, 108500, 88000, 55750, 106000, 75500],
['Riley Hudson', 104500, 49000, 50250, 46750, 76750, 53250],
['Andrew Rodriguez', 82500, 103000, 48750, 119750, 110500, 112250],
['Margaret Smith', 111500, 124250, 118250, 91500, 80750, 120250],
['Travis Manning', 47250, 73250, 105750, 58250, 79500, 56250],
['Mary Perkins', 66500, 54500, 121500, 53750, 53250, 61250],
['Randy Neal', 108750, 96250, 72250, 85500, 51750, 68250],
]
sheet.suspendPaint();
sheet.name("Column Sparkline");
sheet.setArray(2, 1, data);
for (var i = 4; i < 14; i++) {
sheet.setFormula(i - 1, 8, '=COLUMNSPARKLINE(C' + i + ':H' + i + ',1)');
sheet.setRowHeight(i - 1, 30);
}
//format sheet
sheet.addSpan(0, 1, 1, 8);
sheet.getCell(0, 1).value("Sales Data").font("15px Arial")
.backColor("#DDDDDD");
sheet.setRowHeight(0, 45);
sheet.getRange(2, 1, 1, 8)
.font("bold 13px Arial")
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true });
sheet.getRange(3, 2, 10, 6)
.formatter("$#,##0");
for (var j = 2; j < 8; j++) {
sheet.setColumnWidth(j, 80);
}
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(8, 150);
sheet.getRange(0, 0, 15, 9).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.resumePaint();
};
function initSheet1(sheet) {
sheet.suspendPaint();
sheet.name('Barcode');
_setData(sheet);
_setStyle(sheet);
var FORMULA = 'BC_CODE128';
for (var row = 3; row < 7; row++) {
sheet.setFormula(row, 3, '=' + FORMULA + '(C' + (row + 1) + ')');
sheet.setFormula(row, 4, '=' + FORMULA + '(C' + (row + 1) + ', , , false)');
sheet.setFormula(row, 5, '=' + FORMULA + '(C' + (row + 1) + ', , , true, "top", "B","Arial", "normal")');
}
sheet.resumePaint();
}
function _setData(sheet) {
sheet.getCell(1, 1).value('Service');
sheet.getCell(1, 2).value('Number');
sheet.getCell(1, 3).value('Code128');
sheet.getCell(2, 3).value('Fefault');
sheet.getCell(2, 4).value('Hidden Label');
sheet.getCell(2, 5).value('Custom Label Font');
var dataArray = [
['Police', 911],
['Telephone Directory Assistance', 411],
['Non-emergency Municipal Services', 311],
['Travel Info Call 511', 511]
];
sheet.setArray(3, 1, dataArray);
}
function _setStyle(sheet) {
for (var row = 3; row < 7; row++) {
sheet.setRowHeight(row, 80);
}
sheet.addSpan(1, 1, 2, 1)
sheet.addSpan(1, 2, 2, 1)
sheet.addSpan(1, 3, 1, 3)
sheet.setColumnWidth(0, 20);
sheet.setColumnWidth(1, 240);
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(3, 240);
sheet.setColumnWidth(4, 240);
sheet.setColumnWidth(5, 240);
sheet.getRange(1, 1, 2, 5)
.foreColor('#000')
.backColor('#FFF3CE')
.borderLeft(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), { outline: true })
.borderBottom(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), { outline: true });
sheet
.getRange(1, 1, 6, 5)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
}
<!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$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/sample/features/sparklines/export-sparkline-ex-to-image/toolbar.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.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">
<sjs-report-toolbar></sjs-report-toolbar>
<div id="spread-host"></div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
#spread-host {
width: 100%;
height: calc(100% - 56px);
overflow: hidden;
float: left;
}
