TreeMap - JSFiddle

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.nav.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.hierarchical.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>TreeMap</h1>
  <p>ツリーマップ。データの階層構造と大きさを入れ子の長方形で表します。</p>
  <div id="treeMap"></div>
  <div class="tab-panel">
    <div>
      <a>チャート</a>
      <div class="property-panel">
        <label>レイアウトの種類<div id="type"></div></label>
        <label>最大レベル<div id="maxDepth"></div></label>
      </div>
    </div>
  </div>

</div>

JavaScript

var treeMap = new wijmo.chart.hierarchical.TreeMap('#treeMap', {
  itemsSource: sample.salesByCP(),
  binding: '売上',
  bindingName: '分類名,商品名',
  dataLabel: {
    content: '{name}'
  },
  maxDepth: 2
});

new wijmo.nav.TabPanel('.tab-panel', { isAnimated: false });
new wijmo.input.InputNumber('#maxDepth', {
  step: 1,
  value: 2,
  max: 2,
  valueChanged: function(s, e) {
    treeMap.maxDepth = s.value;
  }
});
new wijmo.input.ComboBox('#type', {
  itemsSource: '長方形,水平方向,垂直方向'.split(','),
  selectedIndexChanged: function(s, e) {
    treeMap.type = s.selectedIndex;
  }
});