G2 - The Grammar Of Graphics

柱状图 / 自定义shape的柱状图

源码

<!DOCTYPE html>
                                    <html>

<head>
                                        <meta charset="utf-8">
                                        <title>自定义shape的柱状图</title>
                                        <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
                                        
                                        <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.7/index.js "></script>
                                    </head>

<body>
                                        <canvas id="c1" style="width:416px;height:218px;"></canvas>
                                        
                                        <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 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>

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',
    }
  });