OLAP入門
Wijmo Olap 101

OLAP入門

wijmo.olapモジュールには、Excelに似たピボットテーブルやピボットチャートの機能をアプリケーションに追加できるコントロールが含まれています。 このモジュールを使用するには、次の手順に従います。

  • wijmoモジュールとwijmo.olapモジュールへの参照をページに追加します。
  • PivotPanelコントロールをページに追加します。
  • いくつかのPivotGridコントロールおよびPivotChartコントロールをページに追加し、それらのitemsSourceプロパティをPivotPanelコントロールに設定することで、コントロールをPivotPanelに接続します。
  • PivotPanelのitemsSourceプロパティを、分析対象の生データを含む配列に設定します。
  • オプションで、ビューやビュー定義を印刷、エクスポート、保存、ロードするためのコードを追加します。

これで完了です。 PivotPanelに使用できるフィールドのリストが表示され、ユーザーは、サマリー領域間でフィールドをドラッグしてデータサマリー(「ビュー」)を生成できます。 フィールドのヘッダー、集計関数、フィルタ、書式などを設定することもできます。

データの分析、結果の印刷、結果のXLSXまたはPDFへのエクスポートが行えるほか、ビュー定義を保存して後で再利用することもできます。

次に、簡単な例を示します。

PivotPanelとPivotGridのページへの追加

PivotPanelコントロールは、ピボットテーブルやピボットチャートに関連付けられたExcelの[フィールドリスト]ウィンドウに似ています。

  • ビューにフィールドを追加するには、フィールドをドラッグするか、チェックボックスを使用します。
  • ビューからフィールドを削除するには、フィールドを上部の領域にドラッグして戻すか、フィールドのコンテキストメニューを使用します。
  • フィールドを設定するには、フィールドのコンテキストメニューを使用します。 ヘッダー、集計関数、書式を変更できます。 書式は、データをグループ化する際に使用されます。したがって、たとえば日付フィールドの書式を変更することで、データを日、月、四半期、または年別にグループ化することができます。

PivotGridコントロールは、FlexGridを拡張して、カスタムセル結合、階層的な行および列グループ、カスタムコンテキストメニューなどのピボット機能をサポートします。カスタムコンテキストメニューからは、ピボットフィールドを設定したり、特定の集計セルの計算で使用されたデータ項目にドリルダウンすることができます。

<div class="mdl-grid" id="theView"> <div class="mdl-cell mdl-cell--4-col"> <wj-pivot-panel control="thePanel" items-source="rawData" initialized="initPanel(s,e)"> </wj-pivot-panel> </div> <div class="mdl-cell mdl-cell--8-col"> <wj-pivot-grid control="pivotGrid" items-source="thePanel"> </wj-pivot-grid> </div> </div>
// initialize the view definition $scope.initPanel = function (sender, e) { var ng = sender.engine; ng.rowFields.push('Product', 'Country'); ng.valueFields.push('Sales', 'Downloads'); ng.showRowTotals = wijmo.olap.ShowTotals.Subtotals; ng.showColTotals = wijmo.olap.ShowTotals.Subtotals; }

viewDefinitionプロパティを使用すると、ビュー定義を保存および復元できます。 次に例を示します。

あるいは、ユーザーが選択できる定義済みのビューのリストを作成できます。 次に例を示します。

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" ng-click="saveView()"> Save View </button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" ng-click="loadView()"> Load View </button> <ul> <li ng-repeat="view in viewDefs"> <a href="#theView" index="$index" ng-click="loadView(view.def)"> {‌{ view.name }} </a> </li> </ul>
// save/restore view definitions $scope.saveView = function () { if ($scope.thePanel.isViewDefined) { localStorage.viewDefinition = $scope.thePanel.viewDefinition; } } $scope.loadView = function (def) { if (def) { // load pre-defined view (against specific dataset) $scope.rawData = $scope.dataSets[3].value; $scope.thePanel.viewDefinition = def; } else { // load view from localStorage (whatever the user saved) $scope.thePanel.viewDefinition = localStorage.viewDefinition; } }

PivotPanelのプロパティの設定

PivotPanelコントロールには、ビューをカスタマイズするためのプロパティが用意されています。 次のコントロールを使用して、いくつかのプロパティの値を変更し、その効果を確認してください。

データセット
行の合計
列の合計
0を表示
データの前に合計を表示
<dl class="dl-horizontal"> <dt>Dataset</dt> <dd> <wj-combo-box items-source="dataSets" display-member-path="name" selected-value-path="value" selected-value="rawData"> </wj-combo-box> </dd> <dt>Row totals</dt> <dd> <wj-combo-box items-source="showTotals" display-member-path="name" selected-value-path="value" selected-value="thePanel.engine.showRowTotals"> </wj-combo-box> </dd> <dt>Column totals</dt> <dd> <wj-combo-box items-source="showTotals" display-member-path="name" selected-value-path="value" selected-value="thePanel.engine.showColumnTotals"> </wj-combo-box> </dd> <dt>Show Zeros</dt> <dd> <input ng-model="thePanel.engine.showZeros" type="checkbox" /> </dd> </dl>
// no code required!

