スプレッドスパークライン

スプレッドスパークラインを使用すると、さまざまな形式で値を比較できます。

数式に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; }