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/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
var data = [{"State":"AL","Under 5 Years":310504,"5 to 13 Years":552339,"14 to 17 Years":259034,"18 to 24 Years":450818,"25 to 44 Years":1231572,"45 to 64 Years":1215966,"65 Years and Over":641667},{"State":"AK","Under 5 Years":52083,"5 to 13 Years":85640,"14 to 17 Years":42153,"18 to 24 Years":74257,"25 to 44 Years":198724,"45 to 64 Years":183159,"65 Years and Over":50277},{"State":"AZ","Under 5 Years":515910,"5 to 13 Years":828669,"14 to 17 Years":362642,"18 to 24 Years":601943,"25 to 44 Years":1804762,"45 to 64 Years":1523681,"65 Years and Over":862573},{"State":"AR","Under 5 Years":202070,"5 to 13 Years":343207,"14 to 17 Years":157204,"18 to 24 Years":264160,"25 to 44 Years":754420,"45 to 64 Years":727124,"65 Years and Over":407205},{"State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496},{"State":"CO","Under 5 Years":358280,"5 to 13 Years":587154,"14 to 17 Years":261701,"18 to 24 Years":466194,"25 to 44 Years":1464939,"45 to 64 Years":1290094,"65 Years and Over":511094},{"State":"CT","Under 5 Years":211637,"5 to 13 Years":403658,"14 to 17 Years":196918,"18 to 24 Years":325110,"25 to 44 Years":916955,"45 to 64 Years":968967,"65 Years and Over":478007}];

var colorMap = {
  'Under 5 Years': '#98abc5',
  '5 to 13 Years': '#8a89a6',
  '14 to 17 Years': '#7b6888',
  '18 to 24 Years': '#6b486b',
  '25 to 44 Years': '#a05d56',
  '45 to 64 Years': '#d0743c',
  '65 Years and Over': 'darkorange'
}

var chart = new G2.Chart({
  id : 'c1',
  width : 1000,
  height : 500,
  plotCfg: {
    margin: [20, 130, 80]
  }
});

chart.source(frame, {
  population: {
    tickInterval: 1000000
  }
});
chart.axis('population', {
  formatter: function(val) {
    return (val / 1000000) + 'M';
  }
});
chart.interval(['dodge', 'stack']).position('State*population').color('type*age', function(type, age) {
  return colorMap[age];
}).size(18);
chart.render();
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
var data = [{"State":"AL","Under 5 Years":310504,"5 to 13 Years":552339,"14 to 17 Years":259034,"18 to 24 Years":450818,"25 to 44 Years":1231572,"45 to 64 Years":1215966,"65 Years and Over":641667},{"State":"AK","Under 5 Years":52083,"5 to 13 Years":85640,"14 to 17 Years":42153,"18 to 24 Years":74257,"25 to 44 Years":198724,"45 to 64 Years":183159,"65 Years and Over":50277},{"State":"AZ","Under 5 Years":515910,"5 to 13 Years":828669,"14 to 17 Years":362642,"18 to 24 Years":601943,"25 to 44 Years":1804762,"45 to 64 Years":1523681,"65 Years and Over":862573},{"State":"AR","Under 5 Years":202070,"5 to 13 Years":343207,"14 to 17 Years":157204,"18 to 24 Years":264160,"25 to 44 Years":754420,"45 to 64 Years":727124,"65 Years and Over":407205},{"State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496},{"State":"CO","Under 5 Years":358280,"5 to 13 Years":587154,"14 to 17 Years":261701,"18 to 24 Years":466194,"25 to 44 Years":1464939,"45 to 64 Years":1290094,"65 Years and Over":511094},{"State":"CT","Under 5 Years":211637,"5 to 13 Years":403658,"14 to 17 Years":196918,"18 to 24 Years":325110,"25 to 44 Years":916955,"45 to 64 Years":968967,"65 Years and Over":478007}];

var chart = new G2.Chart({
  id : 'c1',
  width : 1000,
  height : 500,
  plotCfg: {
    margin: [20, 130, 80]
  }
});

</body>
  </html>

var chart = new G2.Chart({
  id : 'c1',
  width : 1000,
  height : 500,
  plotCfg: {
    margin: [20, 130, 80]
  }
});

分组层叠柱状图

分组柱状图与层叠柱状图的混合，用于展示更多维度的数据。

数据摘自