PivotChartでの結果の表示

PivotChartコントロールは、結果をグラフィカルに視覚化して提供します。 Excelのピボットチャートに似ており、複数のチャートタイプや階層的な軸をサポートしています。

PivotChartコントロールを使用するには、itemsSourceプロパティを使用して、コントロールをPivotPanelに接続します。

チャートを表示するには、ビューを作成してください。

チャート種別
凡例を表示
タイトルを表示
<div ng-show="thePanel.isViewDefined"> <dl class="dl-horizontal"> <dt>Chart Type</dt> <dd> <wj-combo-box items-source="chartTypes" display-member-path="name" selected-value-path="value" selected-value="theChart.chartType"> </wj-combo-box> </dd> <dt>Show Legend</dt> <dd> <wj-combo-box items-source="legendVisibility" display-member-path="name" selected-value-path="value" selected-value="theChart.showLegend"> </wj-combo-box> </dd> <dt>Show Title</dt> <dd> <input type="checkbox" checked="checked" ng-model="theChart.showTitle"> </dd> </dl> <wj-pivot-chart control="theChart" show-legend="Auto" items-source="thePanel"> </wj-pivot-chart> </div> <div ng-hide="thePanel.isViewDefined"> <p> Please create a view in order to see the chart.</p> </div>
// no code required!

ソースデータの表示と編集

ピボットビューはライブです。 {{ rawData.items.length | number }} 個ある項目のいずれかを編集すると、ピボットビューは自動的に更新されます。 (このグリッドは、読み取り専用のデータソースに連結されているため、読み取り専用です。)

<wj-flex-grid style="border:none" control="rawGrid" items-source="rawData" is-read-only="{‌{ rawData.tableName != null }}" show-selected-headers="All"> <wj-flex-grid-filter></wj-flex-grid-filter> </wj-flex-grid>
// no code required!

結果のExcelへのエクスポート

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

たとえば、次のボタンは、現在のビュー、現在のビューを転置したバージョン、生データの3つのシートを含むExcelファイルを作成します。

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" ng-click="export()"> Export to XLSX </button>
$scope.export = function () { var ng = $scope.thePanel.engine; // create book with current view var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.pivotGrid, { includeColumnHeaders: true, includeRowHeaders: true }); book.sheets[0].name = 'Main View'; addTitleCell(book.sheets[0], getViewTitle(ng)); // add sheet with raw data if ($scope.rawGrid.rows.length < 20000) { var raw = wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.rawGrid, { includeColumnHeaders: true, includeRowHeaders: false }); raw.sheets[0].name = 'Raw Data'; book.sheets.push(raw.sheets[0]); } // save the book book.save('wijmo.olap.xlsx'); }

PivotGridのセルのカスタマイズ

PivotGridコントロールは、FlexGridの拡張です。したがって、formatItemイベントを使用し、各セルのコンテンツを完全に自由に変更して、グリッドセルの表示をカスタマイズできます。

たとえば、次のPivotGridは、Excelのアイコンセットと同様の色とアイコンを使用して、四半期ごとの売上高の変化を示しています。

<wj-pivot-grid items-source="ngFmt" format-item="formatItem(s,e)" style="border:none"> </wj-pivot-grid>
$scope.ngFmt = new wijmo.olap.PivotEngine({ autoGenerateFields: false, itemsSource: getSimpleDataSet(10000), showColumnTotals: wijmo.olap.ShowTotals.GrandTotals, showRowTotals: wijmo.olap.ShowTotals.None, fields: [ { binding: 'product', header: 'Product' }, { binding: 'date', header: 'Date', format: 'yyyy \"Q\"q' }, { binding: 'sales', header: 'Sales', format: 'n0' }, { binding: 'sales', header: 'Diff', format: 'p0', showAs: wijmo.olap.ShowAs.DiffRowPct } ] }); $scope.ngFmt.rowFields.push('Date'); $scope.ngFmt.columnFields.push('Product'); $scope.ngFmt.valueFields.push('Sales', 'Diff'); $scope.formatItem = function (s, e) { if (e.panel == s.cells && e.col % 2 == 1) { var value = s.getCellData(e.row, e.col), color = '#d8b400', glyph = 'circle'; if (value != null) { if (value < 0) { // negative variation color = '#9f0000'; glyph = 'down'; } else if (value > 0.05) { // positive variation color = '#4c8f00'; glyph = 'down'; } e.cell.style.color = color; e.cell.innerHTML += ' <span style="font-size:120%" class="wj-glyph-' + glyph + '"></span>'; } } }

この例では、定義済みのビューを1つだけ使用しています。PivotPanelはまったく必要ありません。 代わりに、このコードでは、PivotEngineを直接作成して、それをグリッドのitemsSourceとして使用しています。