你可以通过棒棒糖方差迷你图公式创建迷你图: =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%;
}