G2 - 人口金字塔图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>人口金字塔图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script src="https://g.alicdn.com/bui/??seajs/2.3.0/sea.js"></script>
<script src="https://g.alicdn.com/bui/bui/1.1.17/config.js"></script>
<link href="https://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
<style>
  .bui-slider{
    margin-left: 100px;
  }
  .span-value{
    position: relative;
    top: 25px;
    left: -10px;
    color: #999;
  }
</style>
<script>
BUI.use('bui/slider',function (Slider) {
  var Stat = G2.Stat;
  var defaultYear = 2010;
  var Frame = G2.Frame;
  var totalData;
  var Util = G2.Util;
  var chart = new G2.Chart({
    id: 'c1',
    width: 650,
    height: 300,
    animate: false,
    plotCfg: {
      margin: [20, 100, 60]
    }
  });

  var defs = {
    'age': {
      ticks: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100']
    },
    'total_percentage':{
      formatter: function(value){
        return Math.abs(value).toFixed(2) + '%';
      }
    },
    'gender': {type: 'cat',values: ['男','女']}
  };

  var slider = new Slider.Slider({
    render : '#c1',
    width: 450,
    min : 2000,
    step: 1,  //滑动最小 100
    max : 2014,
    handleTpl: '<span><span id="v1" class="span-value">2010</span></span>',
    value: defaultYear // 默认日期
  });
  slider.render();
  slider.on('change',function(ev){
    var value = ev.value;
    var data = findData(value,totalData);
    $('#v1').html(value);
    chart.changeData(data);
  });

  function findData(year,people){
    var rst = [];
    var male = [];
    var tmp = findByYear(year,people.male.values);
    var female = findByYear(year,people.female.values);
    Util.each(tmp,function(obj){
      var tmpObj = Util.mix({},obj);
      tmpObj['total_percentage'] *= -1; // 变成负数
      male.push(tmpObj);
    });
    return Frame.combinArray('gender',male,female);
  }

  function findByYear (year,data) {
    var rst = [];
    for (var i = 0; i < data.length; i ++) {
      var obj = data[i];
      if (new Date(obj.date * 1000).getFullYear() === year) {
        rst = obj.age_groups;
      }
    }
    return rst;
  }

  $.getJSON('../../../static/data/pyramid.json',function (people) {
      totalData = people;
      var data = findData(defaultYear,people);
      chart.source(data,defs);
      chart.axis('total_percentage', {
        titleOffset: 35
      });
      chart.coord().transpose();
      chart.interval().position('age*total_percentage')
            .color('gender',['rgb(113,192,235)','rgb(246,170,203)'])
            .size(4);

      chart.render();
  });
});

</script>

      </body>
    </html>
          
人口金字塔图