G2-mobile - 分组柱状图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>分组柱状图</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 = [
    {"time":"周一","tem":6.9,"city":"tokyo"},
    {"time":"周二","tem":9.5,"city":"tokyo"},
    {"time":"周三","tem":14.5,"city":"tokyo"},
    {"time":"周四","tem":18.2,"city":"tokyo"},
    {"time":"周五","tem":21.5,"city":"tokyo"},
    {"time":"周六","tem":25.2,"city":"tokyo"},
    {"time":"周日","tem":26.5,"city":"tokyo"},

    {"time":"周一","tem":0.8,"city":"newYork"},
    {"time":"周二","tem":5.7,"city":"newYork"},
    {"time":"周三","tem":11.3,"city":"newYork"},
    {"time":"周四","tem":17,"city":"newYork"},
    {"time":"周五","tem":22,"city":"newYork"},
    {"time":"周六","tem":24.8,"city":"newYork"},
    {"time":"周日","tem":24.1,"city":"newYork"},

    {"time":"周一","tem":0.6,"city":"berlin"},
    {"time":"周二","tem":3.5,"city":"berlin"},
    {"time":"周三","tem":8.4,"city":"berlin"},
    {"time":"周四","tem":13.5,"city":"berlin"},
    {"time":"周五","tem":17,"city":"berlin"},
    {"time":"周六","tem":18.6,"city":"berlin"},
    {"time":"周日","tem":17.9,"city":"berlin"}
  ];

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

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

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

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

chart.intervalDodge().position('time*tem').color('city');
chart.render();
</script>
      </body>
    </html>
          
        
分组柱状图
分组柱状图，又叫聚合柱状图。当使用者需要在同一个轴上显示各个分类下不同的分组时，需要用到分组柱状图。了解更多