G2 - The Grammar Of Graphics

柱状图 / 带缩放动画和自定义背景的柱状图

源码

<!DOCTYPE html>
                                    <html>

<head>
                                        <meta charset="utf-8">
                                        <title>带缩放动画和自定义背景的柱状图</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, "month":"3月"},
    {"tem": -50, "month":"4月"},
    {"tem": 450, "month":"5月"},
    {"tem": -40, "month":"6月"},
    {"tem": 690, "month":"7月"},
    {"tem": 346, "month":"8月"},
  ];
  var chart = new GM.Chart({
    id: 'c1'
  });
  chart.source(data, {
    tem: {
      tickCount: 5,
    }
  });
  chart.axis('month', {
    label:{
      font:'sans-serif '
    },
    line:null,
    grid: null
  });
  chart.axis('tem', {
    label: null,
    grid: {
      stroke: '#f8f8f8',
    }
  });

chart.interval().position('month*tem').color('tem*month', function(tem, month) {
    if (month === '8月') {
      return '#f5623a';
    }
    if (tem >= 0){
      return '#f8bdad';
    }
    if (tem < 0) {
      return '#99d6c0';
    }
  });
  // y轴方向的缩放动画
  chart.animate().scaley();
  // 辅助元素
  data.forEach(function(obj, index) {
    // 文字部分
    var offsetY = obj.tem > 0 ? -16 : 14;
    chart.guide().html([obj.month, obj.tem], `<div style='color: #999999;'><span>${obj.tem}</span></div>`, {
      align: 'cc',
      offset: [0, offsetY]
    });
    // 背景部分
    var offset = 0.25;
    chart.guide().rect([index - offset, 'max'],[index + offset, 'min'],{fill: '#f8f8f8'});
  });
  chart.render();
</script>
                                        
                                    </body>

</html>