数式にSpreadSparkline関数を使用することで、スプレッドスパークラインを作成できます。構文は次のとおりです。
=SPREADSPARKLINE(points, showAverage?, scaleStart?, scaleEnd?, style?, colorScheme?, vertical?)
有効なパラメータは次のとおりです。
points:
表示するすべての値を保持するセル範囲を表す参照。「A1:A10」など。
showAverage:（オプション）
平均値を表示するかどうかを表すブール値。デフォルト値はfalseです。
scaleStart:（オプション）
スパークラインの下限を表す数値または参照。デフォルト値は、すべての値の最小値です。
scaleEnd:（オプション）
パークラインの上限を表す数値または参照。デフォルト値は、すべての値の最大値です。
style:（オプション）
スプレッドスパークラインのスタイルを表す数値参照。次のいずれかです。
1: Stacked - 中央から2方向に向かって直線を描画
2: Spread - 中央から2方向へドットを描画
3: Jitter - ランダムな位置にドットを描画
4: Poles（既定値）- 一方向から他方向に向かって直線を描画
5: StackedDots - 一方向から他方向に向かってドットを描画
6: Stripe - 同じ長さの直線を描画
colorScheme:（オプション）
スパークラインのボックスの色を表す文字列。デフォルト値は「#646464」です。
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) {
var c, r;
sheet.suspendPaint();
sheet.name(name);
sheet.getCell(0, 0).value("Student Grade Statistics").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setArray(1, 0, [["Name", "Chinese", "Math", "English", "Physics", "Chemistry", "Total"]]);
sheet.setColumnWidth(0, 80);
for (c = 1; c <= 6; c++) {
sheet.setColumnWidth(c, 120);
}
sheet.setRowHeight(0, 40);
sheet.setRowHeight(3, 40);
sheet.setArray(2, 1, [["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)", "Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]);
sheet.setArray(4, 0, [
["Student 1", 70, 90, 51, 107, 48],
["Student 2", 99, 59, 63, 100, 61],
["Student 3", 89, 128, 74, 156, 70],
["Student 4", 93, 61, 53, 132, 73],
["Student 5", 106, 82, 80, 152, 88],
["Student 6", 108, 124, 90, 174, 91],
["Student 7", 112, 100, 75, 156, 92],
["Student 8", 78, 111, 84, 161, 88],
["Student 9", 116, 116, 99, 165, 90],
["Student 10", 119, 114, 92, 182, 91],
["Student 11", 121, 99, 93, 161, 82],
["Student 12", 112, 93, 95, 74, 65],
["Student 13", 55, 66, 105, 97, 113],
["Student 14", 104, 51, 118, 56, 79],
["Student 15", 77, 81, 99, 51, 75],
["Student 16", 70, 91, 120, 120, 85],
["Student 17", 113, 56, 153, 106, 97],
["Student 18", 77, 58, 141, 88, 112],
["Student 19", 84, 78, 160, 122, 108],
["Student 20", 109, 103, 106, 49, 108],
["Student 21", 55, 118, 111, 64, 61],
["Student 22", 75, 86, 110, 92, 67],
["Student 23", 66, 67, 99, 114, 77],
["Student 24", 123, 88, 124, 124, 81],
["Student 25", 90, 84, 154, 68, 119],
["Student 26", 124, 95, 101, 68, 90],
["Student 27", 91, 79, 116, 56, 75],
["Student 28", 119, 120, 134, 89, 66],
["Student 29", 116, 123, 174, 65, 90],
["Student 30", 61, 73, 171, 90, 109],
["Student 31", 66, 73, 106, 92, 62],
["Student 32", 95, 59, 167, 69, 62],
["Student 33", 104, 79, 166, 46, 100],
["Student 34", 111, 46, 168, 84, 82],
["Student 35", 47, 48, 160, 102, 90],
["Student 36", 92, 85, 134, 103, 102],
["Student 37", 95, 99, 136, 83, 69],
["Student 38", 62, 67, 148, 119, 105],
["Student 39", 105, 48, 110, 71, 86],
["Student 40", 81, 52, 172, 89, 103]
]);
for (var i = 0; i < 40; i++) {
r = 4 + i;
sheet.setFormula(r - 1, 6, "=Sum(B" + r + ":F" + r + ")");
}
for (c = 1; c <= 6; c++) {
var columnChar = String.fromCharCode(65 + c);
var styleType = c;
sheet.setFormula(3, c, "=SPREADSPARKLINE(" + columnChar + "5:" + columnChar + "44,TRUE,,,"+ styleType + ",\"green\")");
}
sheet.addColumns(6, 1);
sheet.addColumns(5, 1);
sheet.addColumns(4, 1);
sheet.addColumns(3, 1);
sheet.addColumns(2, 1);
sheet.addColumns(1, 1);
sheet.addSpan(0, 0, 1, 13);
sheet.getRange(1, 0, 1, 13).foreColor("white").backColor("Accent 4").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
for (c = 1; c < 12; c += 2) {
sheet.setColumnWidth(c, 15);
}
sheet.resumePaint();
}
function initVerticalSparkline(sheet, name) {
sheet.suspendPaint();
sheet.name(name);
sheet.getCell(0, 0).value("Student Grade Statistics").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.addSpan(0, 0, 1, 3);
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 130);
sheet.setColumnWidth(2, 120);
sheet.setRowHeight(3, 100);
sheet.setRowHeight(6, 100);
sheet.setArray(1, 0, [["Chinese", "Math", "English"]]);
sheet.setArray(2, 0, [["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)"]]);
sheet.setFormula(3, 0, '=SPREADSPARKLINE(Horizontal!C4:C43,TRUE,,,1,"green",TRUE)');
sheet.setFormula(3, 1, '=SPREADSPARKLINE(Horizontal!E4:E43,TRUE,,,2,"green",TRUE)');
sheet.setFormula(3, 2, '=SPREADSPARKLINE(Horizontal!G4:G43,TRUE,,,3,"green",TRUE)');
sheet.setArray(4, 0, [["Physics", "Chemistry", "Total"]]);
sheet.setArray(5, 0, [["Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]);
sheet.setFormula(6, 0, '=SPREADSPARKLINE(Horizontal!I4:I43,TRUE,,,4,"green",TRUE)');
sheet.setFormula(6, 1, '=SPREADSPARKLINE(Horizontal!K4:K43,TRUE,,,5,"green",TRUE)');
sheet.setFormula(6, 2, '=SPREADSPARKLINE(Horizontal!M4:M43,TRUE,,,6,"green",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;
}
