テーマおよびスタイル

SpreadJSでは、ピボットテーブルにテーマやスタイルを適用することで外観を変更することができます。

テーマ

SpreadJSは、ピボットテーブルに適用できる29の淡色テーマ、28の中色テーマと28の濃色テーマを提供します。次の図は、light10テーマを表示します。

ピボットテーブルにテーマを設定

次のいずれかの方法を使用してピボットテーブルのテーマを変更することができます。

スプレッドシートにピボットテーブルを追加する際にテーマを設定します。次のコードを参照してください。

var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light10);

次の theme オプションを使用することでテーマを設定します。
```
myPivotTable.theme(GC.Spread.Pivot.PivotTableThemes.light10);
```

スタイル

特定のデータを強調表示するには、ピボットテーブルのスタイルを適用できます。行および列フィールドにスタイルを適用するには、 style メソッドを使用できます。次の図は、ピボットテーブルの列フィールドに適用したスタイルを表示します。

スタイル設定

次のサンプルコードは、列フィールドにスタイルを適用する方法を示します。

function setMarkSubtotalPivotTableStyle(pivotTable) {
    // 四半期総計を特定の色で表示するには、スタイルを作成します。
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "#03A685";
    let subtotalLabelPivotArea = {
        labelOnly: true,
        references: [{
            fieldName: "Qt",
            subtotal: true,
            items: ["第1四半期", "第2四半期", "第3四半期", "第4四半期"]
        }]
    };
    // Qtr Totalを特定の色で表示するには、スタイルを設定します。
    pivotTable.setStyle(subtotalLabelPivotArea, style);
    let subtotalDataPivotArea = {
        dataOnly: true,
        references: [{
            fieldName: "四半期",
            subtotal: true,
            items: ["第1四半期", "第2四半期", "第3四半期", "第4四半期"]
        }]
    };
    pivotTable.setStyle(subtotalDataPivotArea, style);
}

次の図は、ピボットテーブルの行フィールドに適用したスタイルを表示します。

スタイルの設定

次のサンプルコードは、行フィールドにスタイルを適用する方法を示します。

function setMarkSeattlePivotTableStyle(pivotTable) {
    // Seattle市の行を表示するスタイルを作成して設定します。
    let seattlePivotArea = {
        references: [{
            fieldName: "都市",
            items: ["静岡市"],
            applyLabel: true,
            applyData: true,
            applyGrandTotal: true,
            applySubtotal: true
        }]
    };
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "yellow";
    pivotTable.setStyle(seattlePivotArea, style);
}

ピボットエリアのオフセットの設定

SpreadJSは、特定のピボットエリアのスタイルを設定するためのoffsetプロパティを提供しています。デフォルトのオフセットは、ピボットエリアの左上のセル（0,0）を基準セルとして範囲を定義します。

row、col、rowCount、colCount を含む IPivotAreaOffset インタフェースを実装して、offset プロパティを設定できます。

row とcol は、基本セルの行と列のオフセットを表します。
rowCount と colCount は、スタイルを設定する行と列の数を表します。

ただし、オフセットはコーナーエリア、右上のエリア、合計エリア、行ヘッダエリアなど指定された領域のみ動作します。

row、col、rowCount、colCount を設定するルールは次のとおりです。

rowCount と colCount が数値でないか、2 未満の場合は、1 として扱われます。
row と col が無限大の場合は、ピボットエリアの最後の行を表します。
rowCount と colCount が無限大の場合は、ピボットテーブルの最後の行または列までの数を示します。

例

次の図は、2 つの異なるケースを示しています。1番目のケースでは、ラベル参照を使用して offset プロパティを設定します。2番目のケースでは、PivotAreaType 列挙体を使用して特定のピボットエリアをコーナーとして定義し、offset プロパティを設定してピボットエリアを指定します。

pivotarea

次のサンプルコードは、特定のピボットエリアの offset プロパティを設定する方法を示します。

let style = new GC.Spread.Sheets.Style();
style.backColor = "rgb(247, 167, 17)";
let labelPivotAreaWithOffset = {
    labelOnly: true,
    references: [{
        fieldName: "県",
        items: ["京都府"]
    }],
    offset: {
        row: 0,
        col: 0,
        rowCount: 2,
        colCount: 1
    }
};
pivotTable.setStyle(labelPivotAreaWithOffset, style);
let cornerPivotAreaWithOffset = {
    type: GC.Spread.Pivot.PivotAreaType.corner,
    offset: {
        row: 0,
        col: 1,
        rowCount: 1,
        colCount: 1
    }
};
pivotTable.setStyle(labelPivotAreaWithOffset, style);
let cornerPivotAreaWithOffset = {
    type: GC.Spread.Pivot.PivotAreaType.corner,
    offset: {
        row: 0,
        col: 1,
        rowCount: 1,
        colCount: 1
    }
};
pivotTable.setStyle(cornerPivotAreaWithOffset, style);