矩形树图 label

组件

矩形树图 label

矩形树图的 label 布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>矩形树图 label</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json', function(mobiles) {
    var _DataSet = DataSet,
      DataView = _DataSet.DataView;
    // 会通过子节点累加 value 值，所以设置为 0

mobiles.forEach(function(mobile) {
      mobile.value = null;
    });
    var data = {
      name: 'root',
      children: mobiles
    };
    var dv = new DataView();
    dv.source(data, {
      type: 'hierarchy'
    }).transform({
      field: 'value',
      type: 'hierarchy.treemap',
      tile: 'treemapResquarify',
      as: ['x', 'y']
    });
    var nodes = dv.getAllNodes();
    nodes.map(function(node) {
      node.name = node.data.name;
      if (!node.data.brand && node.parent) {
        node.brand = node.parent.data.brand;
      } else {
        node.brand = node.data.brand;
      }
      //node.value = node.data.value;
      return node;
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: 0,
      animate: false
    });
    chart.coord().scale(1, -1); // 习惯性最小的在最下面
    chart.source(nodes);
    chart.scale({
      x: {
        nice: false
      },
      y: {
        nice: false
      }
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip(false);
    chart.polygon().position('x*y').color('brand').style({
      lineWidth: 0.5,
      stroke: 'rgba(255,255,255,0.65)'
    }).label('brand*depth*name', function(brand, depth, name) {
      if (depth !== 1 || name === '其他') {
        // 只有第一级显示文本，数值太小时不显示文本
        return name;
      }
    }, {
      type: 'treemap',
      textStyle: {
        shadowColor: 'rgba(0,0,0,0.5)',
        shadowBlur: 3
      },
      offset: 0
    });
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>矩形树图 label</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json', function(mobiles) {
    var _DataSet = DataSet,
      DataView = _DataSet.DataView;
    // 会通过子节点累加 value 值，所以设置为 0

图表简介

矩形树图的 label 布局。

了解更多

图表用法

矩形树图专用的 label 布局会剔除形状容纳不了的 label。

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接