[OLAP] 値フィールドのヘッダーを表示

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<div class="container">

  <h1>値フィールドのヘッダーを表示</h1>
  <p>PivotGrid.showValueFieldHeadersプロパティが追加され、値フィールドが1つしかない場合でも値フィールドのヘッダーを表示できるようになりました。</p>
  <input type="checkbox" id="showValueFieldHeaders" onchange="update()">
  <label for="showValueFieldHeaders">値フィールドのヘッダーを表示</label><br>
  <div id="pivotGrid"></div>

</div>

JavaScript

var engine = new wijmo.olap.PivotEngine({
  itemsSource: sample.ordersDetail(10000),
  fields: [
    { binding: '受注日', header: '受注日', format: 'EEEE年度' },
    { binding: '分類名', header: '分類名' },
    { binding: '商品名', header: '商品名', width: 200 },
    { binding: '数量', header: '数量' },
    { binding: '金額', header: '金額' },
  ],
  columnFields: ['受注日'],
  rowFields: ['分類名', '商品名'],
  valueFields: ['金額'],
});
var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  itemsSource: engine
});
function update() {
  pivotGrid.showValueFieldHeaders = document.getElementById('showValueFieldHeaders').checked;
}