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

行／列を指定したレベルに縮小:

HTML JS X


<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プロパティを使用すると、ユーザーが選択できる定義済みのビューのリストを作成できます。次に例を示します。

HTML JS X


<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を表示
データの前に合計を表示

HTML JS X


<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に接続します。

チャート種別
凡例を表示
タイトルを表示

HTML JS X


<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個ある項目のいずれかを編集すると、ピボットビューは自動的に更新されます。（このグリッドは、読み取り専用のデータソースに連結されているため、読み取り専用です。）

HTML JS X


<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ファイルを作成します。

HTML JS X


<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のアイコンセットと同様の色とアイコンを使用して、四半期ごとの売上高の変化を示しています。

HTML JS X


<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として使用しています。