[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>
  <div id="slicer"></div>
  <div id="pivotGrid"></div>
  <div id="pivotChart"></div>

</div>

CSS

#pivotPanel {
  width: 300px;
  vertical-align: top;
}
#pivotGrid {
  width: auto;
  vertical-align: top;
  margin-left: 2rem;
}
#pivotChart {
  width: 300px;
  display: inline-block;
  vertical-align: top;
  margin-left: 2rem;
}

JavaScript

var engine = new wijmo.olap.PivotEngine({
  itemsSource: sample.ordersDetail(10000),
  fields: [
    { binding: '受注日', header: '受注日', format: 'EEEE年度' },
    { binding: '分類名', header: '分類名' },
    { binding: '金額', header: '金額' },
  ],
  rowFields: ['分類名'],
  valueFields: ['金額'],
  filterFields: ['受注日'],
});
var slicer = new wijmo.olap.Slicer('#slicer', {
  field: engine.fields.getField('受注日')
});
var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  itemsSource: engine
});
var pivotChart = new wijmo.olap.PivotChart('#pivotChart', {
  itemsSource: engine,
  showLegend: wijmo.olap.LegendVisibility.Never,
});

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();
});