横向条状/竖向柱状函数迷你图

横向条状/竖向柱状函数迷你图可以用来显示数据的变化或范围。

你可以通过横向条状/竖向柱状函数创建一个横向条状/竖向柱状函数迷你图,比如:=HBARSPARKLINE(value, colorScheme?) 或者 =VBARSPARKLINE(value, colorScheme?). 此函数有以下参数: value: 类型为数字或者引用,表示这个条的长度,比如 0.3 或者 "A1"。如果这个值大于100% 或者小于 -100%,将会出现一个箭头。 colorScheme: (可选参数)类型为颜色字符串,表示条的填充色的字符串;默认值是 "gray"。 axisVisible: (可选参数) 类型为布尔值,表示轴是否可见,默认值为true。 barHeight: (可选参数) 类型为数值,表示相对于单元格高度的百分比线条高度。值需大于0且小于等于1. barWidth: (可选参数) 类型为数值,表示相对于单元格宽度的百分比线条宽度,值需大于0且小于等于1. HBarSparkline: 正值,条状图会从单元格的左边开始;负值,条状图会从单元格的右边开始。 VBarSparkline: 正值, 柱状图会从单元格的下边开始;负值,柱状图会从单元格的上边开始。
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); }; function initSpread(spread) { spread.options.newTabVisible = false; initHorizontalSparkline(spread.sheets[0], "Horizontal"); initVerticalSparkline(spread.sheets[1], "Vertical"); }; function initHorizontalSparkline(sheet, name) { sheet.suspendPaint(); sheet.name(name); sheet.setArray(1,0,[["Channel","Satisfaction %", "Diagram"], ["Email",0.92], ["Social Networks",0.79], ["Forums/Message Boards",0.65], ["Phone",0.58], ["Text Message",0.55], ["Online Chat",0.39], ["Self-Serve Knowledge Base",0.28], ["On-Page Support Widget",0.19]]); for (var i = 2; i < 10; i++) { sheet.setRowHeight(i, 30); sheet.setFormula(i, 2, this.getFormula("B"+(i+1))); } sheet.addSpan(0, 0, 1, 3); sheet.getCell(0, 0).value("Customer Service Satisfaction, by Channel").font("17px Arial").backColor("#E8E8E8").vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getRange(1, 0, 1, 3).font("bold 13px Arial").vAlign(GC.Spread.Sheets.VerticalAlign.center) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true }); sheet.getRange(2,1,8,1).formatter("0%").hAlign(GC.Spread.Sheets.HorizontalAlign.left); sheet.setRowHeight(0, 35); sheet.setRowHeight(1, 35); sheet.setColumnWidth(0, 250); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 250); sheet.resumePaint(); } function getFormula(range) { return "=LET(ref, "+range+", color, IF(ref >= 0.8, \"#092834\", IF(ref>=0.6, \"#347B98\", IF(ref >0.4, \"#66B032\", IF(ref >= 0.2, \"#B2D732\", IF(ref >= 0, \"#F0F7D4\", \"red\"))))), HBARSPARKLINE(ref, color))"; } function getVBarFormula(range) { return "=LET(ref, "+range+", color, IF(ref >= 0.8, \"#092834\", IF(ref>=0.6, \"#347B98\", IF(ref >0.4, \"#66B032\", IF(ref >= 0.2, \"#B2D732\", IF(ref >= 0, \"#F0F7D4\", \"red\"))))), VBARSPARKLINE(ref, color, true, 0.4))"; } function initVerticalSparkline(sheet, name) { sheet.suspendPaint(); sheet.name(name); sheet.setArray(1,0,[ ["Name","Employee 1","Employee 2","Employee 3","Employee 4","Employee 5","Employee 6","Employee 7","Employee 8"], ["Progress",1.1,0.79,0.59,0.55,0.37,0.19,0.35,0.60] ]); for (var i = 0; i < 8; i++) { var columnChar = String.fromCharCode(66 + i); sheet.setColumnWidth(i+1, 80); sheet.setFormula(3, i+1, this.getVBarFormula(columnChar + "3")); } sheet.addSpan(0, 0, 1, 9); sheet.getCell(0, 0).value("Sprint 3 Progress").font("17px Arial").backColor("#E8E8E8").vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getRange(1, 0, 2, 1).font("bold 13px Arial").vAlign(GC.Spread.Sheets.VerticalAlign.center) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(2,1,1,8).formatter("0%").hAlign(GC.Spread.Sheets.HorizontalAlign.left); sheet.setRowHeight(0, 35); sheet.setRowHeight(1, 35); sheet.setRowHeight(3, 220); sheet.setColumnWidth(0, 120); 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; }