Zingchart 트리맵

1 개요

Zingchart treemap

Zingchart 트리맵

<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
          }
        ]
      },
      {
        "text": "Asia",
        "children": [{
            "text": "India",
            "value": 92
          },
          {
            "text": "China",
            "value": 68
          }
        ]
      },
      {
        "text": "South America",
        "children": [{
            "text": "Brazil",
            "value": 42
          },
          {
            "text": "Argentina",
            "value": 28
          }
        ]
      },
      {
        "text": "Australia (continent)",
        "children": [{
            "text": "Australia (country)",
            "value": 121
          },
          {
            "text": "New Zealand",
            "value": 24
          }
        ]
      }
    ]
  };

  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: '100%',
    width: '100%'
  });

  document.getElementById('treemap-layout').addEventListener('change', function(e) {
    myConfig.options['split-type'] = e.srcElement.value;
    zingchart.exec('myChart', 'setdata', {
      data: myConfig
    });
  })

</script>

2 같이 보기

• Zingchart
• treemap

3 참고

• https://www.zingchart.com/docs/chart-types/treemap