このサンプルでは、PviotPanel のフィールドリスト、PivotGrid に表示された集計データ、一部のセルの詳細な生データなどのすべてのデータが DataEngine サーバー API から取得されます。 必要であればクライアント側のオプションもあります。

このサンプルの PivotPanel コントロールは、DataEngine API を使用して連結されています。 また、PivotGrid コントロールを使用して集計データを表示します。PivotGrid コントロールでセルをダブルクリックすると、新しいグリッドがポップアップして、そのセルの詳細な生データが表示されます。

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

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

データセット
行の合計
列の合計
ゼロを表示する
using Microsoft.AspNetCore.Mvc;

namespace WebApiExplorer.Controllers.Wijmo5Olap
{
    public class Wijmo5OlapController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
@{
    ViewBag.Title = "DataEngine";
    ViewBag.HideFeatures = true;
    ViewBag.DemoDescription = false;
}
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

@section Head{
    <script type="text/javascript">
    window["webAPIService"] = '@(Configuration["WebAPIService"])' + 'api/dataengine';
    </script>
    <script src="~/Scripts/DataEngine/common.js" type="text/javascript"></script>
    <script src="~/Scripts/DataEngine/wijmo5Olap.js" type="text/javascript"></script>
}

<div class="title-container">
    <p>@Html.Raw(Wijmo5Olap.Index_Text0)</p>
    <p>@Html.Raw(Wijmo5Olap.Index_Text1)</p>
    <p>@Html.Raw(Wijmo5Olap.Index_Text2)</p>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-4">
            <div id="pivotPanel"></div>
        </div>
        <div class="col-sm-8 col-md-8">
            <div id="pivotGrid"></div>
        </div>
    </div>
</div>

<div class="col-lg-12 ui-helper-clearfix content-panel" style="margin-top:20px">
    <p>@Html.Raw(Wijmo5Olap.Index_Text3)</p>
    <dl class="dl-horizontal">
        <dt>@Html.Raw(Wijmo5Olap.Index_Dataset)</dt>
        <dd><div id="cmbDataSets"></div></dd>
        <dt>@Html.Raw(Wijmo5Olap.Index_RowTotals)</dt>
        <dd><div id="cmbRowTotals"></div></dd>
        <dt>@Html.Raw(Wijmo5Olap.Index_ColumnTotals)</dt>
        <dd><div id="cmbColTotals"></div></dd>
        <dt>@Html.Raw(Wijmo5Olap.Index_ShowZeros)</dt>
        <dd><input id="chkShowZeros" type="checkbox" onclick="chkShowZeros_CheckedChanged()" /></dd>
    </dl>
</div>