带标识的柱状图

基础柱状图

带标识的柱状图

柱状图，带标识

<!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>
  var data = [{
    name: 'MODIFY',
    value: 138,
    washaway: 0.21014492753623193
  }, {
    name: 'PRERELEASE',
    value: 109,
    washaway: 0.5596330275229358
  }, {
    name: 'RELEASING',
    value: 48,
    washaway: 0
  }];
  var colorSet = {
    MODIFY: '#4FAAEB',
    PRERELEASE: '#9AD681',
    RELEASING: '#FED46B'
  };
  var Shape = G2.Shape;
  Shape.registerShape('interval', 'textInterval', {
    draw: function draw(cfg, group) {
      var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
      var value = cfg.origin._origin.value;
      group.addShape('text', {
        attrs: {
          text: value,
          textAlign: 'center',
          x: points[1].x + cfg.size / 2,
          y: points[1].y,
          fontFamily: 'PingFang SC',
          fontSize: 12,
          fill: '#BBB'
        }
      });
      var polygon = group.addShape('polygon', {
        attrs: {
          points: points.map(function(point) {
            return [point.x, point.y];
          }),
          fill: cfg.color
        }
      });
      return polygon;
    }
  });
  Shape.registerShape('interval', 'fallFlag', {
    getPoints: function getPoints(_ref) {
      var x = _ref.x,
        y = _ref.y,
        y0 = _ref.y0,
        size = _ref.size;

return [{
        x: x + size,
        y: y0 + size
      }, {
        x: x,
        y: y
      }];
    },
    draw: function draw(cfg, group) {
      if (cfg.origin._origin === data[data.length - 1]) {
        return;
      }
      var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
      var p1 = points[0];
      var width = 9;
      var washaway = cfg.origin._origin.washaway;
      group.addShape('text', {
        attrs: {
          text: (washaway * 100).toFixed(1) + ' %',
          x: p1.x - width / 2 - 14,
          y: p1.y - 14,
          fontFamily: 'PingFang SC',
          fontSize: 12,
          fill: '#BBB'
        }
      });
      var polygon = group.addShape('image', {
        attrs: {
          x: p1.x - 16,
          y: p1.y - 16,
          img: 'https://zos.alipayobjects.com/rmsportal/JuBdciUyUAkewNAetxtS.png',
          width: 32,
          height: 32
        }
      });
      return polygon; // 将自定义Shape返回
    }
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.legend(false);
  chart.source(data, {
    value: {
      alias: '访问数'
    },
    name: {
      alias: '步骤名称'
    }
  });
  chart.axis('name', {
    title: null
  });
  chart.interval().position('name*value').shape('textInterval').color('name', function(value) {
    return colorSet[value];
  }).size(30);
  chart.interval().position('name*value').color('#E4E4E4').shape('fallFlag');
  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>G2.Global.setTheme('dark');</script>
<script>
  var data = [{
    name: 'MODIFY',
    value: 138,
    washaway: 0.21014492753623193
  }, {
    name: 'PRERELEASE',
    value: 109,
    washaway: 0.5596330275229358
  }, {
    name: 'RELEASING',
    value: 48,
    washaway: 0
  }];
  var colorSet = {
    MODIFY: '#4FAAEB',
    PRERELEASE: '#9AD681',
    RELEASING: '#FED46B'
  };
  var Shape = G2.Shape;
  Shape.registerShape('interval', 'textInterval', {
    draw: function draw(cfg, group) {
      var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
      var value = cfg.origin._origin.value;
      group.addShape('text', {
        attrs: {
          text: value,
          textAlign: 'center',
          x: points[1].x + cfg.size / 2,
          y: points[1].y,
          fontFamily: 'PingFang SC',
          fontSize: 12,
          fill: '#BBB'
        }
      });
      var polygon = group.addShape('polygon', {
        attrs: {
          points: points.map(function(point) {
            return [point.x, point.y];
          }),
          fill: cfg.color
        }
      });
      return polygon;
    }
  });
  Shape.registerShape('interval', 'fallFlag', {
    getPoints: function getPoints(_ref) {
      var x = _ref.x,
        y = _ref.y,
        y0 = _ref.y0,
        size = _ref.size;

图表简介

柱状图，带标识

了解更多

图表用法

在柱状图中加入标识，增强了能力，能显示柱子之间的数值变化趋势

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接