PivotPanel は 3 つのセクションで構成されます
フィールドセクション（フィールドセクション領域）
利用可能なすべてのデータソースフィールドを一覧表示します
チェックボックスを使用して、ピボットテーブルにフィールドをすばやく追加／削除できます
下の領域（Filters/Rows/Columns/Values）へのフィールドのドラッグアンドドロップをサポートします
検索ボックスでフィールドリストをすばやく絞り込めます
エリアセクション（ドラッグアンドドロップ領域）
ピボットテーブル エリアセクションには、4 つの領域があります。
フィルター: ピボットテーブルのデータ範囲を制御します。
列: ピボットテーブルの列方向の配置を制御します。
行: ピボットテーブルの行方向の配置を制御します。
値: ピボットテーブルの集計データと集計方法を制御します。
ビューリストセクション（ビューの管理）
ピボットテーブルの複数のビュー設定を管理します
さまざまなフィールドレイアウト設定を素早く切り替えます
ビューの追加：現在のフィールド設定を新しいビューとして保存します
ビューの適用：以前に保存した設定を復元します
ドロップダウンリストには、保存済みのすべてのビュー名が表示されます
日付フィールドの自動グループ化
日付フィールドを 行 または 列 領域に追加すると、ピボットテーブルはデータの日付範囲に基づいて自動的にグループ化できます。グループ化の粒度は自動的に決定されます。
複数年にまたがるデータ: 年、四半期、月でグループ化します
1 年以内の複数月にまたがるデータ: 月、日でグループ化します
1 か月以内の複数日にまたがるデータ: 日と時刻要素でグループ化します
この機能を有効にするには、PivotTableChanging イベントをリッスンし、autoGroupDateField を true に設定します。
ピボットパネルは次のように作成できます。
そして、"panel"要素のwidthとheightを設定する必要があります。
GC.Spread.Pivot.PivotPanelコンストラクタのパラメーターは次のとおりです：
Param
Type
Description
name
string
ピボットパネルの名前
pivotTable
GC.Spread.Pivot.PivotTable
関連するピボットテーブル
host
HTMLDivElement
ピボットパネルをホストするコンテナ
ピボットパネルはピボットテーブルを制御するツールにすぎず、fromJSONメソッドを使うと自動的に破棄されます。
ピボットテーブルはピボットパネルがなくても機能します。そのため、ピボットテーブルは、ピボットパネルと連携する以下のAPIをサポートします。
ピボットパネルをピボットテーブルに接続します：
ピボットパネルをピボットテーブルから切り離します：
ピボットパネルを破棄します：
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
initSpread(spread);
var pivotLayoutSheet = spread.getSheet(0);
initPivotTable(pivotLayoutSheet);
initAutoGroupOption(pivotLayoutSheet);
};
function initSpread(spread) {
spread.suspendPaint();
let 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"]);
let sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
sheet0.setColumnCount(50);
spread.resumePaint();
}
function initPivotTable(sheet) {
let 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("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
}
function initAutoGroupOption(sheet) {
var autoGroupEnabled = false;
sheet.bind(GC.Spread.Sheets.Events.PivotTableChanging, function (sender, args) {
if (autoGroupEnabled) {
args.autoGroupDateField = true;
}
});
var checkbox = _getElementById('autoGroupDate');
checkbox.addEventListener('change', function () {
autoGroupEnabled = this.checked;
});
}
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="sample-panel">
<div class="auto-group-option">
<input type="checkbox" id="autoGroupDate">
<label for="autoGroupDate">日付フィールド追加時に自動グループ化を有効にする</label>
</div>
<div id="panel"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.sample-panel {
float: right;
width: 300px;
height: 100%;
box-sizing: border-box;
background: #e6e6e6;
overflow: hidden;
}
.gc-panel {
padding: 10px;
background-color: rgb(230, 230, 230);
}
.auto-group-option {
padding: 10px 5px 10px 10px;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #333;
display: flex;
align-items: center;
gap: 6px;
}
.auto-group-option input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
width: 14px;
height: 14px;
flex-shrink: 0;
cursor: pointer;
background: transparent;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtVW5jaGVja2VkPC90aXRsZT48ZyBpZD0iQ2hlY2tib3gtVW5jaGVja2VkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTMsMSBDMTQuMTA0NTY5NSwxIDE1LDEuODk1NDMwNSAxNSwzIEwxNSwxMyBDMTUsMTQuMTA0NTY5NSAxNC4xMDQ1Njk1LDE1IDEzLDE1IEwzLDE1IEMxLjg5NTQzMDUsMTUgMSwxNC4xMDQ1Njk1IDEsMTMgTDEsMyBDMSwxLjg5NTQzMDUgMS44OTU0MzA1LDEgMywxIEwxMywxIFogTTEzLDIuNSBMMywyLjUgQzIuNzIzODU3NjMsMi41IDIuNSwyLjcyMzg1NzYzIDIuNSwzIEwyLjUsMTMgQzIuNSwxMy4yNzYxNDI0IDIuNzIzODU3NjMsMTMuNSAzLDEzLjUgTDEzLDEzLjUgQzEzLjI3NjE0MjQsMTMuNSAxMy41LDEzLjI3NjE0MjQgMTMuNSwxMyBMMTMuNSwzIEMxMy41LDIuNzIzODU3NjMgMTMuMjc2MTQyNCwyLjUgMTMsMi41IFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+");
}
.auto-group-option input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtQ2hlY2tlZDwvdGl0bGU+PGcgaWQ9IkNoZWNrYm94LUNoZWNrZWQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMywxIEMxNC4xMDQ1Njk1LDEgMTUsMS44OTU0MzA1IDE1LDMgTDE1LDEzIEMxNSwxNC4xMDQ1Njk1IDE0LjEwNDU2OTUsMTUgMTMsMTUgTDMsMTUgQzEuODk1NDMwNSwxNSAxLDE0LjEwNDU2OTUgMSwxMyBMMSwzIEMxLDEuODk1NDMwNSAxLjg5NTQzMDUsMSAzLDEgTDEzLDEgWiBNMTIuNTU0MzcwNiw0LjcxOTY2OTkxIEMxMi4yNjE0Nzc0LDQuNDI2Nzc2NyAxMS43ODY2MDM3LDQuNDI2Nzc2NyAxMS40OTM3MTA1LDQuNzE5NjY5OTEgTDYuNjg3NjYxMzcsOS41MjUgTDQuNDQwOTkxNDUsNy4yNzgzNDQ3OSBDNC4xNDgwOTgyMyw2Ljk4NTQ1MTU4IDMuNjczMjI0NSw2Ljk4NTQ1MTU4IDMuMzgwMzMxMjgsNy4yNzgzNDQ3OSBDMy4wODc0MzgwNiw3LjU3MTIzODAxIDMuMDg3NDM4MDYsOC4wNDYxMTE3NSAzLjM4MDMzMTI4LDguMzM5MDA0OTcgTDYuMTU3NjgzNDMsMTEuMTE2MzU3MSBDNi4yOTA4MTY3MSwxMS4yNDk0OTA0IDYuNDYxNTQ5MjcsMTEuMzIyMTA4NSA2LjYzNTY5OTk1LDExLjMzNDIxMTYgTDYuNzQwMzI3MDgsMTEuMzM0MjExNiBMNi44NDQxMzM4NiwxMS4zMTk2ODc5IEM2Ljk4MTI2NjgxLDExLjI5MDY0MDcgNy4xMTE4MzY5OCwxMS4yMjI4NjM3IDcuMjE4MzQzNiwxMS4xMTYzNTcxIEwxMi41NTQzNzA2LDUuNzgwMzMwMDkgQzEyLjg0NzI2MzgsNS40ODc0MzY4NyAxMi44NDcyNjM4LDUuMDEyNTYzMTMgMTIuNTU0MzcwNiw0LjcxOTY2OTkxIFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+");
}
.auto-group-option label {
cursor: pointer;
user-select: none;
}
#panel {
width: 300px;
height: calc(100% - 36px);
}
#app {
height: 100%;
}
