数式にLollipopVariSparkline関数を使用して、ロリポップスパークラインを作成できます。構文は次のとおりです。
=LOLLIPOPVARISPARKLINE(plannedValue, actualValue ,index ,absolute?,reference?, mini?, maxi?, tickunit?, legend?, colorPositive?, colorNegative?, lollipopHeaderColor?, vertical?)
有効なパラメータは次のとおりです。
plannedValue: 期待値の範囲を表す値または参照。全ての期待値の範囲を渡す必要があります。例：「B2:B8」、「{0;1;2;3;4;5;6}」など。
actualValue:実際の値の範囲を表す値または参照。全ての実際の値の範囲を渡す必要があります。例：「C2:C8」、「{0;1;2;3;4;5;6}」など。
index:期待値と実際の値のインデックスを表す値または参照。水平プロットの場合は行インデックス、垂直プロットの場合は列インデックスを示します。インデックスは0から始まります。
absolute: (オプション)絶対分散か相対分散かを指定するブール値。デフォルト値はfalseです。
reference: (オプション)参照線の位置を表す数値または参照。相対分散の場合のみ設定できます。例：0, A2。デフォルト値は0です。
mini: (オプション)スパークラインの最小値を表す数値または参照。相対分散の場合のみ設定できます。例：-5, A3。デフォルト値は-1です。
maxi: (オプション)スパークラインの最大値を表す数値または参照。相対分散の場合のみ設定できます。例：5, A4。デフォルト値は1です。
tickunit: (オプション)目盛単位を表す数値または参照。デフォルト値は0です。
legend: (オプション) 凡例テキストを表示するかどうかを表すブール値。デフォルト値はfalseです。
colorPositive: (オプション)値が基準値より大きいときにロリポップバーの塗りつぶしの色を表す文字列。デフォルト値は「green」です。
colorNegative: (オプション)値が基準値より小さいときにロリポップバーの塗りつぶしの色を表す文字列。デフォルト値は「red」です。
lollipopHeaderColor: (オプション)ロリポップスパークラインヘッダーの塗りつぶしの色を表す文字列。デフォルト値は「black」です。
vertical: (オプション)スパークラインを垂直に表示するかどうかを表すブール値。デフォルト値は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="ja-jp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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%;
}
