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

数式にBulletSparkline関数を使用することで、ブレットスパークラインを作成できます。構文は次のとおりです。=BULLETSPARKLINE(measure, target, maxi, good?, bad?, forecast?, tickunit?, colorScheme?, vertical?) 有効なパラメータは次のとおりです。 measure: 計測バーの長さを表す数値または参照。「5」、「A1」など。 target: 目標線の位置を表す数値または参照。「7」、「A2」など。 maxi: スパークラインの最大値を表す数値または参照。「10」、「A3」など。 good: （オプション）「良好」領域の長さを表す数値または参照。「3」、「A4」など。デフォルト値は0です。 bad: （オプション）「不十分」領域の長さを表す数値または参照。「1」、「A5」など。デフォルト値は0です。 forecast: （オプション）予測線の長さを表す数値または参照。「8」、「A6」など。デフォルト値は0です。 tickunit: （オプション）目盛単位を表す数値または参照。「1」、「A7」など。デフォルト値は0です。 colorScheme: （オプション）スパークラインを表示するための一群の色を生成する配色パターンを表す文字列。デフォルト値は「#A0A0A0」です。 vertical: （オプション）スパークラインを垂直に表示するかどうかを表すブール値。デフォルト値はfalseです。 measureColor：（オプション）計測バーの色を表す文字列。 targetColor：（オプション）目標線の色を表す文字列。 maxiColor：（オプション）最大領域の色を表す文字列。 goodColor：（オプション）「良好」領域の色を表す文字列。 badColor：（オプション）「不十分」領域の色を表す文字列。 forecastColor：（オプション）予測線の色を表す文字列。 allowMeasureOverMaxi：（オプション）計測バーが最大を超える可能性があるかどうかを表すブール。デフォルト値はfalseです。 barSize：（オプション）セルの幅または高さに応じてバーの幅または高さをパーセンテージで表す数値。0から1までの範囲内である必要があります。

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, 4);
sheet.getCell(0, 0).value("Employee KPI").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setValue(1, 0, "Name");
sheet.setValue(1, 1, "Forecast");
sheet.setValue(1, 2, "Actuality");
sheet.setValue(1, 3, "Diagram");
sheet.getRange(1, 0, 1, 4).foreColor("white").backColor("Accent 4").hAlign(1).vAlign(1);
sheet.setValue(2, 0, "Employee 1");
sheet.setValue(2, 1, 6);
sheet.setValue(2, 2, 6);
sheet.setValue(3, 0, "Employee 2");
sheet.setValue(3, 1, 8);
sheet.setValue(3, 2, 7);
sheet.setValue(4, 0, "Employee 3");
sheet.setValue(4, 1, 6);
sheet.setValue(4, 2, 4);
sheet.setValue(5, 0, "Employee 4");
sheet.setValue(5, 1, 7);
sheet.setValue(5, 2, 9);
sheet.setValue(6, 0, "Employee 5");
sheet.setValue(6, 1, 6);
sheet.setValue(6, 2, 8);
sheet.setValue(7, 0, "Employee 6");
sheet.setValue(7, 1, 8);
sheet.setValue(7, 2, 7);
sheet.setValue(8, 0, "Settings:");
sheet.setValue(9, 0, "target");
sheet.setValue(9, 1, 7);
sheet.setValue(10, 0, "maxi");
sheet.setValue(10, 1, 10);
sheet.setValue(11, 0, "good");
sheet.setValue(11, 1, 8);
sheet.setValue(12, 0, "bad");
sheet.setValue(12, 1, 5);
sheet.setValue(13, 0, "color scheme");
sheet.setValue(13, 1, "gray");
sheet.setValue(14, 0, "measure color");
sheet.setValue(14, 1, "#FFC0CB");
sheet.setValue(15, 0, "target color");
sheet.setValue(15, 1, "#FF4500");
sheet.setValue(16, 0, "maxi color");
sheet.setValue(16, 1, "#00FFFF");
sheet.setValue(17, 0, "good color");
sheet.setValue(17, 1, "#7FFF00");
sheet.setValue(18, 0, "bad color");
sheet.setValue(18, 1, "	#FF0000");
sheet.setValue(19, 0, "forecast color");
sheet.setValue(19, 1, "#000080");
sheet.setValue(20, 0, "allow measure over maxi");
sheet.setValue(20, 1, true);
sheet.setValue(21, 0, "bar size");
sheet.setValue(21, 1, 0.8);
for (var index = 2; index < 8; index++) {
sheet.setFormula(index, 3, '=BULLETSPARKLINE($C' + (index + 1) + ',$B$10,$B$11,$B$12,$B$13,$B' + (index + 1)
+ ',1,$B$14,false,$B$15,$B$16,$B$17,$B$18,$B$19,$B$20,$B$21,$B$22)');
}
sheet.setRowHeight(0, 30);
for (var i = 2; i < 8; i++) {
sheet.setRowHeight(i, 40);
}
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(3, 200);
sheet.resumePaint();
}
function initVerticalSparkline(sheet, name) {
sheet.suspendPaint();
sheet.name(name);
sheet.addSpan(0, 0, 1, 7);
sheet.getCell(0, 0).value("Employee KPI").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setArray(1, 0, [
[ "Name", "Employee 1", "Employee 2", "Employee 3", "Employee 4", "Employee 5", "Employee 6" ],
[ "Forecast", 6, 8, 8, 7, 6, 8 ],
["Actuality", 6, 7, 4, 9, 8, 7],
["Diagram"]
]);
sheet.getRange(1, 0, 4, 1).foreColor("white").backColor("Accent 4").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setValue(8, 0, "Settings:");
sheet.setValue(9, 0, "target");
sheet.setValue(9, 1, 7);
sheet.setValue(10, 0, "maxi");
sheet.setValue(10, 1, 10);
sheet.setValue(11, 0, "good");
sheet.setValue(11, 1, 8);
sheet.setValue(12, 0, "bad");
sheet.setValue(12, 1, 5);
sheet.setValue(13, 0, "color scheme");
sheet.setValue(13, 1, "red");
sheet.setValue(14, 0, "measure color");
sheet.setValue(14, 1, "#FFC0CB");
sheet.setValue(15, 0, "target color");
sheet.setValue(15, 1, "#FF4500");
sheet.setValue(16, 0, "maxi color");
sheet.setValue(16, 1, "#00FFFF");
sheet.setValue(17, 0, "good color");
sheet.setValue(17, 1, "#7FFF00");
sheet.setValue(18, 0, "bad color");
sheet.setValue(18, 1, "	#FF0000");
sheet.setValue(19, 0, "forecast color");
sheet.setValue(19, 1, "#000080");
sheet.setValue(20, 0, "allow measure over maxi");
sheet.setValue(20, 1, true);
sheet.setValue(21, 0, "bar size");
sheet.setValue(21, 1, 0.8);
for (var index = 1; index < 7; index++) {
var letter = String.fromCharCode(65 + index);
sheet.setFormula(4, index, '=BULLETSPARKLINE(' + letter + '$4,$B$10,$B$11,$B$12,$B$13,' + letter
+ '$3,1,$B$14,true,$B$15,$B$16,$B$17,$B$18,$B$19,$B$20,$B$21,$B$22)');    
}
sheet.setRowHeight(0, 30);
sheet.setColumnWidth(0, 100);
for (var i = 1; i < 7; i++) {
sheet.setColumnWidth(i, 80);
}
sheet.setRowHeight(4, 120);
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;
}