SpreadJS製品ヘルプ
カスケードスパークライン
SpreadJS > 開発者の手引き > 機能 > データ視覚化とオブジェクトの管理 > スパークライン > カスケードスパークライン

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

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

オプション 説明
pointsRange すべての値を保持するセル範囲を表す参照。「B2:B8」など。
pointIndex データ点のインデックスを表す数値または参照。pointIndexは1以上の値である必要があります。「1」、「D2」など。
labelsRange すべてのラベルを保持するセル範囲を表す参照。「A2:A8」など。オプションの設定値であり、デフォルトは「ラベルなし」です。
minimum 表示領域の最小値を表す数値または参照。オプションの設定値であり、デフォルト値は集計値(各データ点の値の集計)内の最小値となります。「-2000」など。最小値を設定する場合は、デフォルトの最小値より小さい値とする必要があります。そうでない場合は、デフォルトの最小値が使用されます。
maximum 表示領域の最大値を表す数値または参照。オプションの設定値であり、デフォルト値は集計値(各データ点の値の集計)内の最大値となります。「6000」など。最大値を設定する場合は、デフォルトの最大値より大きい値とする必要があります。そうでない場合は、デフォルトの最大値が使用されます。
colorPositive 最初または最後の正のスパークラインボックス(正の値であるデータ点を表すボックス)の色を表す文字列。オプションの設定値であり、デフォルト値は「#8CBF64」です。最初または最後のボックスが正の値を表す場合は、このボックスの色がcolorPositiveの色となります。その中間に位置する正のボックスは、colorPositiveよりやや薄い色で表示されます。
colorNegative 最初または最後の負のスパークラインボックス(負の値であるデータ点を表すボックス)の色を表す文字列。オプションの設定値であり、デフォルト値は「#D6604D」です。最初または最後のボックスが負の値を表す場合は、このボックスの色がcolorNegativeの色となります。その中間に位置する負のボックスは、colorNegativeよりやや薄い色で表示されます。
vertical ボックスの向きを垂直方向にするか水平方向にするかを表すブール値。オプションの設定値であり、デフォルト値はfalseです。

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

=CASCADESPARKLINE(pointsRange, pointIndex, labelsRange, minimum, maximum, colorPositive, colorNegative, vertical)

1つのスパークラインは、1グループの数式によって構成されます。したがって、グループ内のすべての数式に対し、verticalの値をtrueまたはfalseに統一する必要があります。

pointIndexは、データ点の範囲における、各データ点の値に対応するインデックスを表します。たとえば、次の例では、インデックス「2」は「2500」を参照しています。

コードの使用

次のサンプルコードは、数式グループを使用して、カスケードスパークラインを作成します。

JavaScript
コードのコピー
 activeSheet.addSpan(0, 0, 1, 3);
 activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("A salesman's expenses and pay")
                 .font("20px Arial")
                 .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
                 .vAlign(GC.Spread.Sheets.VerticalAlign.center)
                 .backColor("purple")
                 .foreColor("white");
 activeSheet.getRange(1, 2, 7, 1, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("transparent", GC.Spread.Sheets.LineStyle.thin),
                 { inside: true });
 activeSheet.setValue(1, 0, "Salary");
 activeSheet.setValue(2, 0, "Performance pay");
 activeSheet.setValue(3, 0, "Pay for customers");
 activeSheet.setValue(4, 0, "Food spending");
 activeSheet.setValue(5, 0, "Hotel expenses");
 activeSheet.setValue(6, 0, "Financial  management");
 activeSheet.setValue(7, 0, "Deposit");
 activeSheet.setValue(1, 1, 3500);
 activeSheet.setValue(2, 1, 2500);
 activeSheet.setValue(3, 1, -1000);
 activeSheet.setValue(4, 1, -1000);
 activeSheet.setValue(5, 1, -900);
 activeSheet.setValue(6, 1, 300);
 activeSheet.setFormula(7, 1, '=sum(B2:B7)');
 activeSheet.setColumnWidth(0,150);
 activeSheet.setColumnWidth(1,100);
 activeSheet.setColumnWidth(2, 340);
 activeSheet.setRowHeight(0, 30);
 activeSheet.setRowHeight(1, 30);
 activeSheet.setRowHeight(2, 30);
 activeSheet.setRowHeight(3, 30);
 activeSheet.setRowHeight(4, 30);
 activeSheet.setRowHeight(5, 30);
 activeSheet.setRowHeight(6, 30);
 activeSheet.setRowHeight(7, 30);
 activeSheet.setFormula(1, 2, '=CASCADESPARKLINE(B2:B8,1,A2:A8,,,"#8CBF64","#D6604D",false)');
 activeSheet.setFormula(2, 2, '=CASCADESPARKLINE(B2:B8,2,A2:A8,,,"#8CBF64","#D6604D",false)');
 activeSheet.setFormula(3, 2, '=CASCADESPARKLINE(B2:B8,3,A2:A8,,,"#8CBF64","#D6604D",false)');
 activeSheet.setFormula(4, 2, '=CASCADESPARKLINE(B2:B8,4,A2:A8,,,"#8CBF64","#D6604D",false)');
 activeSheet.setFormula(5, 2, '=CASCADESPARKLINE(B2:B8,5,A2:A8,,,"#8CBF64","#D6604D",false)');
 activeSheet.setFormula(6, 2, '=CASCADESPARKLINE(B2:B8,6,A2:A8,,,"#8CBF64","#D6604D",false)');
 activeSheet.setFormula(7, 2, '=CASCADESPARKLINE(B2:B8,7,A2:A8,,,"#8CBF64","#D6604D",false)');
関連トピック