双 Y 轴分组柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="双 Y 轴分组柱状图">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
    
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <script>
  // ----- 自定义 shape ------
  var Shape = F2.Shape;
  var Util = F2.Util;
  var Global = F2.Global;

function getRectRange(points, step) {
    var xValues = [];
    var yValues = [];
    for (var i = 0, len = points.length; i < len; i++) {
      var point = points[i];
      xValues.push(point.x - step);
      yValues.push(point.y);
    }
    var xMin = Math.min.apply(null, xValues);
    var yMin = Math.min.apply(null, yValues);
    var xMax = Math.max.apply(null, xValues);
    var yMax = Math.max.apply(null, yValues);

return {
      x: xMin,
      y: yMin,
      width: xMax - xMin,
      height: yMax - yMin
    };
  }

// 左侧柱子
  Shape.registerShape('interval', 'left', {
    draw: function draw(cfg, container) {
      var points = this.parsePoints(cfg.points);
      var style = Util.mix({
        fill: cfg.color
      }, Global.shape.interval, cfg.style);

var rectCfg = getRectRange(points, cfg.size); // cfg.size 对应 .size(25)

return container.addShape('rect', {
        className: 'interval',
        attrs: Util.mix(rectCfg, style)
      });
    }
  });
  // 右侧柱子
  Shape.registerShape('interval', 'right', {
    draw: function draw(cfg, container) {
      var points = this.parsePoints(cfg.points);
      var style = Util.mix({
        fill: cfg.color
      }, Global.shape.interval, cfg.style);
      var rectCfg = getRectRange(points, -cfg.size / 2); // cfg.size 对应 .size(25

return container.addShape('rect', {
        className: 'interval',
        attrs: Util.mix(rectCfg, style)
      });
    }
  });

// ------ 开始绘制 chart ------
  var data = [{
    genre: 'ant 牌黄油',
    domestic: 460000,
    international: 25000
  }, {
    genre: 'ant 牌芝士',
    domestic: 425000,
    international: 30000
  }, {
    genre: 'ant 牌牛奶',
    domestic: 310000,
    international: 15000
  }, {
    genre: 'ant 牌奶昔',
    domestic: 270000,
    international: 40000
  }];

var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

chart.source(data, {
    genre: {
      alias: '商品名称' // 列定义，定义该属性显示的别名
    },
    domestic: {
      alias: '内销额'
    },
    international: {
      alias: '出口额'
    }
  });

chart.axis('international', {
    grid: null
  });

chart.interval().position('genre*domestic').shape('left').size(15);
  chart.interval().position('genre*international').color('#36B3C3').shape('right').size(15);
  chart.render();
</script>

</body>
</html>

Gallery

图表交互

折线图

面积图

柱状图

饼图

雷达图

点图

股票图

功能组件

其他图表

双 Y 轴分组柱状图