符号华夫图 - AntV

其他

符号华夫图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>符号华夫图</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>
  var pathMap = {
    club: 'M22.439 36.421c.179 1.756.693 4.774 1.544 9.054h-7.428c.85-3.971 1.275-6.989 1.275-9.054l.504-6.626c0-.411.169-.329.505.247-.707 1.763-1.595 3.269-2.665 4.517-1.818 2.188-4.188 3.282-7.11 3.282-2.743 0-4.952-.93-6.626-2.788C.813 33.071 0 30.725 0 28.015c0-3.107.85-5.651 2.552-7.634 1.646-1.7 3.817-2.551 6.512-2.551 2.483 0 4.678.782 6.585 2.346.432-.31.367-.68-.195-1.112-3.17-2.112-4.754-5.326-4.754-9.64 0-2.593.847-4.808 2.541-6.647C15.066.925 17.323 0 20.011 0c3.04 0 5.323.85 6.853 2.551 1.81 1.996 2.716 4.373 2.716 7.13 0 3.773-1.495 6.89-4.486 9.352-.57.453-.727.837-.473 1.153 2.092-1.57 4.29-2.356 6.595-2.356 2.689 0 4.86.854 6.513 2.562 1.872 1.982 2.808 4.523 2.808 7.623 0 2.717-.909 5.073-2.726 7.069-1.66 1.838-3.858 2.757-6.595 2.757-2.75 0-5.124-1.09-7.12-3.272-.892-1.076-1.776-2.579-2.654-4.506.336-.59.504-.634.504-.134l.494 6.492z',
    diamond: 'M18.993 46.638L0 23.52 18.983 0l19.003 23.53-18.993 23.108z',
    heart: 'M40.281 10.443c0 7.634-4.47 16.606-13.407 26.915l-6.605 7.357-6.873-7.357C4.466 27.049 0 18.079 0 10.443c0-2.942 1.019-5.49 3.056-7.644C4.881.933 7.476 0 10.845 0c3.025 0 5.387.847 7.089 2.541 1.145 1.187 1.896 2.412 2.253 3.674.295-1.263.95-2.398 1.965-3.406C24.169.937 26.597 0 29.436 0c3.361 0 5.958.933 7.789 2.799 2.037 2.16 3.056 4.708 3.056 7.644z',
    spade: 'M21.175 38.088c.178 2.786.69 5.553 1.533 8.304h-8.447c.679-3.245 1.19-6.012 1.533-8.303l.134-5.597c.425-.453.802-.453 1.131 0-.919 1.646-1.9 2.99-2.942 4.033-1.482 1.482-3.673 2.222-6.575 2.222-2.085 0-3.772-.74-5.062-2.222C.827 34.872 0 32.591 0 29.683c0-3.285 3.228-9.287 9.682-18.005L18.479 0l8.93 11.606c6.373 8.1 9.56 14.126 9.56 18.077 0 2.901-.827 5.182-2.48 6.842-1.482 1.482-3.252 2.222-5.31 2.222-2.716 0-4.941-.771-6.677-2.315-1.564-1.563-2.428-2.832-2.593-3.806.343-.165.515-.186.515-.062l.751 5.525z'
  };
  var data = [{
    name: 'club',
    value: 50
  }, {
    name: 'diamond',
    value: 65
  }, {
    name: 'heart',
    value: 43
  }, {
    name: 'spade',
    value: 12
  }];
  var dv = new DataSet.View().source(data).transform({
    type: 'waffle',
    rows: 10
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 80, 80, 20]
  });
  chart.source(dv, {
    x: {
      nice: false
    },
    y: {
      nice: false
    }
  });
  chart.axis(false);
  chart.legend(false);
  chart.tooltip(false);
  chart.point().position('x*y').shape('name', function(name) {
      return ['path', pathMap[name]];
    }) // 根据具体的字段指定 shape
    .size((window.innerHeight - 100) / 10).color('name');

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>符号华夫图</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>G2.Global.setTheme('dark');</script>
<script>
  var pathMap = {
    club: 'M22.439 36.421c.179 1.756.693 4.774 1.544 9.054h-7.428c.85-3.971 1.275-6.989 1.275-9.054l.504-6.626c0-.411.169-.329.505.247-.707 1.763-1.595 3.269-2.665 4.517-1.818 2.188-4.188 3.282-7.11 3.282-2.743 0-4.952-.93-6.626-2.788C.813 33.071 0 30.725 0 28.015c0-3.107.85-5.651 2.552-7.634 1.646-1.7 3.817-2.551 6.512-2.551 2.483 0 4.678.782 6.585 2.346.432-.31.367-.68-.195-1.112-3.17-2.112-4.754-5.326-4.754-9.64 0-2.593.847-4.808 2.541-6.647C15.066.925 17.323 0 20.011 0c3.04 0 5.323.85 6.853 2.551 1.81 1.996 2.716 4.373 2.716 7.13 0 3.773-1.495 6.89-4.486 9.352-.57.453-.727.837-.473 1.153 2.092-1.57 4.29-2.356 6.595-2.356 2.689 0 4.86.854 6.513 2.562 1.872 1.982 2.808 4.523 2.808 7.623 0 2.717-.909 5.073-2.726 7.069-1.66 1.838-3.858 2.757-6.595 2.757-2.75 0-5.124-1.09-7.12-3.272-.892-1.076-1.776-2.579-2.654-4.506.336-.59.504-.634.504-.134l.494 6.492z',
    diamond: 'M18.993 46.638L0 23.52 18.983 0l19.003 23.53-18.993 23.108z',
    heart: 'M40.281 10.443c0 7.634-4.47 16.606-13.407 26.915l-6.605 7.357-6.873-7.357C4.466 27.049 0 18.079 0 10.443c0-2.942 1.019-5.49 3.056-7.644C4.881.933 7.476 0 10.845 0c3.025 0 5.387.847 7.089 2.541 1.145 1.187 1.896 2.412 2.253 3.674.295-1.263.95-2.398 1.965-3.406C24.169.937 26.597 0 29.436 0c3.361 0 5.958.933 7.789 2.799 2.037 2.16 3.056 4.708 3.056 7.644z',
    spade: 'M21.175 38.088c.178 2.786.69 5.553 1.533 8.304h-8.447c.679-3.245 1.19-6.012 1.533-8.303l.134-5.597c.425-.453.802-.453 1.131 0-.919 1.646-1.9 2.99-2.942 4.033-1.482 1.482-3.673 2.222-6.575 2.222-2.085 0-3.772-.74-5.062-2.222C.827 34.872 0 32.591 0 29.683c0-3.285 3.228-9.287 9.682-18.005L18.479 0l8.93 11.606c6.373 8.1 9.56 14.126 9.56 18.077 0 2.901-.827 5.182-2.48 6.842-1.482 1.482-3.252 2.222-5.31 2.222-2.716 0-4.941-.771-6.677-2.315-1.564-1.563-2.428-2.832-2.593-3.806.343-.165.515-.186.515-.062l.751 5.525z'
  };
  var data = [{
    name: 'club',
    value: 50
  }, {
    name: 'diamond',
    value: 65
  }, {
    name: 'heart',
    value: 43
  }, {
    name: 'spade',
    value: 12
  }];
  var dv = new DataSet.View().source(data).transform({
    type: 'waffle',
    rows: 10
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 80, 80, 20]
  });
  chart.source(dv, {
    x: {
      nice: false
    },
    y: {
      nice: false
    }
  });
  chart.axis(false);
  chart.legend(false);
  chart.tooltip(false);
  chart.point().position('x*y').shape('name', function(name) {
      return ['path', pathMap[name]];
    }) // 根据具体的字段指定 shape
    .size((window.innerHeight - 100) / 10).color('name');

chart.render();
</script>
</body>
</html>

图表简介

符号华夫图

图表用法

用符号（path）代替矩形来画华夫图，使得华夫图更具可读性

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接