Spread.Sheets > 開発者の手引き > 外観のカスタマイズ > スパークラインの概要 > カスケードスパークラインの作成 |
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)'); |