Zingchart 트리맵

by JM note

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/zingchart/2.8.6/zingchart.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zingchart/2.8.6/modules/zingchart-treemap.min.js"></script>
<style>
  #myChart {
    height: 300px;
    width: 500px;
    min-height: 150px;
  }

  .zc-ref {
    display: none;
  }

  select {
    margin: 10px;
  }

</style>

<div id="myChart">
  <select id="treemap-layout">
    <option selected value="balanced">Balanced</option>
    <option value="balancedV2">Balanced(v2)</option>
    <option value="random">Random</option>
    <option value="horizontal">Horizontal</option>
    <option value="vertical">Vertical</option>
    <option value="squarify">Squarify</option>
    <option value="squarifyV2">Squarify(v2)</option>
  </select>
</div>
<script>
  ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
  var myConfig = {
    "type": "treemap",
    "options": {
      "split-type": "balanced",
      "color-type": "palette",
      "palette": ["#f44336", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"]
    },
    "plotarea": {
      "margin": "0 0 35 0"
    },
    "series": [{
        "text": "North America",
        "children": [{
            "text": "United States",
            "children": [{
              "text": "Texas",
              "value": 90
            }]
          },
          {
            "text": "Canada",
            "value": 113
          },
          {
            "text": "Mexico",
            "value": 78
          }
        ]
      },
      {
        "text": "Europe",
        "children": [{
            "text": "France",
            "value": 42
          },
          {
            "text": "Spain",
            "value": 28
          }
        ]
      },
      {
        "text": "Africa",
        "children": [{
            "text": "Egypt",
            "value": 22
          },
          {
            "text": "Congo",
            "value": 38
          }
        ]
      },
      {
       ...