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

テーマ

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

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

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

  Javascript	コードのコピー
  var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light10);

• 次のthemeオプションを使用することでテーマを設定します。

  Javascript	コードのコピー
  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);
}