OLAPサーバー入門
wijmo.olapモジュールには、Excelに似たピボットテーブルやピボットチャートの機能をアプリケーションに追加できるコントロールが含まれています。 アプリケーションにwijmo.olapを追加するには、次の手順に従います。
- wijmoモジュールとwijmo.olapモジュールへの参照をページに追加します。
- PivotPanelコントロールを追加します。
- いくつかのPivotGridコントロールおよびPivotChartコントロールをページに追加し、それらのitemsSourceプロパティをPivotPanelコントロールに設定することで、コントロールをPivotPanelに接続します。
- PivotPanelのitemsSourceプロパティを、分析対象の生データを含む配列、またはComponentOne Studio WebAPIのデータサービスのURL文字列に設定します。 データサービスを使用することは、大量のデータを処理するための推奨される方法です。大量のデータをダウンロードする必要がなくなり、すべての分析作業をサーバーに委託するためです。 詳細については、このサンプルのreadmeファイルを参照してください。
- オプションで、ビューやビュー定義を印刷、エクスポート、保存、ロードするためのコードを追加します。
これを行うと、PivotPanelに使用できるフィールドのリストが表示され、ユーザーは、サマリー領域間でフィールドをドラッグしてデータサマリー(「ビュー」)を生成できます。 フィールドのヘッダー、集計関数、フィルタ、書式などを設定することもできます。
データの分析、結果の印刷、結果のXLSXまたはPDFへのエクスポートが行えるほか、ビュー定義を保存して後で再利用することもできます。
次に、簡単な例を示します。
PivotPanelとPivotGridのページへの追加
PivotPanelコントロールは、ピボットテーブルやピボットチャートに関連付けられたExcelの[フィールドリスト]ウィンドウに似ています。
- ビューにフィールドを追加するには、フィールドをドラッグするか、チェックボックスを使用します。
- ビューからフィールドを削除するには、フィールドを上部の領域にドラッグして戻すか、フィールドのコンテキストメニューを使用します。
- フィールドを設定するには、フィールドのコンテキストメニューを使用します。 ヘッダー、集計関数、書式を変更できます。書式は、データをグループ化する際に使用されます。 したがって、たとえば日付フィールドの書式を変更することで、データを日、月、四半期、または年別にグループ化することができます。
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として使用しています。