wijmo.olap Introduction

wijmo.olap简介

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

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

这就可以了，一个包含可用字段的列表会出现在PivotPanel，用户可以在总计区域拖动这些字段来生成数据摘要（AKA“视图”）。用户也可以通过设置它们的头部，摘要函数，过滤器，格式来配置这些字段。

用户可以对数据进行分析并打印结果，导出为XLSX或者PDF格式，并保存视图的定义以备以后重用。

这是一个简单的样例：

向当前页面添加一个PivotPanel和一个PivotGrid

PivotPanel控件与Excel中与数据透视表关联的的“字段列表”窗口相似。

通过拖动或使用复选框向视图添加字段。
通过将字段拖回顶部区域或使用它们的上下文菜单来从视图中移除字段。
使用字段的上下文菜单配置字段。你可能会修改它们的头部，总计函数和格式。注意格式在对数据分组时使用，所以，你可以通过更改日期字段的格式对数据按日，月，季度或年分组

PivotGrid控件扩展了FlexGrid控件以支持数据透视的功能，包括自定义单元格合并，分级的行组和列组以及一个自定义上下文菜单，允许用户配置数据透视字段，发掘用在指定的小计单元格计算的数据项。

HTML JS X


<div class="mdl-grid" id="theView">
<div class="mdl-cell mdl-cell--4-col">
    <wj-pivot-panel
        control="thePanel"
        items-source="rawData"
        initialized="init(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.init = 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属性保存或恢复视图定义。例如：

或者组建一列预定义的视图供用户选择。例如：

{{view.name}}

HTML JS X


<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控件拥有允许你自定义视图的组件。使用下面的控件修改一些属性值，查看产生的影响：

Dataset
Row totals
Column totals
Show Zeros

HTML JS X


<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连接：

Please create a view in order to see the chart.

Chart Type

HTML JS X


<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>
    </dl>
    <wj-pivot-chart
        control="theChart"
        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}}项目中的任意一个，数据透视表会自动更新。 (This grid is read-only because it is bound to a read-only data source.)

HTML JS X


<wj-flex-grid 
    style="border:none"
    control="rawGrid"
    items-source="rawData">
    <wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid>


// no code required!

将结果导出为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"
    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图标集相同的颜色和图标来显示销量在季度间的变化：

HTML JS X


<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>';
        }
    }
}

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