Server端wijmo.olap简介

介绍服务端wijmo.olap

wijmo.olap模块包含允许你添加类Excel的数据透视表和透视图的功能到你的JavaScript应用中的控件。按照下面的步骤，在你的应用中使用Wijmo.olap模块：

向页面添加wijmo和wijmo.olap模块。
向页面添加PivotPanel控件。
向页面添加一个或者多个PivotGrid和PivotChart控件，并且通过设置它们的itemsSource属性为PivotPanel控件来将它们连接到PivotPanel。
设置PivotPanel的itemsSource属性为一个包含你希望分析的原始数据的数组。
（可选）添加代码以打印，导出，保存和加载视图，并查看定义

在这样做时，一个包含可用字段的列表会出现在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()">
    Save View
</button>
<button
    class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
    onclick="app.loadView()">
    Load View
</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控件拥有允许你自定义视图的属性。使用下面的控件修改一些属性值，查看产生的影响：

Dataset
Row totals
Column totals
Show Zeros
Totals Before Data

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>Show Zeros</dt>
    <dd><input id="chkShowZeros" type="checkbox" /></dd>

    <dt>Totals Before Data</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连接：

Chart Type

HTML JS X


<dl class="dl-horizontal">
    <dt>Chart Type</dt>
    <dd><div id="cmbChartType"></div></dd>
</dl>
<div id="pivotChart"></div>


app.pivotChart = new wijmo.olap.PivotChart('#pivotChart', {
    itemsSource: app.panel
});
app.cmbChartType = new wijmo.input.ComboBox('#cmbChartType', {
    itemsSource: app.chartTypes,
    displayMemberPath: 'name',
    selectedValuePath: 'value',
    selectedIndexChanged: function (s, e) {
        app.pivotChart.chartType = s.selectedValue;
    }
});

查看并且编辑源数据

原始数据不可用，因为PivotEngine连接到服务器。

数据透视表是实时的，如果你编辑n项目中的任意一个，数据透视表会自动更新。 (This grid is read-only because it is bound to a read-only data source.)

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。

例如，下面的按钮创建了一个有三个sheet的Excel文件：当前视图，当前视图的转换版本和原始数据：

HTML JS X


<button
    class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
    onclick="app.export()">
    Export to 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>';
            }
        }
    }
});

注意，在样例中，我们只有一个预定义的视图，不需要PivotPanel。相反，代码直接创建了一个PivotEngine并且将它作为网格的itemsSource。