このサンプルでは、「受注情報」シートに受注明細などを記入する際に、記入されたデータを売上情報や各集計情報シートに反映します。
「受注情報」シート：
各種セル型や条件付き書式を使用しています。
重量に応じて送料の選択を切り替えます。
出荷状態を出荷済みにチェックすると、出荷日に当日日付が自動入力され、該当行データが売上レポートに計上されます。
「売上情報」シート：
受注情報シートの出荷済みとなるデータをソートし、テーブルで表示します。
スライサーを使うことで、データのフィルタリングができます。
「月集計」シート：
折れ線スパークライン／縦棒スパークラインを使用しています。
複合チャート／円グラフ（ドーナツグラフ）／横棒グラフを使用して、売上の月集計を表示します。
チャートを作成する際に、軸やデータポイント、ホバースタイルを設定し、チャートのスタイルをカスタマイズしています。
「担当者集計」シート：
ブレットスパークライン／積み上げスパークライン／円スパークラインを使用し、売上データの視覚的な表現を実現します。
「請求集計」シート：
ピボットテーブルを使用し、ビューの切り替えで単価／出荷／請求情報を表示します。
フィールド集計とレイアウトの設定を適用しています。
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new spreadNS.Workbook('ss', {
sheetCount: 6
});
// アクティブシート
spread.setActiveSheetIndex(0);
// 初期処理
initSpread(spread);
// 編集終了時、DataSource更新
var sheet = spread.getSheet(0);
sheet.bind(spreadNS.Events.ValueChanged, function (sender, args) {
updateDataSource(spread);
});
};
// ----------------------------------
// function
// ----------------------------------
// 初期処理
function initSpread(spread) {
// スプレッドのスタイルを設定
initSpreadStyle(spread);
// 「受注情報」シート初期化
initOrderSheet(spread);
// 「売上情報」シート初期化
initSalesSheet(spread);
// 「月集計」シート初期化
initMonthSheet(spread);
// 「担当者集計」シート初期化
initChargePersonSheet(spread);
// DataSourceシート
initDataSourceSheet(spread);
// 「請求情報」シート初期化
initInvoiceSheet(spread);
}
/*
スプレッドスタイル初期化
*/
function initSpreadStyle(spread) {
// タブを左に設定
spread.options.tabStripPosition = spreadNS.TabStripPosition.left;
// スプレッド背景色
spread.options.backColor = "#F4F8EB";
// グレー部分の色
spread.options.grayAreaBackColor = "thistle";
}
/*
「受注情報」シート初期化
*/
function initOrderSheet(spread) {
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var sheet = spread.getSheet(0);
// 初期データ読み込み
sheet.setDataSource(data);
// シート名
sheet.name("受注情報");
// セル型を設定
setCellData(sheet);
// カスタマイズヘッダを設定
setCustomHeader(sheet);
// シートのスタイルを設定
setSheetStyle(sheet);
// ホバースタイルを設定
setHoverState(sheet);
// アクティブスタイルを設定
setActiveState(sheet);
// ダーティデータスタイルを設定
setDirtyState(sheet);
// データ検証を設定
setInvalidState(spread);
// 条件付き書式を設定
setConditionalRules(sheet);
spread.resumePaint();
}
/*
「売上情報」シート初期化
*/
function initSalesSheet(spread) {
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var sheet = spread.getSheet(1);
// シート名
sheet.name("売上情報");
sheet.options.backgroundImage = "logo.png";
sheet.options.backgroundImageLayout = spreadNS.ImageLayout.center;
// グリッド線
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
// ヘッダー
var viewport = GC.Spread.Sheets.SheetArea.viewport;
sheet.setValue(0, 0, "受注日付", viewport);
sheet.setValue(0, 1, "受注No.", viewport);
sheet.setValue(0, 2, "製品名", viewport);
sheet.setValue(0, 3, "仕入先", viewport);
sheet.setValue(0, 4, "箱数", viewport);
sheet.setValue(0, 5, "入数", viewport);
sheet.setValue(0, 6, "数量", viewport);
sheet.setValue(0, 7, "単価", viewport);
sheet.setValue(0, 8, "金額", viewport);
sheet.setValue(0, 9, "重量", viewport);
sheet.setValue(0, 10, "送料", viewport);
sheet.setValue(0, 11, "担当者", viewport);
sheet.setValue(0, 12, "出荷状態", viewport);
sheet.setValue(0, 13, "評価", viewport);
sheet.setValue(0, 14, "出荷日", viewport);
var sheet1 = spread.getSheet(0);
var fromRange = [new GC.Spread.Sheets.Range(0, 0, sheet1.getRowCount(), 15)];
var pastedRanges = [
new GC.Spread.Sheets.Range(1, 0, sheet1.getRowCount(), 15),
];
spread.commandManager().execute({
cmd: "clipboardPaste",
sheetName: "売上情報",
fromSheet: sheet1,
fromRanges: fromRange,
pastedRanges: pastedRanges,
isCutting: false,
clipboardText: "",
pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.values,
});
// 不要な列を削除
sheet.deleteColumns(1, 1);
sheet.deleteColumns(3, 4);
sheet.deleteColumns(7, 2);
// テーブルを設定
setToTable(sheet);
// テーブルスライサー設定
setSlicer(sheet);
spread.resumePaint();
}
/*
「月集計」シート初期化
*/
function initMonthSheet(spread) {
spread.suspendPaint();
var sheet = spread.getSheet(2);
// シート名
sheet.name("月集計");
sheet.options.backColor = "lightyellow";
// グリッド線
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
// 列
var dataArray = [["", "5月", "6月", "7月", "8月"]];
sheet.setArray(0, 0, dataArray, false);
// 行
sheet.setValue(1, 0, "日本酒", spreadNS.SheetArea.viewport);
sheet.setValue(2, 0, "ワイン", spreadNS.SheetArea.viewport);
sheet.setValue(3, 0, "ビール", spreadNS.SheetArea.viewport);
sheet.setValue(4, 0, "酎ハイ", spreadNS.SheetArea.viewport);
sheet.setValue(5, 0, "合計", spreadNS.SheetArea.viewport);
// 合計数式
var formulaArray = [
[
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"日本酒",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"日本酒",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"日本酒",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"日本酒",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
],
[
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ワイン",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ワイン",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ワイン",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ワイン",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
],
[
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ビール",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ビール",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ビール",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"ビール",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
],
[
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"酎ハイ",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"酎ハイ",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"酎ハイ",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!C1:C100,"酎ハイ",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
],
["=SUM(B2:B5)", "=SUM(C2:C5)", "=SUM(D2:D5)", "=SUM(E2:E5)"],
];
sheet.setArray(1, 1, formulaArray, true);
// スタイル
sheet
.getRange("A1:G6")
.setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.dotted), {
all: true,
});
sheet
.getRange("B1:G1", spreadNS.SheetArea.viewport)
.backColor({
type: spreadNS.PatternType.darkDown,
backgroundColor: "#D3D3D3",
patternColor: "white",
})
.hAlign(spreadNS.HorizontalAlign.center)
.foreColor("black")
.font("italic");
sheet
.getRange("A2:A6", spreadNS.SheetArea.viewport)
.backColor({
type: spreadNS.PatternType.gray125,
backgroundColor: "#B3B3B3",
patternColor: "white",
})
.hAlign(spreadNS.HorizontalAlign.center)
.foreColor("black");
// 背景色
sheet.getRange("B2:G6", spreadNS.SheetArea.viewport).backColor("white");
// 列幅
sheet.getRange("A:E").width(100);
sheet.getRange("F:G").width(170);
// 行高
sheet.getRange(1, -1, 5, -1, GC.Spread.Sheets.SheetArea.viewport).height(35);
// チャートを追加
setChart(sheet);
// スパークラインを追加
setSparkLine(sheet);
spread.resumePaint();
}
/*
「担当者集計」シート初期化
*/
function initChargePersonSheet(spread) {
var sheet = spread.getSheet(3);
// シート名
sheet.name("担当者集計");
// グリッド線
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
// スタイル
sheet
.getRange("A1:K4")
.setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.dotted), {
all: true,
});
sheet
.getRange("A6:B6")
.setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.medium), {
all: true,
});
sheet
.getRange("B1:K1", spreadNS.SheetArea.viewport)
.backColor({
type: spreadNS.PatternType.darkDown,
backgroundColor: "#D3D3D3",
patternColor: "white",
})
.hAlign(spreadNS.HorizontalAlign.center)
.foreColor("black")
.font("italic bold");
sheet.getRange("B2:K4", spreadNS.SheetArea.viewport).backColor("white");
// スタイル
sheet.getCell(1, 0).backColor("#d8bfd8");
sheet.getCell(2, 0).backColor("#b0c4de");
sheet.getCell(3, 0).backColor("#fffacd");
sheet
.getCell(5, 0)
.backColor("yellow")
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center);
sheet
.getCell(5, 1)
.foreColor("red")
.formatter("#,##0")
.backColor("white")
.hAlign(spreadNS.HorizontalAlign.right)
.vAlign(spreadNS.VerticalAlign.center);
// 列幅
sheet.getRange("A:G").width(80);
sheet.getRange(-1, 7, -1, 1, GC.Spread.Sheets.SheetArea.viewport).width(250);
sheet.getRange(-1, 10, -1, 1, GC.Spread.Sheets.SheetArea.viewport).width(150);
// 行高
sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(35);
sheet.getRange(1, -1, 3, -1, GC.Spread.Sheets.SheetArea.viewport).height(70);
sheet.getRange(5, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(40);
// セル結合
sheet.addSpan(0, 8, 1, 3, GC.Spread.Sheets.SheetArea.viewport);
sheet.addSpan(1, 8, 3, 1, GC.Spread.Sheets.SheetArea.viewport);
sheet.addSpan(1, 9, 3, 2, GC.Spread.Sheets.SheetArea.viewport);
// 列
var dataArray = [
["", "5月", "6月", "7月", "8月", "合計", "予測", "達成度", "貢献率"],
];
sheet.setArray(0, 0, dataArray, false);
// 行
sheet.setValue(1, 0, "山下", spreadNS.SheetArea.viewport);
sheet.setValue(2, 0, "佐藤", spreadNS.SheetArea.viewport);
sheet.setValue(3, 0, "田中", spreadNS.SheetArea.viewport);
sheet.setValue(5, 0, "目標値", spreadNS.SheetArea.viewport);
sheet.setValue(5, 1, 40000, spreadNS.SheetArea.viewport);
// 合計数式
var formulaArray = [
[
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"山下",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"山下",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"山下",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"山下",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
"=SUM(B2:E2)",
"=SUM(B2:D2,8000)",
"=BULLETSPARKLINE(B6,F2,50000,39000,35000,G2,5000)",
"=STACKEDSPARKLINE(F2:F4,,A2:A4,B6,B6,,,,,,TRUE)",
'=PIESPARKLINE(F2:F4,"#d8bfd8","#b0c4de","#fffacd")',
],
[
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"佐藤",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"佐藤",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"佐藤",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"佐藤",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
"=SUM(B3:E3)",
"=SUM(B3:D3,8000)",
"=BULLETSPARKLINE(B6,F3,50000,39000,35000,G3,5000)",
],
[
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"田中",受注情報!A1:A100,"2022/05",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"田中",受注情報!A1:A100,"2022/06",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"田中",受注情報!A1:A100,"2022/07",受注情報!M1:M100,TRUE)',
'=SUMIFS(受注情報!I1:I100,受注情報!L1:L100,"田中",受注情報!A1:A100,"2022/08",受注情報!M1:M100,TRUE)',
"=SUM(B4:E4)",
"=SUM(B4:D4,8000)",
"=BULLETSPARKLINE(B6,F4,50000,39000,35000,G4,5000)",
],
];
sheet.setArray(1, 1, formulaArray, true);
// コメントを設定
setComment(sheet);
}
/*
「請求情報」シート初期化
*/
function initInvoiceSheet(spread) {
var sheet = spread.getSheet(4);
// シート名
sheet.name("請求情報");
// グリッド線
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
// 列幅
sheet.getRange("B:C").width(125);
sheet.getRange("D:P").width(80);
// データ
var range = "=DataSource!$A$1:$O$101";
var layout = GC.Spread.Pivot.PivotTableLayoutType.outline; // ピボットテーブルのビューレイアウト
var theme = GC.Spread.Pivot.PivotTableThemes.dark10;
var options = {
showRowHeader: true,
showColumnHeader: true,
bandRows: true,
bandColumns: true,
};
var pivotTable = sheet.pivotTables.add(
"InvoicePivot",
range,
1,
1,
layout,
theme,
options
);
// デフォルトスタイル
var style1 = new GC.Spread.Sheets.Style();
style1.formatter = "#,##0.0";
pivotTable.setStyle({ dataOnly: true }, style1);
pivotTable.layoutType(1);
pivotTable.suspendLayout();
// ピボットビューマネージャを設定
setViewManager(pivotTable);
// 計算フィールド追加
pivotTable.addCalcField("手数料", "=送料*0.01");
pivotTable.add(
"手数料",
"手数料",
GC.Spread.Pivot.PivotTableFieldType.valueField
);
// 空白データ
pivotTable.options.missingCaption = 0;
// ツールチップ表示
pivotTable.options.showToolTip = true;
// グループ
var groupInfo2 = { originFieldName: "数量", numberGroup: { by: 10 } };
pivotTable.group(groupInfo2);
pivotTable.resumeLayout();
pivotTable.autoFitColumn();
}
/*
DataSourceシート
*/
function initDataSourceSheet(spread) {
var sheet = spread.getSheet(5);
// シート名
sheet.name("DataSource");
// グリッド線
sheet.options.gridline.showHorizontalGridline = true;
sheet.options.gridline.showVerticalGridline = true;
// ヘッダー
var viewport = spreadNS.SheetArea.viewport;
sheet.setValue(0, 0, "受注日付", viewport);
sheet.setValue(0, 1, "受注No.", viewport);
sheet.setValue(0, 2, "製品名", viewport);
sheet.setValue(0, 3, "仕入先", viewport);
sheet.setValue(0, 4, "箱数", viewport);
sheet.setValue(0, 5, "入数", viewport);
sheet.setValue(0, 6, "数量", viewport);
sheet.setValue(0, 7, "単価", viewport);
sheet.setValue(0, 8, "金額", viewport);
sheet.setValue(0, 9, "重量", viewport);
sheet.setValue(0, 10, "送料", viewport);
sheet.setValue(0, 11, "担当者", viewport);
sheet.setValue(0, 12, "出荷状態", viewport);
sheet.setValue(0, 13, "評価", viewport);
sheet.setValue(0, 14, "出荷日", viewport);
// DataSourceを設定
updateDataSource(spread);
}
// ----------------------------------
// 受注情報シート_内部メソッド
// ----------------------------------
// シートのスタイルを設定
function setSheetStyle(sheet) {
// グリッド線
sheet.options.gridline.showHorizontalGridline = true; // 水平
sheet.options.gridline.showVerticalGridline = false; // 垂直
// 列幅を設定
sheet.getRange("A:C").width(90);
sheet.setColumnWidth(3, 120, GC.Spread.Sheets.SheetArea.viewport);
sheet.getRange("E:J").width(60);
sheet.getRange("K:N").width(90);
sheet.setColumnWidth(14, 120, GC.Spread.Sheets.SheetArea.viewport);
// スタイル
sheet
.getRange("A1:D100")
.setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.dashDot), {
all: true,
});
sheet
.getRange("E1:O100")
.setBorder(new spreadNS.LineBorder("black", spreadNS.LineStyle.hair), {
all: true,
});
// 選択領域の色
sheet.options.selectionBorderColor = "gold";
sheet.options.selectionBackColor = "rgba(100,255,51, 0.4)";
// 行と列の固定
sheet.frozenColumnCount(4);
}
// カスタマイズヘッダを設定
function setCustomHeader(sheet) {
var rowHeader = spreadNS.SheetArea.rowHeader;
var colHeader = spreadNS.SheetArea.colHeader;
sheet.suspendPaint();
// 複数の列ヘッダを設定
sheet.setRowCount(2, spreadNS.SheetArea.colHeader); // 列ヘッダを２行に設定
// カスタマイズヘッダ
sheet.addSpan(0, 0, 2, 1, colHeader);
sheet.addSpan(0, 1, 2, 1, colHeader);
sheet.addSpan(0, 2, 2, 1, colHeader);
sheet.addSpan(0, 3, 2, 1, colHeader);
sheet.addSpan(0, 11, 2, 1, colHeader);
sheet.addSpan(0, 12, 2, 1, colHeader);
sheet.addSpan(0, 13, 2, 1, colHeader);
sheet.addSpan(0, 14, 2, 1, colHeader);
sheet.addSpan(0, 4, 1, 7, colHeader);
sheet.setValue(0, 0, "受注日付", colHeader);
sheet.setValue(0, 1, "受注No.", colHeader);
sheet.setValue(0, 2, "製品名", colHeader);
sheet.setValue(0, 3, "仕入先", colHeader);
sheet.setValue(0, 4, "受注明細", colHeader);
sheet.setValue(0, 11, "担当者", colHeader);
sheet.setValue(0, 12, "出荷状態", colHeader);
sheet.setValue(0, 13, "評価", colHeader);
sheet.setValue(0, 14, "出荷日", colHeader);
sheet.setValue(1, 4, "箱数", colHeader);
sheet.setValue(1, 5, "入数", colHeader);
sheet.setValue(1, 6, "数量", colHeader);
sheet.setValue(1, 7, "単価", colHeader);
sheet.setValue(1, 8, "金額", colHeader);
sheet.setValue(1, 9, "重量", colHeader);
sheet.setValue(1, 10, "送料", colHeader);
// グループ化
sheet.rowOutlines.group(1, 23);
sheet.rowOutlines.group(25, 22);
sheet.rowOutlines.group(48, 25);
sheet.rowOutlines.group(74, 25);
sheet.rowOutlines.group(1, 99);
sheet.columnOutlines.group(4, 7);
sheet.columnOutlines.direction(
spreadNS.Outlines.OutlineDirection.backward // 集計列のボタンを左に設定
);
// 列ヘッダのスタイル
var style = new spreadNS.Style();
style.font = "bold 18px Arial";
style.foreColor = "black";
style.backColor = "#87c1ff";
style.hAlign = spreadNS.HorizontalAlign.center;
style.vAlign = spreadNS.VerticalAlign.center;
sheet.setRowHeight(0, 30, spreadNS.SheetArea.colHeader);
sheet.setRowHeight(1, 30, spreadNS.SheetArea.colHeader);
for (var i = 0; i < 15; i++) {
sheet.setStyle(0, i, style, spreadNS.SheetArea.colHeader);
}
var style2 = new spreadNS.Style();
style2.font = "bold 15px Arial";
style2.backColor = "#e3eefa";
for (var i = 0; i < 14; i++) {
sheet.setStyle(1, i, style2, spreadNS.SheetArea.colHeader);
}
sheet.resumePaint();
}
// セル型を設定
function setCellData(sheet) {
var range = new spreadNS.Range(0, 0, 100, 3);
// タブ色
sheet.options.sheetTabColor = "gold";
// 数式設定
for (var i = 0; i < sheet.getRowCount(); i++) {
var r = i + 1;
// 金額
sheet.setFormula(i, 8, "=G" + r + "*H" + r);
// 送料
sheet.setFormula(i, 10, "=IF(J" + r + "<30,0,300)");
// 出荷日
sheet.setFormula(i, 14, "=IF(M" + r + ',TODAY(),"")');
}
// 自動マージ
sheet.autoMerge(range, spreadNS.AutoMerge.AutoMergeDirection.none);
sheet.autoMerge(
range,
spreadNS.AutoMerge.AutoMergeDirection.column,
0,
spreadNS.SheetArea.viewport,
1
);
// ラジオボタン
setRadioCell(sheet);
// コンボボックス
setComboCell(sheet);
// チェックボックス
setCheckBoxCell(sheet);
// スライダー
setSliderCell(sheet);
// 日付
setDateCell(sheet);
}
// ホバースタイルを設定
function setHoverState(sheet) {
sheet.suspendPaint();
var cfs = sheet.conditionalFormats;
var style = new spreadNS.Style("rgb(164, 236, 252)");
var rowRange = new spreadNS.Range(-1, -1, -1, -1);
cfs.addRowStateRule(spreadNS.RowColumnStates.hover, style, [rowRange]);
sheet.resumePaint();
}
// アクティブスタイルを設定
function setActiveState(sheet) {
sheet.suspendPaint();
var cfs = sheet.conditionalFormats;
var style = new spreadNS.Style("rgb(227, 215, 250)");
var rowRange = new spreadNS.Range(-1, -1, -1, -1);
cfs.addRowStateRule(spreadNS.RowColumnStates.active, style, [rowRange]);
sheet.resumePaint();
}
// ダーティデータスタイルを設定
function setDirtyState(sheet) {
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style();
style.foreColor = "navy";
style.backColor = "#e4d2d8";
var rowRange = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [
rowRange,
]);
}
// データ検証を設定
function setInvalidState(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
spread.options.highlightInvalidData = true; // 強調表示
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(247, 101, 101)");
var columnRange = new GC.Spread.Sheets.Range(0, -1, sheet.getRowCount(), -1);
var dv = GC.Spread.Sheets.DataValidation.createNumberValidator(
GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators
.lessThanOrEqualsTo,
"90",
"",
false
);
dv.showInputMessage(true);
dv.inputMessage("90kg以上の荷物は受け付けません。");
sheet.setDataValidator(columnRange.row, 9, columnRange.rowCount, 1, dv);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [
columnRange,
]);
sheet.resumePaint();
}
// 条件付き書式を設定
function setConditionalRules(sheet) {
// 評価（アイコン）
let iconSetRule = sheet.conditionalFormats.addIconSetRule(
spreadNS.ConditionalFormatting.IconSetType.fiveArrowsColored, // 色付き矢印
[new spreadNS.Range(0, 13, sheet.getRowCount(), 1)]
);
iconSetRule.reverseIconOrder(false); // アイコンの順序を反転しない
iconSetRule.showIconOnly(false); // アイコンと数値を表示
sheet
.getRange(0, 13, sheet.getRowCount(), 1)
.vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet
.getRange(0, 13, sheet.getRowCount(), 1)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
// 金額（スケール値）
var dataBarRule = sheet.conditionalFormats.addDataBarRule(
spreadNS.ConditionalFormatting.ScaleValueType.lowestValue,
null,
spreadNS.ConditionalFormatting.ScaleValueType.highestValue,
null,
"#f39800",
[new spreadNS.Range(0, 8, sheet.getRowCount(), 1)]
);
dataBarRule.gradient(true); // グラデーション表示するか
dataBarRule.showBorder(false); // ボーダー表示するか
dataBarRule.showBarOnly(false); // データバーをテキストなしで表示するか
}
// ラジオボタン
function setRadioCell(sheet) {
for (var i = 0; i < 100; i++) {
var radio = new spreadNS.CellTypes.RadioButtonList();
radio.direction(spreadNS.CellTypes.Direction.vertical);
radio.textAlign(spreadNS.CellTypes.TextAlign.right);
radio.isFlowLayout(false);
radio.maxColumnCount(2);
radio.boxSize(10);
radio.items([
{ text: "0", value: 0 },
{ text: "300", value: 300 },
]);
sheet.setCellType(i, 10, radio, spreadNS.SheetArea.viewport);
sheet
.getCell(i, 10)
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center);
}
}
// コンボボックス
function setComboCell(sheet) {
for (var i = 0; i < 100; i++) {
var combo = new spreadNS.CellTypes.ComboBox();
combo
.items([
{ text: "山下", value: "0" },
{ text: "佐藤", value: "1" },
{ text: "田中", value: "2" },
])
.editorValueType(spreadNS.CellTypes.EditorValueType.text);
combo.itemHeight(24);
combo.editable(true);
sheet.setCellType(i, 11, combo, spreadNS.SheetArea.viewport);
}
}
// チェックボックス
function setCheckBoxCell(sheet) {
for (var i = 0; i < 100; i++) {
var cell = new spreadNS.CellTypes.CheckBox();
cell.textTrue("発送済");
sheet.setCellType(i, 12, cell, spreadNS.SheetArea.viewport);
sheet
.getCell(i, 12)
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center);
}
}
// スライダー
function setSliderCell(sheet) {
var style = new spreadNS.Style();
style.cellButtons = [
{
imageType: spreadNS.ButtonImageType.dropdown,
command: "openSlider",
useButtonStyle: true,
},
];
style.dropDowns = [
{
type: spreadNS.DropDownType.slider,
option: {
marks: [0, 5, 10],
min: 0,
max: 10,
step: 1,
direction: spreadNS.LayoutDirection.horizontal,
},
},
];
for (var i = 0; i < 100; i++) {
sheet.getCell(i, 13).setStyle(style);
}
}
// 日付
function setDateCell(sheet) {
for (var i = 0; i < 100; i++) {
var style = new spreadNS.Style();
style.cellButtons = [
{
imageType: spreadNS.ButtonImageType.dropdown,
command: "openDateTimePicker",
useButtonStyle: false,
},
];
style.dropDowns = [
{
type: spreadNS.DropDownType.dateTimePicker,
option: {
showTime: false,
},
},
];
sheet.getCell(i, 14).setStyle(style);
sheet.getCell(i, 14).formatter("[$-411]ggg ee/mm/dd"); // 和暦日付
}
}
// ----------------------------------
// 売上情報シート_内部メソッド
// ----------------------------------
// テーブルを設定
function setToTable(sheet) {
var chkTable = sheet.tables.findByName("SalesDataTable");
if (!chkTable) {
var table = sheet.tables.add(
"SalesDataTable",
0,
0,
101,
8,
spreadNS.Tables.TableThemes.medium14
);
table.autoGenerateColumns(true); // カラム名自動生成
// フッター設定
table.showFooter(true, false);
table.useFooterDropDownList(true);
// フィルタ設定
var rowFilter = table.rowFilter();
var condition = new spreadNS.ConditionalFormatting.Condition(
spreadNS.ConditionalFormatting.ConditionType.textCondition,
{
compareType: spreadNS.ConditionalFormatting.TextCompareType.notEqualsTo,
expected: "",
}
);
rowFilter.addFilterItem(7, condition);
rowFilter.filter();
// サイズ変更のハンドル
table.showResizeHandle(true);
// 列幅
sheet.getRange("A:B").width(90);
sheet.getRange("C:C").width(120);
sheet.getRange("D:F").width(70);
sheet.getRange("G:I").width(80);
sheet.getRange("J:J").width(100);
// 自動マージ
var range = new GC.Spread.Sheets.Range(0, 0, 100, 2);
sheet.autoMerge(
range,
GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column,
0,
GC.Spread.Sheets.SheetArea.viewport,
2
);
}
}
// テーブルスライサー設定
function setSlicer(sheet) {
// シートの列数を増やす
sheet.setColumnCount(15, GC.Spread.Sheets.SheetArea.viewport);
var chkTable = sheet.tables.findByName("SalesDataTable");
if (chkTable) {
// 製品名
var slicer1 = sheet.slicers.add(
"ProductSlicer",
"SalesDataTable",
"製品名"
);
slicer1.position(new spreadNS.Point(680, -1));
// 仕入先
var slicer2 = sheet.slicers.add(
"CustomerSlicer",
"SalesDataTable",
"仕入先"
);
slicer2.position(new spreadNS.Point(880, -1));
// 担当者
var slicer3 = sheet.slicers.add(
"ChargePersonSlicer",
"SalesDataTable",
"担当者"
);
slicer3.position(new spreadNS.Point(680, 280));
// スライサーのスタイル
slicer1.style(spreadNS.Slicers.SlicerStyles.dark4());
slicer2.style(spreadNS.Slicers.SlicerStyles.dark6());
slicer3.style(spreadNS.Slicers.SlicerStyles.dark3());
}
}
// ----------------------------------
// 月集計シート_内部メソッド
// ----------------------------------
// チャートを追加
function setChart(sheet) {
// チャート1：複合チャート
var chart1 = sheet.charts.add(
"売上",
spreadNS.Charts.ChartType.columnClustered, // 集合縦棒
0,
220,
640,
400
);
chart1.series().add({
chartType: spreadNS.Charts.ChartType.columnClustered, // 集合縦棒
axisGroup: spreadNS.Charts.AxisGroup.primary, // 主軸グループ
name: "月集計!$A$2",
xValues: "月集計!$B$1:$E$1",
yValues: "月集計!$B$2:$E$2",
});
chart1.series().add({
chartType: spreadNS.Charts.ChartType.columnClustered, // 集合縦棒
axisGroup: spreadNS.Charts.AxisGroup.primary, // 主軸グループ
name: "月集計!$A$3",
xValues: "月集計!$B$1:$E$1",
yValues: "月集計!$B$3:$E$3",
});
chart1.series().add({
chartType: spreadNS.Charts.ChartType.columnClustered, // 集合縦棒
axisGroup: spreadNS.Charts.AxisGroup.primary, // 主軸グループ
name: "月集計!$A$4",
xValues: "月集計!$B$1:$E$1",
yValues: "月集計!$B$4:$E$4",
});
chart1.series().add({
chartType: spreadNS.Charts.ChartType.columnClustered, // 集合縦棒
axisGroup: spreadNS.Charts.AxisGroup.primary, // 主軸グループ
name: "月集計!$A$5",
xValues: "月集計!$B$1:$E$1",
yValues: "月集計!$B$5:$E$5",
});
chart1.series().add({
chartType: spreadNS.Charts.ChartType.lineMarkers, // マーカー付き折れ線
axisGroup: spreadNS.Charts.AxisGroup.secondary, // 補助軸グループ
name: "月集計!$A$6",
xValues: "月集計!$B$1:$E$1",
yValues: "月集計!$B$6:$E$6",
});
// 折れ線データマーカー
var ser1 = chart1.series().get(4);
ser1.symbol = {
fill: "#f8b500",
fillColorTransparency: 0.3,
size: 20,
shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,
border: {
color: "blue",
width: 1,
lineType: GC.Spread.Sheets.Charts.LineType.solid,
colorTransparency: 0.5,
},
};
chart1.series().set(4, ser1);
// チャートタイトル
var title = chart1.title();
title.text = "売上集計";
title.fontSize = 28;
title.color = "darkorange";
chart1.title(title);
// 軸
var axes = chart1.axes();
// チャートの第1カテゴリ軸
axes.primaryValue.title.fontSize = 16;
axes.primaryValue.style.color = "plum";
axes.primaryValue.title.color = "plum";
axes.primaryValue.title.text = "売上金額（千円）";
axes.primaryValue.title.fontSize = 14;
axes.primaryValue.displayUnit = {
// 軸の表示単位に組み込み型に1000を設定
unit: spreadNS.Charts.DisplayUnit.thousands,
visible: true,
};
// チャートの第2カテゴリ軸
axes.secondaryCategory.title.fontSize = 16;
axes.secondaryValue.style.color = "blue";
axes.secondaryValue.title.color = "blue";
axes.secondaryValue.title.text = "合計売上金額（円）";
chart1.axes(axes);
// データポイント(ビール、8月)
var seriesStyle = chart1.series().get(2);
seriesStyle.dataPoints[3] = {
backColor: "#2ca9e1",
backColorTransparency: 0.4,
border: {
color: "orange",
lineType: 4,
transparency: 0.2,
width: 4,
},
};
chart1.series().set(2, seriesStyle);
// 凡例
var legend = chart1.legend();
legend.position = spreadNS.Charts.LegendPosition.bottom;
legend.backColor = "lightpink";
legend.backColorTransparency = 0.8;
legend.fontFamily = "Arial";
legend.fontSize = 11;
legend.color = "green";
legend.borderStyle.color = "red";
legend.borderStyle.transparency = 0.3;
legend.borderStyle.width = 1.5;
legend.showLegendWithoutOverlapping = true; // 凡例がチャート領域と重ならないように表示
chart1.legend(legend);
// データラベル
var dataLabels = chart1.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.fontSize = 9;
var dataLabelPosition = spreadNS.Charts.DataLabelPosition; // データラベルが配置される位置
dataLabels.position = dataLabelPosition.outsideEnd; // 上部
chart1.dataLabels(dataLabels);
var series0 = chart1.series().get(0);
series0.dataLabels = {
showSeriesName: true,
showCategoryName: true,
separator: ",",
position: spreadNS.Charts.DataLabelPosition.above,
color: "red",
backColor: "lightblue",
borderColor: "orange",
borderWidth: 0.5,
};
chart1.series().set(0, series0);
// ホバースタイル
var hoverStyle = chart1.hoverStyle();
if (!hoverStyle) {
hoverStyle = {};
}
hoverStyle.color = "green";
hoverStyle.transparency = 0.8;
if (!hoverStyle.borderStyle) {
hoverStyle.borderStyle = {};
}
hoverStyle.borderStyle.transparency = 0.1;
hoverStyle.borderStyle.color = "#ff1493";
hoverStyle.borderStyle.width = 1;
hoverStyle.borderStyle.dashStyle = spreadNS.Charts.LineType.dashDot;
// シンボル
if (!hoverStyle.symbolStyle) {
hoverStyle.symbolStyle = {};
}
hoverStyle.symbolStyle.color = "yellow";
hoverStyle.symbolStyle.transparency = 0.1;
if (!hoverStyle.symbolStyle.borderStyle) {
hoverStyle.symbolStyle.borderStyle = {};
}
hoverStyle.symbolStyle.borderStyle.transparency = 0.1;
hoverStyle.symbolStyle.borderStyle.color = "rgb(0, 0, 255)";
hoverStyle.symbolStyle.borderStyle.width = 9;
hoverStyle.symbolStyle.borderStyle.dashStyle =
spreadNS.Charts.LineType.lgDash;
chart1.hoverStyle(hoverStyle);
// アニメーション
chart1.useAnimation(true);
// チャート2：円チャート
var chart2 = sheet.charts.add(
"doughnut",
spreadNS.Charts.ChartType.doughnut, // ドーナツ
670,
220,
640,
400,
"A1:E5"
);
var series2 = chart2.series().get();
// データポイント
for (var i = 0; i < series2.length; i++) {
var seriesItem = series2[i];
seriesItem.dataPoints = {
0: {
backColor: "rgb(112, 173, 71)",
},
1: {
backColor: "rgb(255,20,128)",
},
2: {
backColor: "rgb(68, 114, 196)",
},
3: {
backColor: "rgb(255, 192, 0)",
},
};
seriesItem.border.width = 4;
seriesItem.doughnutHoleSize = 0.3;
chart2.series().set(i, seriesItem);
}
// データラベル
var dataLabels2 = chart2.dataLabels();
dataLabels2.showValue = false;
dataLabels2.showSeriesName = true;
dataLabels2.showCategoryName = false;
dataLabels2.showPercentage = true;
var dataLabelPosition = spreadNS.Charts.DataLabelPosition;
dataLabels2.position = dataLabelPosition.bestFit;
chart2.dataLabels(dataLabels2);
// チャートエリア
var chartArea = chart2.chartArea();
chartArea.backColor = {
type: spreadNS.Charts.PatternType.dottedPercent20,
foregroundColor: "rgb(184, 238, 242)",
backgroundColor: "background 1 0",
};
chartArea.backColorTransparency = 0.6;
chartArea.color = "navy";
chartArea.transparency = 0.3;
chartArea.border.color = "navy";
chartArea.border.transparency = 0.3;
chartArea.border.width = 1.5;
chartArea.border.dashStyle = spreadNS.Charts.LineType.dash;
chart2.chartArea(chartArea);
// チャートタイトル
var title = chart2.title();
title.text = "製品シェア";
title.fontSize = 28;
chart2.title(title);
// 凡例
var legend2 = chart2.legend();
legend2.position = spreadNS.Charts.LegendPosition.bottom;
legend2.fontFamily = "Arial";
legend2.fontSize = 14;
legend2.showLegendWithoutOverlapping = true;
chart2.legend(legend2);
// アニメーション
chart2.useAnimation(true);
// チャート3：100%積み上げ横棒
var chart3 = sheet.charts.add(
"barStacked100",
GC.Spread.Sheets.Charts.ChartType.barStacked100,
0,
650,
640,
320,
"A1:E5"
);
// データラベル
var dataLabels3 = chart3.dataLabels();
dataLabels3.showValue = true;
dataLabels3.showSeriesName = true;
dataLabels3.showCategoryName = false;
dataLabels3.showPercentage = false;
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels3.position = dataLabelPosition.bestFit;
chart3.dataLabels(dataLabels3);
// チャートエリア
var chartArea3 = chart3.chartArea();
chartArea3.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.lightVertical,
foregroundColor: "rgb(184, 238, 242)",
backgroundColor: "background 1 1",
};
chartArea3.backColorTransparency = 0.6;
chartArea3.color = "#942343";
chartArea3.transparency = 0.3;
chartArea3.border.color = "#004d25";
chartArea3.border.transparency = 0.3;
chartArea3.border.width = 1.5;
chartArea3.border.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDashDot;
chart3.chartArea(chartArea3);
// タイトル
var title3 = chart3.title();
title3.text = "月集計";
title3.fontSize = 24;
chart3.title(title3);
// 凡例
var legend3 = chart3.legend();
legend3.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
legend3.backColor = "lightpink";
legend3.backColorTransparency = 0.8;
legend3.fontFamily = "Arial";
legend3.fontSize = 11;
legend3.color = "green";
legend3.borderStyle.color = "red";
legend3.borderStyle.transparency = 0.3;
legend3.borderStyle.width = 1.5;
legend3.showLegendWithoutOverlapping = true;
chart3.legend(legend3);
// アニメーション
chart3.useAnimation(true);
}
// スパークラインを追加
function setSparkLine(sheet) {
var setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 1;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
setting.options.displayEmptyCellsAs =
spreadNS.Sparklines.EmptyValueStyle.Zero;
setting.options.markersColor = "Magenta";
setting.options.axisColor = "Cyan";
// 折れ線スパークライン
sheet.setValue(0, 5, "月の推移", spreadNS.SheetArea.viewport);
for (let r = 1; r < 6; r++) {
var data = new spreadNS.Range(r, 1, 1, 4);
sheet.setSparkline(
r,
5,
data,
spreadNS.Sparklines.DataOrientation.horizontal,
spreadNS.Sparklines.SparklineType.line,
setting
);
}
// 縦棒スパークライン
sheet.setValue(0, 6, "月の推移(2)", spreadNS.SheetArea.viewport);
for (let r = 1; r < 6; r++) {
var data = new spreadNS.Range(r, 1, 1, 4);
sheet.setSparkline(
r,
6,
data,
spreadNS.Sparklines.DataOrientation.horizontal,
spreadNS.Sparklines.SparklineType.column,
setting
);
}
}
// ----------------------------------
// 担当者集計シート_内部メソッド
// ----------------------------------
// コメントを設定
function setComment(sheet) {
var comment = new spreadNS.Comments.Comment();
comment.text(
"赤線：実績, 青線：予測, 黒棒：目標値, 灰色：不十分, 浅灰色：良好"
);
comment.backColor("yellow");
comment.foreColor("green");
comment.fontStyle("Bold");
comment.displayMode(spreadNS.Comments.DisplayMode.hoverShown); // ホバー時に表示
sheet.getCell(0, 7).comment(comment);
}
// ----------------------------------
// 請求情報シート_内部メソッド
// ----------------------------------
// ピボットビューマネージャを設定
function setViewManager(pivotTable) {
// ビュー1：空白
var emptyPT = "空白";
pivotTable.views.save(emptyPT);
pivotTable.views.apply(emptyPT);
// ビュー2：単価レポート
var view2 = "単価レポート";
pivotTable.add(
"製品名",
"製品名",
GC.Spread.Pivot.PivotTableFieldType.rowField // フィールド領域:行
);
pivotTable.add(
"仕入先",
"仕入先",
GC.Spread.Pivot.PivotTableFieldType.rowField // フィールド領域:行
);
pivotTable.add(
"単価",
"単価",
GC.Spread.Pivot.PivotTableFieldType.valueField // フィールド領域:値
);
pivotTable.add(
"評価",
"平均/評価",
GC.Spread.Pivot.PivotTableFieldType.valueField, // フィールド領域:値
GC.Pivot.SubtotalType.average
);
pivotTable.add(
"受注日付",
"受注日付",
GC.Spread.Pivot.PivotTableFieldType.columnField // フィールド領域:列
);
pivotTable.add(
"数量",
"数量",
GC.Spread.Pivot.PivotTableFieldType.filterField // フィールド領域:フィルタ
);
// レイアウト
pivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.outline); // アウトライン
// スタイル
var style1 = new spreadNS.Style();
style1.formatter = "#,##0.0";
pivotTable.setStyle({ dataOnly: true }, style1);
pivotTable.autoFitColumn();
// ツールチップ
pivotTable.options.showToolTip = true;
// 折り畳み設定
pivotTable.collapse("仕入先", "よろず商店", false);
pivotTable.collapse("仕入先", "喫茶なんごく", false);
pivotTable.collapse("仕入先", "小町屋台", false);
pivotTable.collapse("仕入先", "居酒屋ななべえ", false);
pivotTable.collapse("仕入先", "雪花株式会社", false);
// ビュー適用
pivotTable.views.save(view2);
pivotTable.views.apply(emptyPT);
// ビュー3：出荷レポート
var view3 = "出荷レポート";
pivotTable.add(
"仕入先",
"仕入先",
GC.Spread.Pivot.PivotTableFieldType.rowField // フィールド領域:行
);
pivotTable.add(
"製品名",
"製品名",
GC.Spread.Pivot.PivotTableFieldType.rowField // フィールド領域:行
);
pivotTable.add(
"数量",
"数量",
GC.Spread.Pivot.PivotTableFieldType.columnField // フィールド領域:列
);
pivotTable.add(
"重量",
"重量",
GC.Spread.Pivot.PivotTableFieldType.valueField, // フィールド領域:値
GC.Pivot.SubtotalType.sum
);
pivotTable.add(
"出荷状態",
"出荷状態",
GC.Spread.Pivot.PivotTableFieldType.filterField // フィールド領域:フィルタ
);
pivotTable.add(
"出荷日",
"出荷日",
GC.Spread.Pivot.PivotTableFieldType.filterField // フィールド領域:フィルタ
);
// レイアウト
pivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.outline); // アウトライン
// スタイル
pivotTable.setStyle({ dataOnly: true }, style1);
pivotTable.autoFitColumn();
// ツールチップ
pivotTable.options.showToolTip = true;
// 折り畳み設定
pivotTable.collapse("仕入先", "よろず商店", false);
pivotTable.collapse("仕入先", "喫茶なんごく", false);
pivotTable.collapse("仕入先", "小町屋台", false);
pivotTable.collapse("仕入先", "居酒屋ななべえ", false);
pivotTable.collapse("仕入先", "雪花株式会社", false);
// ビュー適用
pivotTable.views.save(view3);
pivotTable.views.apply(emptyPT);
// ビュー4：請求レポート
var view4 = "請求レポート";
pivotTable.add(
"仕入先",
"仕入先",
GC.Spread.Pivot.PivotTableFieldType.rowField // フィールド領域:行
);
pivotTable.add(
"受注日付",
"受注日付",
GC.Spread.Pivot.PivotTableFieldType.rowField // フィールド領域:行
);
pivotTable.add(
"製品名",
"製品名",
GC.Spread.Pivot.PivotTableFieldType.columnField // フィールド領域:列
);
pivotTable.add(
"金額",
"総金額",
GC.Spread.Pivot.PivotTableFieldType.valueField, // フィールド領域:値
GC.Pivot.SubtotalType.sum
);
pivotTable.add(
"送料",
"総送料",
GC.Spread.Pivot.PivotTableFieldType.valueField, // フィールド領域:値
GC.Pivot.SubtotalType.sum
);
pivotTable.add(
"担当者",
"担当者",
GC.Spread.Pivot.PivotTableFieldType.filterField // フィールド領域:フィルタ
);
pivotTable.add(
"手数料",
"手数料",
GC.Spread.Pivot.PivotTableFieldType.valueField // フィールド領域:値
);
// レイアウト
pivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.compact); // コンパクト式
// ツールチップ
pivotTable.options.showToolTip = true;
// スタイル
pivotTable.setStyle({ dataOnly: true }, style1);
pivotTable.autoFitColumn();
// 折り畳み
pivotTable.collapse("仕入先", "居酒屋ななべえ", true);
pivotTable.collapse("仕入先", "雪花株式会社", true);
// ビュー適用
pivotTable.views.save(view4);
pivotTable.views.apply(view4);
return pivotTable;
}
// DataSourceを更新
function updateDataSource(spread) {
// 受注情報よりデータをコピーペースト
var sheet1 = spread.getSheet(0);
var sheet = spread.getSheet(5);
var fromRange = [new GC.Spread.Sheets.Range(0, 0, sheet1.getRowCount(), 15)];
var pastedRanges = [
new GC.Spread.Sheets.Range(1, 0, sheet1.getRowCount(), 15),
];
spread.commandManager().execute({
cmd: "clipboardPaste",
sheetName: "DataSource",
fromSheet: sheet1,
fromRanges: fromRange,
pastedRanges: pastedRanges,
isCutting: false,
clipboardText: "",
pasteOption: spreadNS.ClipboardPasteOptions.values,
});
// 幅を自動調整
for (var i = 0; i < sheet.getColumnCount(spreadNS.SheetArea.viewport); i++) {
sheet.autoFitColumn(i);
}
}
3<!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-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.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-languagepackages/dist/gc.spread.calcengine.languagepackages.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/sales-app-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" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.cmdReactionGood {
background-image: url("$DEMOROOT$/spread/source/images/iine.png");
background-size: 35px 35px;
}
.gc-spread-pivot-toolTip {
position: fixed !important;
}
