[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

ブレットスパークライン

BulletSparkline の数式とセル値を使用して、ブレットスパークラインを作成できます。


ブレットスパークラインの数式には、次のオプションを使用できます。

オプション

説明

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

「maxi」領域の色を表す色文字列。

goodColor

「良好」領域の色を表す色文字列。

badColor

「不十分」領域の色を表す色文字列。

forecastColor

予測線の色を表す色文字列。

allowMeasureOverMaxi

measureが「maxi」領域を超えることができるかどうかを表すブール値。デフォルト値はfalseです。

barSize

セルの幅または高さに応じてバーの幅または高さをパーセンテージで表す数値。0から1までの範囲内である必要があります。

ブレットスパークラインの数式には、次の書式を使用します。

=BULLETSPARKLINE (measure, target, maxi, good, bad, forecast, tickUnit, colorScheme, vertical, measureColor, targetColor, maxiColor, goodColor, badColor, forecastColor, allowMeasureOverMaxi, barSize)

コードの使用

次のサンプルコードは、ブレットスパークラインを作成します。

// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// アクティブシートを取得します。
var activeSheet = spread.getSheet(0);
activeSheet.addSpan(0, 0, 1, 4);
activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Employee KPI").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var table1 = activeSheet.tables.add("table1", 1, 0, 7, 4, GC.Spread.Sheets.Tables.TableThemes.light12);
table1.filterButtonVisible(false);
activeSheet.setValue(1, 0, "Name");
activeSheet.setValue(1, 1, "Forecast");
activeSheet.setValue(1, 2, "Actuality");
activeSheet.setValue(1, 3, "Diagram");
activeSheet.setValue(2, 0, "Employee 1");
activeSheet.setValue(2, 1, 6);
activeSheet.setValue(2, 2, 6);
activeSheet.setValue(3, 0, "Employee 2");
activeSheet.setValue(3, 1, 8);
activeSheet.setValue(3, 2, 7);
activeSheet.setValue(4, 0, "Employee 3");
activeSheet.setValue(4, 1, 6);
activeSheet.setValue(4, 2, 4);
activeSheet.setValue(5, 0, "Employee 4");
activeSheet.setValue(5, 1, 7);
activeSheet.setValue(5, 2, 9);
activeSheet.setValue(6, 0, "Employee 5");
activeSheet.setValue(6, 1, 6);
activeSheet.setValue(6, 2, 8);
activeSheet.setValue(7, 0, "Employee 6");
activeSheet.setValue(7, 1, 8);
activeSheet.setValue(7, 2, 7);

activeSheet.setValue(8, 0, "Settings:");
activeSheet.setValue(9, 0, "target");
activeSheet.setValue(9, 1, 7);
activeSheet.setValue(10, 0, "maxi");
activeSheet.setValue(10, 1, 10);
activeSheet.setValue(11, 0, "good");
activeSheet.setValue(11, 1, 8);
activeSheet.setValue(12, 0, "bad");
activeSheet.setValue(12, 1, 5);
activeSheet.setValue(13, 0, "color scheme");
activeSheet.setValue(13, 1, "red");
activeSheet.setValue(14, 0, "measure color");
activeSheet.setValue(14, 1, "#FFC0CB");
activeSheet.setValue(15, 0, "target color");
activeSheet.setValue(15, 1, "#FF4500");
activeSheet.setValue(16, 0, "maxi color");
activeSheet.setValue(16, 1, "#00FFFF");
activeSheet.setValue(17, 0, "good color");
activeSheet.setValue(17, 1, "#7FFF00");
activeSheet.setValue(18, 0, "bad color");
activeSheet.setValue(18, 1, " #FF0000");
activeSheet.setValue(19, 0, "forecast color");
activeSheet.setValue(19, 1, "#000080");
activeSheet.setValue(20, 0, "allow measure over maxi");
activeSheet.setValue(20, 1, true);
activeSheet.setValue(21, 0, "bar size");
activeSheet.setValue(21, 1, 0.8);

for (var index = 2; index < 8; index++) {
    activeSheet.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)');
}

activeSheet.setRowHeight(0, 50);
for (var i = 1; i < 8; i++) {
    activeSheet.setRowHeight(i, 40);
}
activeSheet.setColumnWidth(0, 100);
activeSheet.setColumnWidth(1, 100);
activeSheet.setColumnWidth(2, 100);
activeSheet.setColumnWidth(3, 200);