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

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

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

オプション	説明
Points	表示するすべての値を保持するセル範囲を表す参照。「A1:A10」など。
ShowAverage	平均値を表示するかどうかを示すブール値。オプションの設定値であり、デフォルト値はfalseです。
ScaleStart	スパークラインの下限を表す数値。オプションの設定値であり、デフォルト値はすべての値の最小値です。
ScaleEnd	スパークラインの上限を表す数値。オプションの設定値であり、デフォルト値はすべての値の最大値です。
Style	スプレッドスパークラインのスタイルを表す数値。オプションの設定値であり、デフォルト値は4（poles）です。
ColorScheme	スパークラインの色を表す文字列。オプションの設定値であり、デフォルト値は「#646464」です。
Vertical	スパークラインを垂直方向に表示するかどうかを示すブール値。オプションの設定値であり、デフォルト値はfalseです。

スパークラインを水平方向に表示する場合は、水平軸によって各データ点が表されます。垂直軸上の線の長さ、またはドットの数は、出現頻度を表します。

次の6つのスタイルがサポートされます。

Stacked（1）: 中央から2方向に向かって直線を描画
Spread（2）: 中央から2方向へドットを描画
Jitter（3）: ランダムな位置にドットを描画
Poles（4）: 一方向から他方向に向かって直線を描画
StackedDots（5）: 一方向から他方向に向かってドットを描画
Stripe（6）: 同じ長さの直線を描画

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

=SPREADSPARKLINE(points, showAverage?, scaleStart?, scaleEnd?, style?, colorScheme?, vertical?)

コードの使用

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

JavaScript	コードのコピー
activeSheet.addSpan(0, 0, 1, 3); activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Employee Age Statistics").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); var table1 = activeSheet.tables.add("table1", 1, 0, 49, 3, GC.Spread.Sheets.Tables.TableThemes.light12); table1.filterButtonVisible(false); activeSheet.setValue(1, 0, "Name"); activeSheet.setValue(1, 1, "Age"); activeSheet.setValue(1, 2, "Diagram"); for(var i = 2;i < 20; i++) { activeSheet.setValue(i, 0, "Employee " + (i - 1)); } activeSheet.setValue(2, 1, 18); activeSheet.setValue(3, 1, 20); activeSheet.setValue(4, 1, 21); activeSheet.setValue(5, 1, 22); activeSheet.setValue(6, 1, 23); activeSheet.setValue(7, 1, 22); activeSheet.setValue(8, 1, 24); activeSheet.setValue(9, 1, 24); activeSheet.setValue(10, 1, 30); activeSheet.setValue(11, 1, 33); activeSheet.setValue(12, 1, 33); activeSheet.setValue(13, 1, 40); activeSheet.setValue(14, 1, 44); activeSheet.setValue(15, 1, 45); activeSheet.setValue(16, 1, 45); activeSheet.setValue(17, 1, 46); activeSheet.setValue(18, 1, 50); activeSheet.setValue(19, 1, 55); activeSheet.addSpan(2, 2, 10, 1); activeSheet.setFormula(2, 2, '=SPREADSPARKLINE(B3:B20,TRUE,,,4,"green")'); activeSheet.setRowHeight(0, 30); activeSheet.setColumnWidth(0, 100); activeSheet.setColumnWidth(1, 100); activeSheet.setColumnWidth(2, 400);

JavaScript

コードのコピー

activeSheet.addSpan(0, 0, 1, 3);
activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Employee Age Statistics").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var table1 = activeSheet.tables.add("table1", 1, 0, 49, 3, GC.Spread.Sheets.Tables.TableThemes.light12);
table1.filterButtonVisible(false);
activeSheet.setValue(1, 0, "Name");
activeSheet.setValue(1, 1, "Age");
activeSheet.setValue(1, 2, "Diagram");
for(var i = 2;i < 20; i++) {
activeSheet.setValue(i, 0, "Employee " + (i - 1));
}
activeSheet.setValue(2, 1, 18);
activeSheet.setValue(3, 1, 20);
activeSheet.setValue(4, 1, 21);
activeSheet.setValue(5, 1, 22);
activeSheet.setValue(6, 1, 23);
activeSheet.setValue(7, 1, 22);
activeSheet.setValue(8, 1, 24);
activeSheet.setValue(9, 1, 24);
activeSheet.setValue(10, 1, 30);
activeSheet.setValue(11, 1, 33);
activeSheet.setValue(12, 1, 33);
activeSheet.setValue(13, 1, 40);
activeSheet.setValue(14, 1, 44);
activeSheet.setValue(15, 1, 45);
activeSheet.setValue(16, 1, 45);
activeSheet.setValue(17, 1, 46);
activeSheet.setValue(18, 1, 50);
activeSheet.setValue(19, 1, 55);
activeSheet.addSpan(2, 2, 10, 1);
activeSheet.setFormula(2, 2, '=SPREADSPARKLINE(B3:B20,TRUE,,,4,"green")');
activeSheet.setRowHeight(0, 30);
activeSheet.setColumnWidth(0, 100);
activeSheet.setColumnWidth(1, 100);
activeSheet.setColumnWidth(2, 400);