Wijmo 5 OLAPサーバー入門

OLAPサーバー入門

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

  1. wijmoモジュールとwijmo.olapモジュールへの参照をページに追加します。
  2. PivotPanelコントロールを追加します。
  3. いくつかのPivotGridコントロールおよびPivotChartコントロールをページに追加し、それらのitemsSourceプロパティをPivotPanelコントロールに設定することで、コントロールをPivotPanelに接続します。
  4. PivotPanelのitemsSourceプロパティを、分析対象の生データを含む配列、またはComponentOne Studio WebAPIのデータサービスのURL文字列に設定します。データサービスを使用することは、大量のデータを処理するための推奨される方法です。大量のデータをダウンロードする必要がなくなり、すべての分析作業をサーバーに委託するためです。詳細については、このサンプルのreadmeファイルを参照してください。
  5. オプションで、ビューやビュー定義を印刷、エクスポート、保存、ロードするためのコードを追加します。

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

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

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

PivotPanelとPivotGridのページへの追加

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

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

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

行/列を指定したレベルに縮小:
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col"> <div id="pivotPanel"></div> </div> <div class="mdl-cell mdl-cell--8-col"> <div id="pivotGrid"></div> </div> </div>
// create PivotPanel and PivotGrid var app = {}; app.panel = new wijmo.olap.PivotPanel('#pivotPanel'); app.pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', { itemsSource: app.panel }); // configure the PivotPanel's initial view var ng = app.panel.engine; ng.itemsSource = app.dataSets[0].value; ng.rowFields.push('Product', 'Country'); ng.valueFields.push('Sales', 'Downloads');

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

また、viewDefinitionプロパティを使用すると、ユーザーが選択できる定義済みのビューのリストを作成できます。次に例を示します。

    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" onclick="app.saveView()"> ビューを保存 </button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" onclick="app.loadView()"> ビューを読み込み </button> <ul id="views">
    // save/restore view definitions app.saveView = function () { var ng = app.panel.engine; if (ng.isViewDefined) { localStorage.viewDefinition = ng.viewDefinition; } } app.loadView = function () { if (localStorage.viewDefinition) { var ng = app.panel.engine; ng.viewDefinition = localStorage.viewDefinition; } } // populate list of pre-defined views var viewList = document.getElementById('views'); for (var i = 0; i < app.viewDefs.length; i++) { var li = wijmo.createElement('<li><a href="" index="' + i + '">' + app.viewDefs[i].name + '</a></li>'); viewList.appendChild(li); } // apply pre-defined views viewList.addEventListener('click', function (e) { if (e.target.tagName == 'A') { app.setProperty('data', app.dataSets[3].value); var index = parseInt(e.target.getAttribute('index')); ng.viewDefinition = app.viewDefs[index].def; e.preventDefault(); } });

    PivotPanelのプロパティの設定

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

    データセット
    行の合計
    列の合計
    0を表示
    データの前に合計を表示
    <dl class="dl-horizontal"> <dt>Dataset<dt> <dd><div id="cmbDataSets"></div></dd> <dt>Row totals<dt> <dd><div id="cmbRowTotals"></div></dd> <dt>Column totals<dt> <dd><div id="cmbColTotals"></div></dd> <dt>0を表示</dt> <dd><input id="chkShowZeros" type="checkbox" /></dd> <dt>データの前に合計を表示</dt> <dd><input id="chkTotalsBeforeData" type="checkbox" /></dd> </dl>
    app.cmbDataSets = new wijmo.input.ComboBox('#cmbDataSets', { itemsSource: app.dataSets, displayMemberPath: 'name', selectedValuePath: 'value', selectedIndexChanged: function (s, e) { app.setProperty('data', s.selectedValue); } }); app.cmbRowTotals = new wijmo.input.ComboBox('#cmbRowTotals', { itemsSource: app.showTotals, displayMemberPath: 'name', selectedValuePath: 'value', selectedIndexChanged: function (s, e) { app.setProperty('showRowTotals', s.selectedValue); } }); app.cmbColTotals = new wijmo.input.ComboBox('#cmbColTotals', { itemsSource: app.showTotals, displayMemberPath: 'name', selectedValuePath: 'value', selectedIndexChanged: function (s, e) { app.setProperty('showColTotals', s.selectedValue); } }); app.chkShowZeros = document.getElementById('chkShowZeros'); app.chkShowZeros.addEventListener('click', function (e) { app.setProperty('showZeros', app.chkShowZeros.checked); }); app.chkTotalsBeforeData = document.getElementById('chkTotalsBeforeData'); app.chkTotalsBeforeData.addEventListener('click', function (e) { app.setProperty('totalsBeforeData', app.chkTotalsBeforeData.checked); });

    PivotChartでの結果の表示

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

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

    チャート種別
    凡例を表示
    タイトルを表示
    <dl class="dl-horizontal"> <dt>チャート種別</dt> <dd><div id="cmbChartType"></div></dd> <dt>凡例を表示</dt> <dd><div id="cmbShowLegend"></div></dd> <dt>タイトルを表示</dt> <dd><input id="chkShowTitle" type="checkbox" checked="checked" /></dd> </dl> <div id="pivotChart"></div>
    app.pivotChart = new wijmo.olap.PivotChart('#pivotChart', { itemsSource: app.panel, showLegend: 'Auto' }); app.cmbChartType = new wijmo.input.ComboBox('#cmbChartType', { itemsSource: app.chartTypes, displayMemberPath: 'name', selectedValuePath: 'value', selectedIndexChanged: function (s, e) { app.pivotChart.chartType = s.selectedValue; } }); app.cmbShowLegend = new wijmo.input.ComboBox('#cmbShowLegend', { itemsSource: app.legendVisibility, displayMemberPath: 'name', selectedValuePath: 'value', selectedValue: app.pivotChart.showLegend, selectedIndexChanged: function (s, e) { app.pivotChart.showLegend = s.selectedValue; } }); app.chkShowTitle = document.getElementById('chkShowTitle'); app.chkShowTitle.addEventListener('click', function (e) { app.pivotChart.showTitle = e.target.checked; });

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

    PivotEngineがサーバーに接続されているため、生データは使用できません。

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

    <div id="rawGrid" style="border:none"></div>
    app.rawGrid = new wijmo.grid.FlexGrid('#rawGrid'); app.rawGridFilter = new wijmo.grid.filter.FlexGridFilter(app.rawGrid);

    結果の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" onclick="app.export()"> XLSXファイルに保存 </button>
    app.export = function () { // create book with current view var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(app.pivotGrid, { includeColumnHeaders: true, includeRowHeaders: true }); book.sheets[0].name = 'Main View'; // add sheet with raw data if (app.rawGrid.rows.length < 20000) { var raw = wijmo.grid.xlsx.FlexGridXlsxConverter.save(app.rawGrid, { includeColumnHeaders: true, includeRowHeaders: false }); raw.sheets[0].name = 'Raw Data'; book.sheets.push(raw.sheets[0]); } // save book book.save('wijmo.olap.xlsx'); }

    PivotGridのセルのカスタマイズ

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

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

    <div id="formattedGrid" style="border:none"> </div>
    // create a PivotEngine with a custom view var 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 } ] }); ngFmt.rowFields.push('Date'); ngFmt.columnFields.push('Product'); ngFmt.valueFields.push('Sales', 'Diff'); // create a PivotGrid to show the custom view app.formattedGrid = new wijmo.olap.PivotGrid('#formattedGrid', { itemsSource: ngFmt, 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として使用しています。