機能

はじめに

はじめに

PivotEngineコンポーネントをIEnumerableオブジェクトに連結できます。

機能

Product
Country
Date
Sales (Sum)
Sales:0;
Product:Aoba;Sales:0;
Product:Olap;Sales:0;
Product:Wijmo;Sales:0;
Product:Xuni;Sales:0;
5,017,803
1,303,635
1,198,329
1,209,480
1,306,359
475,400
131,493
86,599
131,782
125,526

OutlineMode  ShowValueFieldHeaders 

ビュー定義を保存または復元するには、ViewDefinitionプロパティを使用できます。次に例を示します。

PivotGridコントロールは、FlexGridコントロールの拡張です。したがって、
FlexGridに付属する拡張モジュールでサポートされている形式であれば、どの形式にもエクスポートできます。
サポートされている形式には、.xlsx、.csv、.pdfなどがあります。

たとえば、次のボタンをクリックすると、現在のビューと現在のビューを転置したバージョンの2つのシートを含むExcelファイルが作成されます。

設定

説明

このサンプルでは、集計するデータを提供するIEnumerableオブジェクトにPivotEngineを連結します。
すべてのデータがクライアントに転送されます。PivotEngineは、Wijmo 5 OLAPコントロールなどのクライアント側にあるデータを計算します。
PivotPanelコントロールとPivotGridコントロールはPivotEngineに連結されます。
PivotPanelコントロールでビュー定義を変更できます。
その結果、PivotGridコントロールに集計データが表示されます。
PivotGridコントロール内のセルをダブルクリックすると、詳細な生データがグリッドに表示されます。
PivotGridOutlineModeプロパティを使用すると、画面に表示される余白を小さくすることができます。
1つの値フィールドしか使用できない場合でも、ShowValueFieldHeadersプロパティを使用して、PivotGridに値フィールドのヘッダーを強制的に表示することもできます。

データ行数が10,000より少ない場合は、Bind(data)またはBind(url)モードを使用できます。</br>そうでない場合は、BindService(url)モードを使用してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
using OlapExplorer.Models;
using System.Collections;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using C1.Web.Mvc.Olap;
  
namespace OlapExplorer.Controllers.Olap
{
    public partial class OlapController : Controller
    {
        private static IEnumerable Data = ProductData.GetData(1000).ToList();
  
