[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
細かい設定を変更することで、ピボットテーブルをより分かりやすくすることができます。
autoFitColumn メソッドを使用することで、データによってピボットテーブルの列を自動調整できます。次の図は、ピボットテーブル列の自動調整操作を表示します。
次のサンプルコードは、ピボットテーブルの列を自動調整する方法を示します。
// 列を自動調整します。
myPivotTable.autoFitColumn();
ピボットテーブルの値フィールド領域で、数式を使用して値を計算するカスタムフィールドを追加できます。定数を使用するか、数式でピボットテーブルの他のフィールドを参照できます。
集計フィールドを追加するには、 addCalcField メソッドを使用できます。 getCalcFields メソッドで集計フィールド情報の取得と removeCalcField メソッドで集計フィールド情報の削除を行うことができます。
次の図では、ピボットテーブルに集計フィールド「税金」が追加されています。
次のサンプルコードは、ピボットテーブルに集計フィールドの追加、取得や削除を行う方法を示します。
// 「数量」フィールドの0.08%である「税金」という集計フィールドを追加します。
// 「数量」はピボットテーブルのメジャーフィールドの1つです。
myPivotTable.addCalcField("Tax", "=数量*0.08");
myPivotTable.add("Tax", "計算された税金は数量の0.08パーセントです", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
// 集計フィールドを取得します。
calcFieldsInfo = myPivotTable.getCalcFields();
// 新規シートに集計フィールドの名前を追加します。
for (var i = 0; i < calcFieldsInfo.length; i++) {
calcFieldSheet.setValue(i + 1, 0, calcFieldsInfo[i].fieldName);
calcField = calcFieldsInfo[i].fieldName;
calcFieldSheet.setValue(i + 1, 1, calcFieldsInfo[i].formula);
}
// 集計フィールドを削除します。
myPivotTable.removeCalcField(calcField);
集計アイテムを行または列のフィールド領域に追加して、指定した数式を使用してピボットテーブルの特定の項目を計算できます。定数を使用するか、数式でピボットテーブルの他のフィールドを参照できます。
集計アイテムは、 addCalcItem メソッドを使用して追加できます。さらに getCalcItems 、 updateCalcItem 、および removeCalcItem メソッドそれぞれを使用して集計アイテムを 取得、更新、削除することができます。
集計アイテムは、ピボットテーブルレポート領域の複数のフィールドに実装することはできません。
集計アイテムの式は、ワークシートのデータではなく、ピボットテーブルのデータを参照できます。
SpreadJSは、グループ化されているフィールドに集計アイテムを追加し、グループフィールドに基本情報を追加できます。
数値グループフィールドまたは日付グループフィールドがある場合、集計アイテムを追加できるのは選択グループのみです。
ピボットテーブルへのすべての参照は、「SourceFieldName [itemName]」の形式に従う必要があります。
ピボットレポートのすべての値フィールドの「計算タイプ」は、TypeSum、Count、Max、Min、Product、CountNumbersのいずれかになります。
集計アイテムのフィールドは、ピボットレポートのフィルター領域に存在できません。
SpreadJSを使用すると、集計アイテムの値を小計に集約するかどうかを設定できます。
次の画像では、集計アイテム「 カテゴリ[ベーカリー + 飲料]」 がピボットテーブルに追加されています。
次のサンプルコードは、ピボットテーブルの集計アイテムを追加、更新、および削除する方法を示しています。
// 「カテゴリ[ベーカリー]+カテゴリ[飲料]」と等しい集計アイテム「カテゴリ[ベーカリー+飲料]」を追加します。
function addCalcItem(myPivotTable) {
myPivotTable.addCalcItem("カテゴリ", "カテゴリ[ベーカリー + 飲料]", "=カテゴリ[ベーカリー] + カテゴリ[飲料]");
myPivotTable.autoFitColumn();
return myPivotTable;
}
// 集計アイテムを更新します。
function updateCalcItem(myPivotTable) {
myPivotTable.updateCalcItem("カテゴリ", "カテゴリ[ベーカリー + 飲料]", "=カテゴリ[ベーカリー] - カテゴリ[飲料]", 1);
myPivotTable.options.calcItemAggregation = GC.Spread.Pivot.CalcItemAggregation.include;
myPivotTable.autoFitColumn();
return myPivotTable;
}
// 集計アイテムを削除します。
function deleteCalcItem(myPivotTable) {
myPivotTable.removeCalcItem("カテゴリ", "カテゴリ[ベーカリー + 飲料]");
myPivotTable.autoFitColumn();
return myPivotTable;
}
addConditionalRule メソッドを使用してピボット領域に条件付き規則を適用できます。既存の条件付き規則の情報を取得するには、 getConditionalRules とその情報を削除するには、 removeConditionalRule メソッドを使用できます。条件付き規則は、ピボットテーブルレイアウトの変更に関係なく、期待どおりに機能します。
次の図は、値セルに色書式の条件付き規則を表示します。
次のサンプルコードは、ピボットテーブルに条件付き規則を適用する方法を示します。
// 条件付き規則を追加します。
myPivotTable.addConditionalRule([{ dataOnly: true, references: [{ fieldName: "都市", items: ["静岡市"] }] }], new GC.Spread.Sheets.ConditionalFormatting.ScaleRule(GC.Spread.Sheets.ConditionalFormatting.RuleType.threeScaleRule, 1 /* LowestValue */, 0, "lightblue", 0 /* Number */, 500, "yellow", 2 /* HighestValue */, 2000, "green"));
mergeItem オプションを使用して、ヘッダセルの結合および中央揃えができます。このオプションはブール値で設定し、次の表で指定するようにピボットテーブルの定義されたレイアウトに従って機能します。
オプション | コンパクト形式レイアウト | アウトライン形式レイアウト | 表形式レイアウト |
---|---|---|---|
結合 | 列ヘッダーのみ | 列ヘッダーのみ | 行ヘッダーと列ヘッダーの両方 |
中央揃え | 列ヘッダーのみ | 行ヘッダーと列ヘッダーの両方 | 行ヘッダーと列ヘッダーの両方 |
次の図では、 mergeItem でセルがラベルと結合され中央揃えされています。
次のサンプルコードは、ピボットテーブルのラベルとセルを結合して中央揃えにする方法を示しています。
// ラベルとセルを結合して中央揃えにします
myPivotTable.options.mergeItem = true;
ピボットテーブルにヒントを有効にして、データの追加情報を把握できます。ピボットデータにマウスを合わせると、ヒントデータが表示されます。ただし、値フィールドに明確な情報がない場合、ヒントは表示されません。 showToolTip オプションを使用して、行/列ヘッダー領域、データ領域、および小計/総計領域にヒントを表示できます。
次の図は、ピボットデータのマウスホーバーで表示されるヒントを示します。
次のサンプルコードは、ピボットテーブルでヒントを有効にする方法を示します。
// ピボットテーブルにヒントを表示します。
myPivotTable.options.showToolTip = true;
serialize メソッドを使用してピボットテーブルデータをシリアル化して保存し、 deserialize メソッドを使用してシリアル化されたピボットテーブルデータを既存のピボットテーブルに復元できます。シリアル化は、次のピボットテーブルデータをサポートします:フィールド、オプション、フィルター、ソート、レイアウト、ピボットテーブルの位置とテーマ。
次のサンプルコードは、ピボットテーブルデータをシリアル化して保存し、シリアル化情報を出力して、データを既存のピボットテーブルに復元します。
// serializeメソッドを使用してピボットテーブルデータを保存します。
serialization = myPivotTable.serialize();
// シリアル化情報を出力します。
info = JSON.stringify(serialization, null, 2);
console.log(info);
// deserializeメソッドを使用してデータを復元します。
myPivotTable.deserialize(serialization);
SpreadJSには、ピボットテーブルのデータソースに空の値が存在する場合、カスタム値を表示するかどうかを選択するためのオプションが用意されています。
showMissing オプションは、実際の値が空の場合に値を表示する必要があるかどうかを示します。ブール値で設定します。デフォルト値はtrueです。
missingCaption オプションは、実際の値が空の場合にに表示する値を示します。文字列と数値を受け入れ、デフォルト値は空です。
次の図は、ピボットテーブルの空白セルに「販売なし」として表示します。
次のサンプルコードは、空白値の代わりに文字列値を表示する方法を示します。
// 空白セルにカスタム値を表示します。
myPivotTable.options.showMissing = true;
myPivotTable.options.missingCaption = "販売なし";
showNoDataメソッドを使用して、ピボットテーブルにデータのないアイテムを表示し、フィールドに空白のセルを表示するかどうかを選択できます。このメソッドは、アイテムを表示するかどうかのフィールド名などのパラメータとブール値を受け入れます。
この設定により、ピボットテーブルでのアイテムの可視性を管理することで、データソースのアイテムを比較できます。 データの可視性は、データに値があるかどうかに依存しません。
次の図は、売り上げがない期間を含む各店舗のデータを示します。
次のサンプルコードは、データのないアイテムを表示する方法を示します。
function initPivotTable(sheet) {
myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark3);
myPivotTable.suspendLayout();
myPivotTable.add("都市", "都市", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("注文日", "注文日", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("製品", "製品", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "注文日", dateGroups: [{ by: GC.Pivot.DateGroupType.months }] };
myPivotTable.group(groupInfo);
myPivotTable.add("数量", "数量", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
// 数量のない商品を表示するには、showNoDataをtrueに設定します。
myPivotTable.showNoData("製品", true);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
return myPivotTable;
}
showDataAs メソッドを使用して、ピボットテーブルデータをさまざまなタイプの計算値として表示できます。このメソッドは、フィールド名と IPivotShowDataAsInfo オブジェクトのプロパティを受け入れます。値フィールドを PivotShowDataAs 列挙体でさまざまな計算に設定できます。
次の図は、ピボットテーブルには[年]フィールドの現在の合計を表示します。
次のサンプルコードは、「年」フィールドに対して現在の合計値を表示する方法を示しています。
// showDataAsメソッドを使用します。
myPivotTable.showDataAs("合計数量", { showDataAs: GC.Pivot.PivotShowDataAs.runTotal, baseFieldName: "年" });
showHeaders プロパティを使用して、ピボットテーブルに行と列の方向にフィールドの名前を表示するかどうかを設定できます。デフォルトではtrueに設定されています。
以下の画像では、ピボットテーブルが行ヘッダーと列ヘッダーを表示および非表示にしています。
次のサンプルコードは、ヘッダーを非表示にする方法を示しています
// ピボットテーブルのヘッダーを非表示にするには、showHeaderオプションをFalseに設定します。
pt.options.showHeaders = false;
スプレッドシートをJSON形式にインポートまたはエクスポートするときに、ピボットテーブルスタイルを維持するか削除するかを選択できます。 toJSON メソッドと fromJSON メソッドの ignorestyle パラメーターをtrueに設定すると、ピボットテーブルの値を保持したままピボットキャッシュとピボットテーブルが削除されます。
次の画像は、JSONファイルからインポートした場合のスタイルのないピボットテーブルを示しています。
次のサンプルコードは、スタイルなしでjsonファイルをインポートまたはエクスポートする方法を示しています。
function bindExcelIOEvent(spread) {
// IgnoreStyleパラメータがtrueに設定されている場合、ssjsonファイルをインポートします。
var openButton = document.getElementById('openButton');
openButton.addEventListener('click', function () {
var file = document.getElementById("importFileName").files[0];
var fileName = file.name;
var suffix = fileName.substr(fileName.lastIndexOf('.'));
if (suffix === '.ssjson' || suffix === 'json') {
var reader = new FileReader();
reader.onload = function () {
var spreadJson = JSON.parse(this.result);
spread.fromJSON(spreadJson, { ignoreStyle: true });
};
reader.readAsText(file);
}
});
// IgnoreStyleオプションがtrueに設定されている場合、ssjsonファイルをエクスポートします。
var saveSSJSONButton = document.getElementById('saveSSJSONButton');
saveSSJSONButton.addEventListener('click', function () {
var fileName = "ExportedFile";
var index = fileName.lastIndexOf('.');
if (index >= 0) {
fileName = fileName.substr(0, index) + '.ssjson';
} else {
fileName += '.ssjson';
}
var json = spread.toJSON({ includeBindingSource: true, ignoreStyle: true }),
text = JSON.stringify(json);
saveAs(new Blob([text], { type: "text/plain;charset=utf-8" }), fileName);
});
}