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 type="text/javascript">
  var text = ['MIDNIGHT', '3', '6 AM', '9', 'NOON', '3', '6 PM', '9'];
  var data = [];
  for (var i = 0; i < 24; i++) {
    var item = {};
    item.type = i + '';
    item.value = 10;
    data.push(item);
  }

  var chart = new G2.Chart({
    id: 'c1',
    width: 500,
    height: 400,
    plotCfg: {
      margin: [40],
      border: {
        fill: '#E7E8EA'
      }
    }
  });
  chart.legend(false);
  chart.tooltip(false);

  var view = chart.createView();
  view.source(data);
  view.coord('theta', {
    inner: 0.75
  });
  view.intervalStack().position(G2.Stat.summary.percent('value'))
    .color('type', function(val) {
      if (val % 2 === 0) {
        return '#E7E8EA';
      } else {
        return '#ffffff';
      }
    })
    .selected(false);

  var bgView = chart.createView();
  bgView.coord('theta', {
    inner: 0.9
  });
  bgView.source(data);
  bgView.intervalStack().position(G2.Stat.summary.percent('value'))
    .color('type', ['rgba(255, 255, 255, 0)'])
    .style({
      stroke: '#444',
      lineWidth: 1
    })
    .selected(false);

  var intervalView = chart.createView();
  intervalView.source(data);
  intervalView.coord('polar', {
    inner: 0.9
  });
  intervalView.axis(false);
  intervalView.interval().position('type*value').size('type', function(val) {
    if (val % 3 === 0) {
      return 4;
    } else {
      return 0;
    }
  })
  .color('#444')
  .label('type', function(val) {
    if (val % 3 === 0) {
      return text[val / 3];
    }
    return '';
  }, {
    offset: 25,
    label: {
      fontSize: 16
    }
  });

  chart.render();
  var frontCanvas = chart.get('frontCanvas');
  var el = frontCanvas.get('el');
  $('<p style="position: absolute;width: 240px;height: 240px;line-height: 240px;top: 80px;left: 140px;text-align: center;margin: 0;padding: 0;border-radius: 50%;font-size: 48px;color: #609064">24 hours</p>').insertAfter($(el));
</script>

      </body>
    </html>
          
日常作息可视化