兼容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选项来控制如何显示空单元格,如下面的示例所示: 下面的例子说明了如何应用这些设置:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 }); spread.options.allowDynamicArray = true; initSheet(spread.sheets[0]); initSheet1(spread.sheets[1]); initSheet2(spread.sheets[2]); }; function initSheet(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(); }; function initSheet1(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(); }; function initSheet2(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,,,"{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(); };
<!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="$DEMOROOT$/spread/source/data/standard-sparklines.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; }