棒棒糖方差迷你图

使用棒棒糖方差迷你图可以比较两组数据,计算值之间的相对或绝对方差,然后在棒棒糖方差迷你图中显示这些差异。

你可以通过棒棒糖方差迷你图公式创建迷你图: =LOLLIPOPVARISPARKLINE(plannedValue, actualValue ,index ,absolute?,reference?, mini?, maxi?, tickunit?, legend?, colorPositive?, colorNegative?, lollipopHeaderColor?, vertical?). 该函数具有以下参数: plannedValue: [number or reference] 表示预期数据集,您应该传入计划值区域的范围,例如“B2:B8”或“{0;1;2;3;4;5;6}”。 actualValue: [number or reference] 表示实际数据集,您应该传递实际值区域的范围,例如“C2:C8”或“{0;1;2;3;4;5;6}”。 index: [number or reference] 表示计划值和实际值的数据索引。对于水平图,这与行索引相关,对于垂直图,这与列索引相关。索引从0开始。 absolute: (optional) [boolean] 确定棒棒糖方差迷你图是显示绝对方差还是相对方差,默认值为false。 reference: (optional) [number or reference] 表示参考线的位置,仅在相对方差下有效,例如0或“A2”;默认值为0。 mini: (optional) [number or reference] 表示最小值限制,超过限制将显示三角形提示,仅在相对方差下有效,例如-5或“A3”;默认值为-1。 maxi: (optional) [number or reference] 表示最大值限制,超过限制将显示三角形提示,仅在相对方差下有效,例如5或“A4”;默认值为1。 tickunit: (optional) [number or reference] 表示刻度单位,例如1或“A6”;默认值为0。 legend: (optional) [boolean] 表示是否显示图例。默认值为false。 colorPositive: (optional) [string] 表示方差为正数时棒棒糖的棒棒颜色; 默认值是"green"(绿色). colorNegative: (optional) [string] 表示方差为负数时棒棒糖的棒棒颜色; 默认值是“red”(红色). lollipopHeaderColor: (optional) [string] 表示棒棒糖的头部填充颜色; 默认颜色是“black”(黑色). vertical: (optional) [boolean] 表示棒棒糖方差迷你图的方向是垂直还是水平;默认值为false。
window.onload = function () { var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); workbook.fromJSON(IncomeStatement); workbook.options.allowDynamicArray = true; initSpread(workbook); }; function initSpread(spread) { spread.suspendPaint(); initHorizontalSheet(spread); initVerticalSheet(spread); spread.resumePaint(); }; function initHorizontalSheet(spread) { let sheet = spread.getActiveSheet(); sheet.setFormula(1, 3, '=LOLLIPOPVARISPARKLINE($C$2:$C$13,$B$2:$B$13,SEQUENCE(12,1,0,1),true,0,,,0,true,"#a0ba25","#b46624","#ffa501")'); sheet.setFormula(1, 4, '=LOLLIPOPVARISPARKLINE($C$2:$C$13,$B$2:$B$13,SEQUENCE(12,1,0,1),false,0,,,0,true,"#a0ba25","#b46624","black")'); } function initVerticalSheet(spread) { let sheet2 = spread.getSheet(1); sheet2.setFormula(4, 1, '=LOLLIPOPVARISPARKLINE($B$2:$I$2,$B$3:$I$3,SEQUENCE(1,8,0,1),false,0,-0.3,0.3,1000,true,"#c0c0c0","#c0c0c0","#ffa501",true)'); sheet2.setFormula(3, 1, '=LOLLIPOPVARISPARKLINE($B$2:$I$2,$B$3:$I$3,SEQUENCE(1,8,0,1),true,0,,,1000,true,"#c0c0c0","#c0c0c0","#ffa501",true)'); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <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$/spread/source/data/PlannedAndActualIncomeStatement.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="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; } .sample-spreadsheets { height: 100%; width: 100%; }