タイムラインスライサー

SpreadJSのピボットテーブルは、タイムラインスライサーをサポートしており、日付のスライス操作を簡単に行うことができます。

以下のデモでは、スライサーをクリックすることで、すべてのプロパティを確認できます。

ピボットテーブルのタイムラインスライサーは、テーブルスライサーと同様に、SlicerCollection(WorkSheet.slicers)で管理されます。 タイムラインスライサーは、日付フィールドにのみ追加できます。 タイムラインスライサーによる変更は、条件フィルタを使用することと同じで、ラベルフィルターの "condition" を意味します。 タイムラインの追加 ピボットテーブルのタイムラインスライサーを追加する場合。 "pt という名前のピボットテーブルを作成します。 (initPivotTableの詳細な実装方法は、この記事の最後にあります) 次に、"date" フィールドにタイムラインスライサーを追加します。 タイムラインの使用 そのあとで、timeline_dateを制御できるようになります。 例として、水平スクロールバーを表示する必要がない場合。 タイムラインをどこかの日までスクロールしたい場合。 年でフィルタリングしたい場合。 ピボットテーブルを作成するサンプル
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), {sheetCount: 2}); initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); var pt = initPivotTable(pivotLayoutSheet); initSlicer(pivotLayoutSheet, pt); bindEvent(pivotLayoutSheet, pt); }; function initSpread(spread) { spread.suspendPaint(); let sheet = spread.getSheet(1); sheet.name("DataSource"); sheet.setRowCount(650); sheet.setColumnWidth(5, 120); sheet.getCell(-1, 5).formatter("YYYY-mm-DD"); sheet.getRange(-1,4,0,1).formatter("$ #,##0"); sheet.setArray(0, 0, pivotSales); let table = sheet.tables.add('tableSales', 0, 0, 637, 6); table.style(GC.Spread.Sheets.Tables.TableThemes["none"]); let sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); } function initPivotTable(sheet) { sheet.setRowCount(1000); var option = { showRowHeader: true, showColumnHeader: true, bandRows: true, bandColumns: true }; var pivotTable = sheet.pivotTables.add("pivotTable", "tableSales", 1, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium8, option); pivotTable.suspendLayout(); var groupInfo = { originFieldName: "date", dateGroups: [ { by: GC.Pivot.DateGroupType.years }, { by: GC.Pivot.DateGroupType.quarters }, { by: GC.Pivot.DateGroupType.months }, ] }; pivotTable.group(groupInfo); pivotTable.add("年", "年", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("四半期", "四半期", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("date", "月", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("amount", "売上", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); pivotTable.options.subtotalsPosition = GC.Spread.Pivot.SubtotalsPosition.none; pivotTable.resumeLayout(); pivotTable.autoFitColumn(); return pivotTable; } function initSlicer(sheet, pt) { sheet.suspendPaint(); var timeline_year = sheet.slicers.add("timeline_year", pt.name(), "date", GC.Spread.Sheets.Slicers.TimelineStyles.dark6(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline); timeline_year.position(new GC.Spread.Sheets.Point(355, 20)); timeline_year.level(GC.Spread.Sheets.Slicers.TimelineLevel.years); timeline_year.showSelectionLabel(false); timeline_year.showTimeLevel(false); timeline_year.showHorizontalScrollbar(false); timeline_year.height(100); timeline_year.captionName("年"); var timeline_quarter = sheet.slicers.add("timeline_quarter", pt.name(), "date", GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline); timeline_quarter.position(new GC.Spread.Sheets.Point(355, 130)); timeline_quarter.level(GC.Spread.Sheets.Slicers.TimelineLevel.quarters); timeline_quarter.captionName("四半期"); timeline_quarter.showSelectionLabel(false); var timeline_month = sheet.slicers.add("timeline_month", pt.name(), "date", GC.Spread.Sheets.Slicers.TimelineStyles.light4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline); timeline_month.position(new GC.Spread.Sheets.Point(355, 290)); timeline_month.captionName("月"); timeline_month.showTimeLevel(false); sheet.resumePaint(); } function bindEvent(sheet, pt) { var slicer; var slicerCount = 0; sheet.bind(GC.Spread.Sheets.Events.SlicerChanged, function () { var slicers = sheet.slicers.all(); for (var i = 0; i < slicers.length; i++) { if (slicers[i].isSelected()) { slicer = slicers[i]; updateSlicerInfo(slicer, pt); break; } } }); _getElementById("showHeader").addEventListener("change", function (e) { var checked = e.target.checked; if (!_isNullOrUndefined(checked) && slicer) { slicer.showHeader(checked); } }); _getElementById("showHorizontalScrollbar").addEventListener("change", function (e) { var checked = e.target.checked; if (!_isNullOrUndefined(checked) && slicer) { slicer.showHorizontalScrollbar(checked); } }); _getElementById("showSelectionLabel").addEventListener("change", function (e) { var checked = e.target.checked; if (!_isNullOrUndefined(checked) && slicer) { slicer.showSelectionLabel(checked); } }); _getElementById("showTimeLevel").addEventListener("change", function (e) { var checked = e.target.checked; if (!_isNullOrUndefined(checked) && slicer) { slicer.showTimeLevel(checked); } }); _getElementById("addSlicerBtn").addEventListener("click", function () { sheet.slicers.add("timeline_" + slicerCount++, pt.name(), "date", GC.Spread.Sheets.Slicers.TimelineStyles.light1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline); }); _getElementById("changeStyle").addEventListener("click", function () { var styleName = _getElementById("slicerStyle").value; if (styleName && slicer) { var style = GC.Spread.Sheets.Slicers.TimelineStyles[styleName](); slicer.style(style); } }); } function updateSlicerInfo(slicer, pt) { _getElementById("showHeader").checked = slicer.showHeader(); _getElementById("showHorizontalScrollbar").checked = slicer.showHorizontalScrollbar(); _getElementById("showSelectionLabel").checked = slicer.showSelectionLabel(); _getElementById("showTimeLevel").checked = slicer.showTimeLevel(); _getElementById("slicerStyle").value = slicer.style().name().substr(15).toLowerCase(); } function _getElementById(id) { return document.getElementById(id); } function _isNullOrUndefined(o) { return o === null || o === undefined; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <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-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-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/pivotSales.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="options-container"> <div class="block slicer-infos"> <div>現在選択されているタイムラインの情報:</div><br> <div class="slicer-info"> <input type="checkbox" id="showHeader"> <label for="showHeader">ヘッダーを表示する</label> </div> <div class="slicer-info"> <input type="checkbox" id="showHorizontalScrollbar"> <label for="showHorizontalScrollbar">水平スクロールバーを表示する</label> </div> <div class="slicer-info"> <input type="checkbox" id="showSelectionLabel"> <label for="showSelectionLabel">選択ラベルを表示する</label> </div> <div class="slicer-info"> <input type="checkbox" id="showTimeLevel"> <label for="showTimeLevel">時間レベルを表示する</label> </div> </div> <div class="block"> <div>タイムラインの追加</div> <br> <button id="addSlicerBtn">タイムラインスライサーを追加する</button> </div> <div class="block"> <div>現在のタイムラインスタイルを変更する</div> <br> <div class="slicerStyle"> <select class="select-list" name="slicerStyle" id="slicerStyle"> <option value="light1">light1</option> <option value="light2">light2</option> <option value="light3">light3</option> <option value="light4">light4</option> <option value="light5">light5</option> <option value="light6">light6</option> <option value="dark1">dark1</option> <option value="dark2">dark2</option> <option value="dark3">dark3</option> <option value="dark4">dark4</option> <option value="dark5">dark5</option> <option value="dark6">dark6</option> </select> <button class="select-button" id="changeStyle">変更する</button> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 330px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 330px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .slicer-info { margin-top: 5px; margin-bottom: 5px; } .block { border: 1px solid gray; padding-left: 5px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 1px; } .select-list { width: 120px; } .select-button { width: 80px; }