ピボットテーブルには3つのレイアウトがあります。
コンパクト形式
アウトライン形式
表形式
デフォルトのレイアウトはコンパクト形式です。
各レイアウトタイプについて：
コンパクト形式
１．行ラベル
コンパクト形式では、各行ラベルは別々の行にあります。
行フィールドのラベルは、常に、内部フィールドのラベルの上にあります。
各行ラベルは、フィールドを区別するために、その上のフィールドからわずかにインデントされています。
行ラベルを繰り返すことはできません。
インデントは、［レイアウトと形式］タブの［ピボットテーブルオプション］で変更できます。
２．行フィールド
コンパクト形式では、すべての行フィールドが1つの列にあります。
一般的な見出し「行ラベル」は、「行フィールド」列にあります。
３．小計
コンパクト形式では、小計を各グループの上部または下部に表示できます。
この設定は、すべての行フィールドに影響します。
列フィールドでは、小計は常に下部に表示されます。
小計が下部にある場合でも、行ラベルは上部に残ります。
アウトライン形式
１．行ラベル
アウトライン形式では、各行ラベルは別々の行にあります。
行フィールドのラベルは、常に、内部フィールドのラベルの上にあります。
行ラベルは繰り返すことができます。
２．行フィールド
アウトライン形式では、各行フィールドは別々の列にあります。
各行フィールドでは、列見出しにその名前が表示されます。
３．小計
アウトライン形式では、小計を各グループの上部または下部に表示できます。
この設定は、すべての行フィールドに影響します。
列フィールドでは、小計は常に下部に表示されます。
表形式
１．行ラベル
表形式では、外部フィールドの行ラベルは、関連する内部フィールドの最初のラベルと同じ行にあります。
行ラベルは繰り返すことができます。
２．行フィールド
表形式では、各行フィールドは別々の列にあります。
各行フィールドでは、列見出しにその名前が表示されます。
３．小計
表形式では、小計は各グループの下部にのみ表示できます。
この設定は、すべての行フィールドに影響します。
列フィールドの場合、小計は常に下部に表示されます。
ピボットテーブルのレイアウトタイプを取得および設定できます。
PivotTableLayoutTypeは、以下に定義されている列挙型です：
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
initSpread(spread);
var pivotLayoutSheet = spread.getSheet(0);
var pt = initPivotTable(pivotLayoutSheet);
bindEvent(spread, pt);
};
function initSpread(spread) {
spread.suspendPaint();
var sheet = spread.getSheet(1);
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1,4,0,2).formatter("$ #,##0");
sheet.setArray(0, 0, pivotSales);
let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
for(let i=2;i<=117;i++)
{
sheet.setFormula(i-1,5,'=D'+i+'*E'+i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
var sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
spread.resumePaint();
}
function initPivotTable(sheet) {
var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
myPivotTable.group(groupInfo);
myPivotTable.add("四半期 (date)", "四半期 (date)",GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let itemList = ["Alan","John", "Tess"];
myPivotTable.labelFilter("Salesperson", { textItem: { list: itemList, isAll: false } });
myPivotTable.sort("Salesperson", { sortType: GC.Pivot.SortType.asc });
let carList = ["Audi","BMW","Mercedes"];
myPivotTable.labelFilter("Cars", { textItem: { list: carList, isAll: false } });
myPivotTable.sort("Cars", { sortType: GC.Pivot.SortType.asc });
let style = new GC.Spread.Sheets.Style();
style.formatter = "$ #,##0";
myPivotTable.setStyle({dataOnly: true}, style);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
return myPivotTable;
}
function bindEvent (spread, pt) {
_getElementById("layoutType").addEventListener("change", () => {
if (spread) {
var type = parseInt(document.getElementById("layoutType").value, 10);
pt.layoutType(type);
pt.autoFitColumn();
}
});
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label><b>ピボットレイアウト</b>
</label></div>
<hr>
<div class="option-row">
<label>下のドロップダウンメニューを変更して、レイアウトがどのように変化するか確認してください。
</label></div>
<div class="option-row">
<select id="layoutType">
<option value="0">コンパクト形式</option>
<option value="1" selected>アウトライン形式</option>
<option value="2">表形式</option>
</select>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
}
.sample-spreadsheets {
width: calc(100% - 210px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 210px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