        private readonly ClientSettingsModel OlapModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"RowTotals", new object[] { ShowTotals.Subtotals, ShowTotals.None, ShowTotals.GrandTotals} },
                {"ColumnTotals", new object[] { ShowTotals.Subtotals, ShowTotals.None, ShowTotals.GrandTotals} },
                {"ShowZeros", new object[] { false, true } },
                { "AllowMerging", new object[] {
                    C1.Web.Mvc.Grid.AllowMerging.All,
                    C1.Web.Mvc.Grid.AllowMerging.AllHeaders,
                    C1.Web.Mvc.Grid.AllowMerging.Cells,
                    C1.Web.Mvc.Grid.AllowMerging.ColumnHeaders,
                    C1.Web.Mvc.Grid.AllowMerging.None,
                    C1.Web.Mvc.Grid.AllowMerging.RowHeaders
                } }
            }
        };
  
        // GET: PivotGrid
        public ActionResult Index()
        {
            OlapModel.ControlId = "indexPanel";
            OlapModel.Settings.Add("DeferredUpdate", new object[] { false, true });
            ViewBag.DemoOptions = OlapModel;
            return View(Data);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
@model IEnumerable<ProductData>
@{
    ClientSettingsModel optionsModel = ViewBag.DemoOptions;
}
  
<c1-pivot-engine id="indexEngine" show-row-totals="Subtotals" show-column-totals="Subtotals" totals-before-data="true">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-view-field-collection c1-property="RowFields" items="Country,Date"></c1-view-field-collection>
    <c1-view-field-collection c1-property="ColumnFields" items="Product"></c1-view-field-collection>
    <c1-view-field-collection c1-property="ValueFields" items="Sales"></c1-view-field-collection>
</c1-pivot-engine>
  
<div class="row">
    <div class="col-sm-4 col-md-4">
        <c1-pivot-panel id="@(optionsModel.ControlId)" items-source-id="indexEngine" deferred-update="false"></c1-pivot-panel>
    </div>
    <div class="col-sm-8 col-md-8">
        <c1-pivot-grid id="indexGrid" items-source-id="indexEngine" outline-mode="false" show-value-field-headers="false"></c1-pivot-grid>
        <p>
            <span style="vertical-align:top; color:black;">
                OutlineMode&nbsp;<input id="outlineMode" type="checkbox" onchange="toggleOutlineMode(event)" style="margin-right:5em;" />
                ShowValueFieldHeaders&nbsp;<input id="ShowValueFieldHeaders" type="checkbox" onchange="toggleShowValueFieldHeaders(event)" />
            </span>
        </p>
    </div>
</div>
<p>@Html.Raw(OlapRes.Index_Text0)</p>
  
<button type="button" class="btn btn-default" onclick="saveView()">@Html.Raw(OlapRes.Index_Text7)</button>
<button type="button" class="btn btn-default" onclick="loadView()">@Html.Raw(OlapRes.Index_Text8)</button>
<p></p>
<p>@Html.Raw(OlapRes.Index_Text2)</p>
  
<p>@Html.Raw(OlapRes.Index_Text3)</p>
  
<button type="button" class="btn btn-default"
        onclick="excelExport()">
    @Html.Raw(OlapRes.Index_Text9)
</button>
@section Scripts{
    <script type="text/javascript">
        function saveView() {
            var ng = c1.getService('indexEngine');
            if (ng && ng.isViewDefined) {
                localStorage.viewDefinition = ng.viewDefinition;
            }
        }
        function loadView() {
            var ng = c1.getService('indexEngine');
            if (ng && localStorage.viewDefinition) {
                ng.viewDefinition = localStorage.viewDefinition;
                var cmbRowTotals = wijmo.Control.getControl('#RowTotals');
                if (cmbRowTotals) {
                    cmbRowTotals.selectedValue = ng.showRowTotals;
                }
  
                var cmbColTotals = wijmo.Control.getControl('#ColTotals');
                if (cmbColTotals) {
                    cmbColTotals.selectedValue = ng.showColumnTotals;
                }
  
                var chkShowZeros = document.getElementById('ColTotals');
                if (chkShowZeros) {
                    chkShowZeros.checked = ng.showZeros;
                }
            }
        }
        function excelExport() {
            var pivotGrid = wijmo.Control.getControl('#indexGrid');
  
            // create book with current view
            var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
                includeColumnHeaders: true,
                includeRowHeaders: true
            });
            book.sheets[0].name = 'Main View';
            addTitleCell(book.sheets[0], getViewTitle(pivotGrid.engine));
  
            // add sheet with transposed view
            transposeView(pivotGrid.engine);
            var transposed = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
                includeColumnHeaders: true,
                includeRowHeaders: true
            });
            transposed.sheets[0].name = 'Transposed View';
            addTitleCell(transposed.sheets[0], getViewTitle(pivotGrid.engine));
            book.sheets.push(transposed.sheets[0]);
            transposeView(pivotGrid.engine);
  
            // save the book
            book.save('wijmo.olap.xlsx');
        }
  
        // build a title for the current view
        function getViewTitle(ng) {
            var title = '';
            for (var i = 0; i < ng.valueFields.length; i++) {
                if (i > 0) title += ', ';
                title += ng.valueFields[i].header;
            }
            title += ' by ';
            if (ng.rowFields.length) {
                for (var i = 0; i < ng.rowFields.length; i++) {
                    if (i > 0) title += ', ';
                    title += ng.rowFields[i].header;
                }
            }
            if (ng.rowFields.length && ng.columnFields.length) {
                title += ' and by ';
            }
            if (ng.columnFields.length) {
                for (var i = 0; i < ng.columnFields.length; i++) {
                    if (i > 0) title += ', ';
                    title += ng.columnFields[i].header;
                }
            }
            return title;
        }
  
        function transposeView(ng) {
            ng.deferUpdate(function () {
  
                // save row/col fields
                var rows = [],
                    cols = [];
                for (var r = 0; r < ng.rowFields.length; r++) {
                    rows.push(ng.rowFields[r].header);
                }
                for (var c = 0; c < ng.columnFields.length; c++) {
                    cols.push(ng.columnFields[c].header);
                }
  
                // clear row/col fields
                ng.rowFields.clear();
                ng.columnFields.clear();
  
                // restore row/col fields in transposed order
                for (var r = 0; r < rows.length; r++) {
                    ng.columnFields.push(rows[r]);
                }
                for (var c = 0; c < cols.length; c++) {
                    ng.rowFields.push(cols[c]);
                }
            });
        }
  
        // adds a title cell into an xlsx sheet
        function addTitleCell(sheet, title) {
  
            // create cell
            var cell = new wijmo.xlsx.WorkbookCell();
            cell.value = title;
            cell.style = new wijmo.xlsx.WorkbookStyle();
            cell.style.font = new wijmo.xlsx.WorkbookFont();
            cell.style.font.bold = true;
  
            // create row to hold the cell
            var row = new wijmo.xlsx.WorkbookRow();
            row.cells[0] = cell;
  
            // and add the new row to the sheet
            sheet.rows.splice(0, 0, row);
        }
  
        // toggle outline mode
        function toggleOutlineMode(e) {
            var pivotGrid = wijmo.Control.getControl('#indexGrid');
            pivotGrid.outlineMode = e.target.checked;
        }
        // toggle ShowValueFieldHeaders
        function toggleShowValueFieldHeaders(e) {
            var pivotGrid = wijmo.Control.getControl('#indexGrid');
            pivotGrid.showValueFieldHeaders = e.target.checked;
        }
    </script>
}
@section Settings{
    @await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Description{
    <p>
        @Html.Raw(OlapRes.Index_Text4)<br />
        @Html.Raw(OlapRes.Index_Text10)
    </p>
  
    <p>@Html.Raw(OlapRes.Index_Text5)</p>
  
}
@section Summary{
    <p>@Html.Raw(OlapRes.Index_Text6)</p>
  
}