パレートスパークライン

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

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

オプション	説明
points	すべての値を保持するセル範囲を表す参照。「B2:B7」など。
pointIndex	セグメントのデータ点に対応するインデックスを表す数値または参照。「1」、「D2」など。pointIndexは1以上の値である必要があります。
colorRange	セグメントボックスの色を保持するセル範囲を表す参照。「D2:D7」など。オプションの設定値であり、デフォルト値は「なし」です。
target	目標線の位置を表す数値または参照。「0.5」など。オプションの設定値であり、デフォルト値は「なし」です。目標線を表示する場合、この色は「#8CBF64」となります。
target2	第2目標線の位置を表す数値または参照。「0.8」など。オプションの設定値であり、デフォルト値は「なし」です。第2目標線を表示する場合、この色は「#EE5D5D」となります。
highlightPosition	赤色で表示するセグメントの順位を表す数値または参照。「3」など。オプションの設定値であり、デフォルト値は「なし」です。たとえば、highlightPositionを「4」に設定すると、4番目のセグメントボックスの色が「#CB0000」に設定されます。highlightPositionを設定しない場合、セグメントボックスの色はcolorRangeに割り当てた色、またはデフォルト色である「#969696」に設定されます。
label	セグメントのラベルを累積パーセンテージとして表示するのか（label = 1）、単一のパーセンテージとして表示するのか（label = 2）、または表示しないか（label = 0）を表す数値。オプションの設定値であり、デフォルト値は0です。
vertical	ボックスの向きを垂直方向にするか水平方向にするかを表すブール値。オプションの設定値であり、デフォルト値はfalseです。
targetColor	目標線の色を表す色文字列。
target2Color	第2目標線の色を表す色文字列。
labelColor	ラベルの前景色を表す色文字列。
barSize	セルの幅または高さに応じてバーの幅または高さをパーセンテージで表す数値。0から1までの範囲内である必要があります。

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

=PARETOSPARKLINE(points, pointIndex, colorRange, target, target2, hightlightPosition, lable, vertical, targetColor, target2Color, labelColor, barSize)

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

pointIndex（2番目の数式パラメータ）は、データ点の範囲における、各データ点の値に対応するインデックスを表します。たとえば、次の例では、インデックス「2」は「15」を参照しています。

コードの使用

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

JavaScript	コードのコピー
// Spreadを初期化します。 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // アクティブシートを取得します。 var activeSheet = spread.getSheet(0); activeSheet.addSpan(0, 0, 1, 3); activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Reason for Being Late") .font("20px Arial") .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor("purple") .foreColor("white"); activeSheet.getRange(1, 2, 6, 1, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("transparent", GC.Spread.Sheets.LineStyle.thin), { inside: true }); activeSheet.setValue(1, 0, "Traffic"); activeSheet.setValue(2, 0, "Child care"); activeSheet.setValue(3, 0, "Public transportation"); activeSheet.setValue(4, 0, "Weather"); activeSheet.setValue(5, 0, "Overslept"); activeSheet.setValue(6, 0, "Emergency"); activeSheet.setValue(7, 0, "target"); activeSheet.setValue(8, 0, "target2"); activeSheet.setValue(1, 1, 20); activeSheet.setValue(2, 1, 15); activeSheet.setValue(3, 1, 13); activeSheet.setValue(4, 1, 5); activeSheet.setValue(5, 1, 4); activeSheet.setValue(6, 1, 1); activeSheet.setValue(7, 1, 0.5); activeSheet.setValue(8, 1, 0.8); activeSheet.setValue(1, 2, "#FF1493"); activeSheet.setValue(2, 2, "#FFE7BA"); activeSheet.setValue(3, 2, "#FFD700"); activeSheet.setValue(4, 2, "#FFAEB9"); activeSheet.setValue(5, 2, "#FF8C69"); activeSheet.setValue(6, 2, "#FF83FA"); activeSheet.setValue(9, 0, "targetColor"); activeSheet.setValue(10, 0, "target2Color"); activeSheet.setValue(9, 1, "#006400"); activeSheet.setValue(10, 1, "#00BFFF"); activeSheet.addSpan(7, 2, 2, 2); activeSheet.getCell(7, 2, GC.Spread.Sheets.SheetArea.viewport).wordWrap(true); activeSheet.setValue(7, 2, 'Result: The reason 80% of the employees are late - "traffic", "child care" and "public transportation".'); activeSheet.setColumnWidth(0, 120); activeSheet.setColumnWidth(1, 80); activeSheet.setColumnWidth(2, 80); activeSheet.setColumnWidth(3, 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); /$B$10, $B$11, C2: C7, D2: D7 //targetColor, target2Color, labelColor, barSize) activeSheet.setFormula(1, 3, '=PARETOSPARKLINE(B2:B7,1,C2:C7,B8,B9,4,2,false,B10,B11,C2,1)'); activeSheet.setFormula(2, 3, '=PARETOSPARKLINE(B2:B7,2,C2:C7,B8,B9,4,2,false,B10,B11,C3,0.8)'); activeSheet.setFormula(3, 3, '=PARETOSPARKLINE(B2:B7,3,C2:C7,B8,B9,4,2,false,B10,B11,C4,0.6)'); activeSheet.setFormula(4, 3, '=PARETOSPARKLINE(B2:B7,4,C2:C7,B8,B9,4,2,false,B10,B11,C5,0.5)'); activeSheet.setFormula(5, 3, '=PARETOSPARKLINE(B2:B7,5,C2:C7,B8,B9,4,2,false,B10,B11,C6,0.1)'); activeSheet.setFormula(6, 3, '=PARETOSPARKLINE(B2:B7,6,C2:C7,B8,B9,4,2,false,B10,B11,C7,0.3)');

