兼容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")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.sheets[0]; sheet.suspendPaint(); sheet.addSpan(0, 0, 1, 5); sheet.getCell(0, 0).value("The company revenue in 2014").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); var table1 = sheet.tables.add("table1", 1, 0, 13, 5, spreadNS.Tables.TableThemes.medium4); table1.rowFilter().filterButtonVisible(false); sheet.setValue(1, 0, "Month"); sheet.setValue(1, 1, "Revenue"); sheet.setValue(1, 2, "Diagram 1"); sheet.setValue(1, 3, "Diagram 2"); sheet.setValue(1, 4, "Diagram 3"); for (var i = 2; i < 14; i++) { sheet.setValue(i, 0, new Date(2014, i - 1, 1)); } sheet.setFormatter(-1, 0, "mm/dd/yyyy"); sheet.setValue(2, 1, 10); sheet.setValue(3, 1, 20); sheet.setValue(4, 1, 50); sheet.setValue(5, 1, 100); sheet.setValue(6, 1, 30); sheet.setValue(7, 1, - 10); sheet.setValue(8, 1, -25); sheet.setValue(9, 1, 60); sheet.setValue(10, 1, 50); sheet.setValue(11, 1, 30); sheet.setValue(12, 1, 80); sheet.setValue(13, 1, 88); sheet.addSpan(2, 2, 12, 1); sheet.setFormula(2, 2, '=LINESPARKLINE(B3:B14,0,A3:A14,0,"{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}")'); sheet.addSpan(2, 3, 12, 1); sheet.setFormula(2, 3, '=COLUMNSPARKLINE(B3:B14,0,A3:A14,0,"{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}")'); sheet.addSpan(2, 4, 12, 1); sheet.setFormula(2, 4, '=WINLOSSSPARKLINE(B3:B14,0,A3:A14,0)'); sheet.setRowHeight(0, 50); for (var i = 1; i < 14; i++) { sheet.setRowHeight(i, 15); } sheet.setColumnWidth(0, 80); sheet.setColumnWidth(2, 200); sheet.setColumnWidth(3, 200); sheet.setColumnWidth(4, 200); 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/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/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="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; }