[OLAP] カスタム値

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<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/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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h1>カスタム値</h1>
  <p>カスタム関数を定義して、フィールド値をカスタム値に変換して集計することができます。</p>
  <p>次の例では、商品コードを商品名に、販売数量を販売金額に変換しています。</p>
  <label><input id="getValue" type="checkbox" checked> カスタム値を集計</label><br>
  <div id="pivotGrid"></div>
  <div id="pivotChart"></div>

</div>

CSS

#pivotPanel {
  width: 300px;
}
#pivotGrid {
  height: 400px;
}

JavaScript

var products = sample.products();
function getProductName(item) {
  return products[item.商品コード].商品名;
}
function getAmount(item) {
  return products[item.商品コード].価格 * item.数量;
}

var engine = new wijmo.olap.PivotEngine({
  itemsSource: sample.ordersRaw(10000),
  fields: [
    { binding: '受注日', header: '受注日', format: 'EEEE年度' },
    { binding: '商品コード', header: '商品', width: 200, getValue: getProductName },
    { binding: '数量', header: '売上', getValue: getAmount },
  ],
  columnFields: ['受注日'],
  rowFields: ['商品'],
  valueFields: ['売上'],
});
var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  itemsSource: engine
});
var pivotChart = new wijmo.olap.PivotChart('#pivotChart', {
  itemsSource: engine,
  stacking: 'Stacked'
});

document.getElementById('getValue').addEventListener('change', function(e) {
  engine.fields[1].getValue = e.target.checked ? getProductName : null;
  engine.fields[2].getValue = e.target.checked ? getAmount : null;
  engine.refresh();
});