G2-mobile - 自定义shape的柱状图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义shape的柱状图</title>
<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
      </head>
      <body>
          <div style="width:416px;height:218px;margin:0 auto">
              <canvas id="c1" style="width:416px;height:218px;"></canvas>
          </div>
 <script>
  GM.Global.pixelRatio = 2;

  var data = [
    {"tem": 500, "city":"3月"},
    {"tem": -50, "city":"4月"},
    {"tem": 450, "city":"5月"},
    {"tem": -40, "city":"6月"},
    {"tem": 690, "city":"7月"},
    {"tem": 346, "city":"8月"},
  ];

  var drawShape = function(points, canvas, cfg) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    if(points.length>1){
      for (var i = 1; i <= points.length - 1; i++) {
        ctx.lineTo(points[i].x,points[i].y);
      }
    }
    ctx.fillStyle = cfg.fill;
    ctx.fill();
  };

  //自定义绘制数据的的形状
  var Shape = GM.Shape;
  Shape.registShape('interval', 'polygon', {
    getShapePoints: function(cfg){
      var x = cfg.x;
      var y = cfg.y;
      var y0 = cfg.y0;
      var width = cfg.size;
      return [
        {x: x-width/2, y: y0},
        {x: x, y: y},
        {x: x+width/2, y: y0}
      ];
    },
    drawShape: function(cfg, canvas){
      var points = this.parsePoints(cfg.points);

      var style = cfg.style || {};
      style.fill = cfg.color;

      drawShape(points, canvas, style);
    }
  });

  var chart = new GM.Chart({
    id: 'c1'
  });
  chart.source(data, {
    tem: {
      tickCount: 5,
    }
  });

  chart.axis('city', {
    label:{
      font:'sans-serif '
    },
    line:null,
    grid: null
  });
  chart.axis('tem', {
    label: null,
    grid: {
      stroke: '#f8f8f8',
    }
  });

  chart.interval().position('city*tem').color('tem*city', function(tem, city) {
    if (city === '8月') {
      return '#f5623a';
    }
    if (tem >= 0){
      return '#f8bdad';
    }
    if (tem < 0) {
      return '#99d6c0';
    }
  }).shape('polygon');

  // 绘制数据
  data.forEach(function(obj, index) {
    var className = index === data.length - 1 ? 'guide-lst' : '';
    var offsetY = obj.tem > 0 ? -14 : 14;
    chart.guide().html([obj.city, obj.tem], `<div style='color: #999999;'><span>${obj.tem}</span></div>`, {
      align: 'cc',
      offset: [0, offsetY],
    });
  });
  chart.render();
</script>
      </body>
    </html>
          
        
自定义shape的柱状图