SpreadJS 示例
功能示例
更多功能
迷你图
兼容Excel函数迷你图

兼容Excel函数迷你图

你可以通过折线图函数，柱形图函数，或者盈亏图函数来创建各自的迷你图。

比如：=LINESPARKLINE(data, dataOrientation, dateAxisData?, dateAxisOrientation?, setting?), =COLUMNSPARKLINE(data, dataOrientation, dateAxisData?, dateAxisOrientation?, setting?), =WINLOSSSPARKLINE(data, dataOrientation, dateAxisData?, dateAxisOrientation?, setting?). 此函数有以下参数： data: 类型为引用，表示迷你图的所有数据，比如"A1:C3"。 dataOrientation:类型为数字，表示迷你图所引用数据的方向。值为以下其中之一： vertical（竖向）- 0 horizontal（横向） - 1 dateAxisData: （可选参数）类型为引用，表示迷你图的时间轴数据，比如"D1:F3"。 dateAxisOrientation: （可选参数）类型为数字，表示迷你图轴的方向，值为以下其中之一： vertical（竖向） - 0 horizontal（横向） - 1 setting: （可选参数）类型为JSON格式的字符串；内容保持与 GC.Spread.Sheets.Sparklines.SparklineSetting. 相同的定义. 创建sparklines之后，可以控制显示哪些值点(例如high、low、first、last或任何负值)、更改sparkline的类型(Line、Column或WinLoss)、应用样式，并控制是否显示水平轴。 通过使某些或所有标记可见，可以在sparkline行中突出显示单个数据标记(值)。 showFirst:对于这个sparkline组中的每个sparkline，第一个数据点的格式是否不同 showHigh:对于这个sparkline组中的每个sparkline，值最高的数据点的格式是否不同 showLast:对于这个sparkline组中的每个sparkline，最后一个数据点的格式是否不同 showLow:对于这个sparkline组中的每个sparkline，值最低的数据点的格式是否不同 showNegative:对于这个sparkline组中的每个sparkline，负数据点的格式是否不同 showmarker:是否为这个sparkline组中的每个sparkline显示数据标记 您可以使用以下方法更sparklines的样式和格式: axisColor:轴的颜色 firstMarkerColor: 此sparkline组中每个sparkline的第一个数据点的颜色 highMarkerColor: 此sparkline组中每个sparkline的最高数据点的颜色 lastMarkerColor: 此sparkline组中每个sparkline的最后一个数据点的颜色 lowMarkerColor: 此sparkline组中每个sparkline的最低数据点的颜色 markersColor: 此sparkline组中每个sparkline的数据标记的颜色 negativeColor: 这个sparkline组中每个sparkline的负数据点的颜色 seriesColor: 这个sparkline组中每个sparkline的颜色 Sparklines提供了额外的设置。例如，有时图表中的数据序列中有空值。您可以使用displayEmptyCellsAs选项来控制如何显示空单元格，如下面的示例所示: 下面的例子说明了如何应用这些设置:
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet></gc-worksheet> <gc-worksheet></gc-worksheet> <gc-worksheet></gc-worksheet> </gc-spread-sheets> </div> </template> <script setup> import { ref } from "vue"; import GC from "@grapecity-software/spread-sheets"; import '@grapecity-software/spread-sheets-vue'; import '@grapecity-software/spread-sheets-resources-zh'; GC.Spread.Common.CultureManager.culture("zh-cn"); const spreadRef = ref(null); let initSpread = function (spread) { spreadRef.value = spread; spread.options.allowDynamicArray = true; initSheet(spread.sheets[0]); initSheet1(spread.sheets[1]); initSheet2(spread.sheets[2]); } let initSheet = function (sheet) { sheet.name("Line Sparkline"); sheet.suspendPaint(); sheet.setArray(2, 1, data[0]); for (var i = 4; i < 14; i++) { sheet.setFormula(i - 1, 8, '=LINESPARKLINE(C' + i + ':H' + i + ',1,,,"{showMarkers:true}")'); sheet.setRowHeight(i - 1, 30); } //format sheet sheet.addSpan(0, 1, 1, 8); sheet.getCell(0, 1).value("Sales by Country").font("bold 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(); } let initSheet1 = function (sheet) { sheet.name("Column Sparkline"); sheet.suspendPaint(); sheet.setArray(2, 1, data[1]); 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(); } let initSheet2 = function (sheet) { sheet.name("Winloss Sparkline"); sheet.suspendPaint(); sheet.getCell(2, 1).text("Target (tasks per week):").font("14px Arial"); sheet.getCell(2, 2).value(5).font("bold 14px Arial"); sheet.setArray(4, 1, data[2]); for (var i = 6; i < 16; i++) { sheet.setFormula(i - 1, 8, '=WINLOSSSPARKLINE(C' + i + ':H' + i + '-$C$3,1,,,"{negativeColor:#ff0000,showNegative:true}")'); sheet.setRowHeight(i - 1, 30); } //format sheet sheet.addSpan(0, 1, 1, 8); sheet.getCell(0, 1).value("Employee Performance").font("15px Arial") .backColor("#DDDDDD"); sheet.setRowHeight(0, 45); sheet.getRange(4, 1, 1, 8) .font("bold 13px Arial") .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true }); sheet.setColumnWidth(1, 180); sheet.setColumnWidth(8, 120); sheet.getRange(0, 0, 15, 9).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.resumePaint(); } </script> <style scoped> #app { height: 100%; } .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; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/vue3/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="$DEMOROOT$/spread/source/data/standard-sparklines.js" type="text/javascript"></script> <script src="./systemjs.config.js"></script> <script src="https://cdn.grapecity.com.cn/online/resources/compiler-sfc.esm-browser.js" type="module" defer></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/zh/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/', 'cdn:': 'https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.2.0/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@grapecity-software/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.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", '@grapecity-software/spread-sheets': 'cdn:spread-sheets/index.js', '@grapecity-software/spread-sheets-resources-zh': 'cdn:spread-sheets-resources-zh/index.js', '@grapecity-software/spread-sheets-vue': 'cdn:spread-sheets-vue/index.js' }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);