カスケードスパークライン | 機能紹介 | SpreadJS（スプレッドJS）チュートリアルデモアプリケーション

数式にCascadeSparkline関数を使用することで、カスケードスパークラインを作成できます。構文は次のとおりです。=CASCADESPARKLINE(pointsRange, pointIndex, labelsRange?, minimum?, maximum?, colorPositive?, colorNegative?, vertical?) 有効なパラメータは次のとおりです。 pointsRange: 表示するすべての値を保持するセル範囲を表す参照。「B2:B8」など。 pointIndex: データ点に対応するインデックスを表す数値または参照。1以上の値となります。「1」、「D2」など。 labelsRange: （オプション）表示する全ラベルを保持するセル範囲を表す参照。「A2:A8」など。デフォルトでは、ラベルは表示されません。 minimum: （オプション）表示領域での最小値を表す数値または参照。「-2000」など。デフォルト値は、集計値（各データ点の値の集計）内の最小値となります。 maximum: （オプション）表示領域での最大値を表す数値または参照。「6000」など。デフォルト値は、集計値（各データ点の値の集計）内の最大値となります。 colorPositive: （オプション）最初または最後の正のスパークラインボックス（正の値であるデータ点を表すボックス）の色を表す文字列。デフォルト値は「#8CBF64」です。 colorNegative: （オプション）最初または最後の負のスパークラインボックス（負の値であるデータ点を表すボックス）の色を表す文字列。デフォルト値は「#D6604D」です。 vertical: （オプション）ボックスの向きを垂直方向にするか水平方向にするかを表すブール値。デフォルト値はfalseです。

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.addSpan(0, 0, 1, 5);
sheet.getCell(0, 0).value("Checkbook Register")
.font("20px Arial")
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center)
.backColor("purple")
.foreColor("white");
sheet.setArray(1, 0, [
["","Initial value",815.25, "\u03A3"],
["12/11/2012", "CVS", -20],
["12/12/2012", "Bank", 100.12],
["12/12/2012", "Starbucks", -5.43],
["12/12/2012", "Taco Bell", -7.03],
["12/13/2012", "From Work",	534.98],
["12/13/2012","From Savings", 1000],	
["12/15/2012", "Mexicali Restaurant",-22.35],
["12/17/2012", "Staples",-55.50],
["12/18/2012", "Cash", 165],	
["12/18/2012", "W&P", -58.60],
["12/18/2012", "Gas", -15.80],
["12/22/2012", "Bookstore", -65.00],
["12/23/2012", "Target", -120.65],
["1/1/2013", "Rent", -550.00],
["","Final value"]
]);
sheet.setColumnWidth(0, 80);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 80);
sheet.setColumnWidth(3, 80);
sheet.setColumnWidth(4, 340);
sheet.setRowHeight(0, 40);
sheet.getRange(2, 0, 14, 1).formatter("MM/dd/yyyy");
sheet.getRange(1, 2, 16, 1).formatter("#,###.00");
sheet.getRange(2, 3, 14, 1).formatter("#,###.00");
sheet.setFormula(2, 3, "=C3 + C2");
var r;
for (r = 4; r <= 16; r++) {
sheet.setFormula(r - 1, 3, "=C" + r + " + D" + (r - 1));
}
for(r = 1; r <=17; r++) {
sheet.setRowHeight(r, 24);
}
sheet.setFormula(16, 2, "=D16");
sheet.getCell(1, 3).hAlign(1);
sheet.getRange(1, 1, 1, 2).font("bold 14px Georgia");
sheet.getRange(16, 1, 1, 2).font("bold 14px Georgia");
sheet.getRange(1, 0, 1, 5).setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.thin), { bottom: true });
sheet.getRange(16, 0, 1, 5).setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.medium), { top: true });
for (var i = 1; i <= 16; i++) {
sheet.setFormula(i, 4, '=CASCADESPARKLINE($C$2:$C$17,ROW()-1,$B$2:$B$17,,,"#8CBF64","#D6604D",false)');
}
sheet.resumePaint();
}
function initVerticalSparkline(sheet, name) {
sheet.suspendPaint();
sheet.name(name);
sheet.setRowHeight(0, 50);
sheet.addSpan(0, 0, 1, 6);
sheet.getCell(0, 0).value("Checkbook Register")
.font("20px Arial")
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center)
.backColor("purple")
.foreColor("white");
sheet.setRowHeight(3, 200);
sheet.setArray(1, 0, [
["Initial", "Tips", "Car", "Foods", "Saving", "Final"],
[345, 400, -115.2, -87.34, -100]
]);
sheet.setFormula(2, 5, "=Sum(A3:E3)");
sheet.getRange(2, 0, 1, 6).formatter(".00");
for (var c = 0; c < 6; c++) {
sheet.setColumnWidth(c, 100);
sheet.setFormula(3, c, '=CASCADESPARKLINE($A$3:$F$3,COLUMN(),$A$2:$F$2,,,"#8CBF64","#D6604D",true)');
}
sheet.getRange(1, 0, 2, 1).font("bold 14px Georgia");
sheet.getRange(1, 5, 2, 1).font("bold 14px Georgia");
sheet.getRange(1, 0, 3, 1).setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.thin), { right: true });
sheet.getRange(1, 5, 3, 1).setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.medium), { left: true });
sheet.resumePaint();
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/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;
}