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 = [
      {"month":'周一',"tem":[0, 7]},
      {"month":'周二',"tem":[7, 5]},
      {"month":'周三',"tem":[5, 9.5]},
      {"month":'周四',"tem":[9.5, 14.5]},
      {"month":'周五',"tem":[14.5, 10.2]},
      {"month":'周六',"tem":[10.2, 21.5]},
      {"month":'周日',"tem":[21.5, 25.2]}
    ];

var chart = new GM.Chart({
    id: 'c1'
  });

chart.source(data, {
      tem: {
        tickCount: 5
      }
  });

//配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('month', {
    label: {
      fontSize: 14 
    },
    grid: null
  });

chart.axis('tem', {
    label: {
      fontSize: 14 
    }
  });

chart.interval().position('month*tem').color('tem', function(tem) {
    if (tem[1] >= tem[0]) {
      return 'red'
    } else {
      return 'green';
    }
  });

chart.render();

</script>
                                        
                                    </body>

</html>