JavaScript

コードのコピー

// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// アクティブシートを取得します。
var activeSheet = spread.getSheet(0);
activeSheet.addSpan(0, 0, 1, 3);
activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Reason for Being Late")
    .font("20px Arial")
    .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
    .vAlign(GC.Spread.Sheets.VerticalAlign.center)
    .backColor("purple")
    .foreColor("white");
activeSheet.getRange(1, 2, 6, 1, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("transparent", GC.Spread.Sheets.LineStyle.thin),
    { inside: true });
activeSheet.setValue(1, 0, "Traffic");
activeSheet.setValue(2, 0, "Child care");
activeSheet.setValue(3, 0, "Public transportation");
activeSheet.setValue(4, 0, "Weather");
activeSheet.setValue(5, 0, "Overslept");
activeSheet.setValue(6, 0, "Emergency");
activeSheet.setValue(7, 0, "target");
activeSheet.setValue(8, 0, "target2");
activeSheet.setValue(1, 1, 20);
activeSheet.setValue(2, 1, 15);
activeSheet.setValue(3, 1, 13);
activeSheet.setValue(4, 1, 5);
activeSheet.setValue(5, 1, 4);
activeSheet.setValue(6, 1, 1);
activeSheet.setValue(7, 1, 0.5);
activeSheet.setValue(8, 1, 0.8);
activeSheet.setValue(1, 2, "#FF1493");
activeSheet.setValue(2, 2, "#FFE7BA");
activeSheet.setValue(3, 2, "#FFD700");
activeSheet.setValue(4, 2, "#FFAEB9");
activeSheet.setValue(5, 2, "#FF8C69");
activeSheet.setValue(6, 2, "#FF83FA");
activeSheet.setValue(9, 0, "targetColor");
activeSheet.setValue(10, 0, "target2Color");
activeSheet.setValue(9, 1, "#006400");
activeSheet.setValue(10, 1, "#00BFFF");
activeSheet.addSpan(7, 2, 2, 2);
activeSheet.getCell(7, 2, GC.Spread.Sheets.SheetArea.viewport).wordWrap(true);
activeSheet.setValue(7, 2, 'Result: The reason 80% of the employees are late - "traffic", "child care" and "public transportation".');
activeSheet.setColumnWidth(0, 120);
activeSheet.setColumnWidth(1, 80);
activeSheet.setColumnWidth(2, 80);
activeSheet.setColumnWidth(3, 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);
/$B$10, $B$11, C2: C7, D2: D7
//targetColor, target2Color, labelColor, barSize)
activeSheet.setFormula(1, 3, '=PARETOSPARKLINE(B2:B7,1,C2:C7,B8,B9,4,2,false,B10,B11,C2,1)');
activeSheet.setFormula(2, 3, '=PARETOSPARKLINE(B2:B7,2,C2:C7,B8,B9,4,2,false,B10,B11,C3,0.8)');
activeSheet.setFormula(3, 3, '=PARETOSPARKLINE(B2:B7,3,C2:C7,B8,B9,4,2,false,B10,B11,C4,0.6)');
activeSheet.setFormula(4, 3, '=PARETOSPARKLINE(B2:B7,4,C2:C7,B8,B9,4,2,false,B10,B11,C5,0.5)');
activeSheet.setFormula(5, 3, '=PARETOSPARKLINE(B2:B7,5,C2:C7,B8,B9,4,2,false,B10,B11,C6,0.1)');
activeSheet.setFormula(6, 3, '=PARETOSPARKLINE(B2:B7,6,C2:C7,B8,B9,4,2,false,B10,B11,C7,0.3)');