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)
コードの使用
次のサンプルコードは、ブレットスパークラインを作成します。
| JavaScript |
コードのコピー
|
|---|---|
// 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); |
|
関連トピック