圆角柱状图 - AntV

堆叠柱状图

圆角柱状图

Basic Column Chart，基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。

<!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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  // 自定义 shape, 支持图片形式的气泡
  G2.Shape.registerShape('interval', 'borderRadius', {
    draw: function draw(cfg, container) {
      var points = cfg.points;
      var path = [];
      path.push(['M', points[0].x, points[0].y]);
      path.push(['L', points[1].x, points[1].y]);
      path.push(['L', points[2].x, points[2].y]);
      path.push(['L', points[3].x, points[3].y]);
      path.push('Z');
      path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
      return container.addShape('rect', {
        attrs: {
          x: path[1][1], // 矩形起始点为左上角
          y: path[1][2],
          width: path[2][1] - path[1][1],
          height: path[0][2] - path[1][2],
          fill: cfg.color,
          radius: (path[2][1] - path[1][1]) / 2
        }
      });
    }
  });
  var activeData = [{
    date: '2017年3月2日',
    actual: 175,
    expected: 900
  }, {
    date: '2017年3月3日',
    actual: 137,
    expected: 900
  }, {
    date: '2017年3月4日',
    actual: 240,
    expected: 900
  }, {
    date: '2017年3月5日',
    actual: 726,
    expected: 900
  }, {
    date: '2017年3月6日',
    actual: 968,
    expected: 900
  }, {
    date: '2017年3月7日',
    actual: 702,
    expected: 900
  }, {
    date: '2017年3月8日',
    actual: 655,
    expected: 900
  }, {
    date: '2017年3月9日',
    actual: 463,
    expected: 900
  }, {
    date: '2017年3月10日',
    actual: 464,
    expected: 900
  }, {
    date: '2017年3月12日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月13日',
    actual: 638,
    expected: 900
  }, {
    date: '2017年3月14日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月15日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月16日',
    actual: 509,
    expected: 900
  }, {
    date: '2017年3月17日',
    actual: 269,
    expected: 900
  }, {
    date: '2017年3月18日',
    actual: 321,
    expected: 900
  }, {
    date: '2017年3月19日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月20日',
    actual: 399,
    expected: 900
  }, {
    date: '2017年3月21日',
    actual: 662,
    expected: 900
  }, {
    date: '2017年3月22日',
    actual: 689,
    expected: 900
  }, {
    date: '2017年3月23日',
    actual: 347,
    expected: 900
  }, {
    date: '2017年3月24日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月26日',
    actual: 428,
    expected: 900
  }, {
    date: '2017年3月27日',
    actual: 749,
    expected: 900
  }, {
    date: '2017年3月28日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月29日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月30日',
    actual: 69.1,
    expected: 900
  }];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [150, 80]
  });
  chart.source(activeData, {
    expected: {
      ticks: [0, 900, 1200]
    }
  });
  chart.axis('date', false);
  chart.axis('actual', false);
  chart.axis('expected', {
    line: null,
    tickLine: null,
    position: 'right',
    label: {
      formatter: function formatter(val) {
        if (val === '1200') {
          return '';
        }
        return val;
      }
    }
  });
  chart.legend(false);
  chart.interval().position('date*expected').color('#752136').shape('borderRadius').tooltip('expected').opacity(0.6);
  chart.interval().position('date*actual').color('#db0d2d').tooltip('actual').shape('date*actual', function(date, val) {
    if (val === 0) {
      return;
    } else {
      return 'borderRadius';
    }
  });
  chart.guide().text({
    position: ['min', 'max'],
    content: '活动',
    style: {
      fill: '#ff2c55',
      fontSize: 20,
      fontWeight: 'bold',
      textBaseline: 'top'
    }
  });
  chart.guide().text({
    position: ['max', 'max'],
    content: '67 / 900 千卡',
    style: {
      fill: '#cbcbcb',
      fontSize: 20,
      textAlign: 'end',
      textBaseline: 'top'
    }
  });
  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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  // 自定义 shape, 支持图片形式的气泡
  G2.Shape.registerShape('interval', 'borderRadius', {
    draw: function draw(cfg, container) {
      var points = cfg.points;
      var path = [];
      path.push(['M', points[0].x, points[0].y]);
      path.push(['L', points[1].x, points[1].y]);
      path.push(['L', points[2].x, points[2].y]);
      path.push(['L', points[3].x, points[3].y]);
      path.push('Z');
      path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
      return container.addShape('rect', {
        attrs: {
          x: path[1][1], // 矩形起始点为左上角
          y: path[1][2],
          width: path[2][1] - path[1][1],
          height: path[0][2] - path[1][2],
          fill: cfg.color,
          radius: (path[2][1] - path[1][1]) / 2
        }
      });
    }
  });
  var activeData = [{
    date: '2017年3月2日',
    actual: 175,
    expected: 900
  }, {
    date: '2017年3月3日',
    actual: 137,
    expected: 900
  }, {
    date: '2017年3月4日',
    actual: 240,
    expected: 900
  }, {
    date: '2017年3月5日',
    actual: 726,
    expected: 900
  }, {
    date: '2017年3月6日',
    actual: 968,
    expected: 900
  }, {
    date: '2017年3月7日',
    actual: 702,
    expected: 900
  }, {
    date: '2017年3月8日',
    actual: 655,
    expected: 900
  }, {
    date: '2017年3月9日',
    actual: 463,
    expected: 900
  }, {
    date: '2017年3月10日',
    actual: 464,
    expected: 900
  }, {
    date: '2017年3月12日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月13日',
    actual: 638,
    expected: 900
  }, {
    date: '2017年3月14日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月15日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月16日',
    actual: 509,
    expected: 900
  }, {
    date: '2017年3月17日',
    actual: 269,
    expected: 900
  }, {
    date: '2017年3月18日',
    actual: 321,
    expected: 900
  }, {
    date: '2017年3月19日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月20日',
    actual: 399,
    expected: 900
  }, {
    date: '2017年3月21日',
    actual: 662,
    expected: 900
  }, {
    date: '2017年3月22日',
    actual: 689,
    expected: 900
  }, {
    date: '2017年3月23日',
    actual: 347,
    expected: 900
  }, {
    date: '2017年3月24日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月26日',
    actual: 428,
    expected: 900
  }, {
    date: '2017年3月27日',
    actual: 749,
    expected: 900
  }, {
    date: '2017年3月28日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月29日',
    actual: 0,
    expected: 900
  }, {
    date: '2017年3月30日',
    actual: 69.1,
    expected: 900
  }];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [150, 80]
  });
  chart.source(activeData, {
    expected: {
      ticks: [0, 900, 1200]
    }
  });
  chart.axis('date', false);
  chart.axis('actual', false);
  chart.axis('expected', {
    line: null,
    tickLine: null,
    position: 'right',
    label: {
      formatter: function formatter(val) {
        if (val === '1200') {
          return '';
        }
        return val;
      }
    }
  });
  chart.legend(false);
  chart.interval().position('date*expected').color('#752136').shape('borderRadius').tooltip('expected').opacity(0.6);
  chart.interval().position('date*actual').color('#db0d2d').tooltip('actual').shape('date*actual', function(date, val) {
    if (val === 0) {
      return;
    } else {
      return 'borderRadius';
    }
  });
  chart.guide().text({
    position: ['min', 'max'],
    content: '活动',
    style: {
      fill: '#ff2c55',
      fontSize: 20,
      fontWeight: 'bold',
      textBaseline: 'top'
    }
  });
  chart.guide().text({
    position: ['max', 'max'],
    content: '67 / 900 千卡',
    style: {
      fill: '#cbcbcb',
      fontSize: 20,
      textAlign: 'end',
      textBaseline: 'top'
    }
  });
  chart.render();
</script>
</body>
</html>

图表简介

Basic Column Chart，基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。

了解更多

图表用法

柱状图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中“有多少？”这个问题。需要注意的是，当柱状图显示的分类很多时会导致分类名层叠等显示问题。

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接