水平日历色块图

热力图

水平日历色块图

Calendar Heatmap，日历热力图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>水平日历色块图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  var Shape = G2.Shape;
  var Util = G2.Util;
  Shape.registerShape('polygon', 'boundary-polygon', {
    draw: function draw(cfg, container) {
      if (!Util.isEmpty(cfg.points)) {
        var attrs = {
          stroke: '#fff',
          lineWidth: 1,
          fill: cfg.color,
          fillOpacity: cfg.opacity
        };
        var points = cfg.points;
        var path = [['M', points[0].x, points[0].y], ['L', points[1].x, points[1].y], ['L', points[2].x, points[2].y], ['L', points[3].x, points[3].y], ['Z']];
        attrs.path = this.parsePath(path);
        var polygon = container.addShape('path', {
          attrs: attrs
        });

if (cfg.origin._origin.lastWeek) {
          var linePath = [['M', points[2].x, points[2].y], ['L', points[3].x, points[3].y]];
          // 最后一周的多边形添加右侧边框
          container.addShape('path', {
            zIndex: 1,
            attrs: {
              path: this.parsePath(linePath),
              lineWidth: 1,
              stroke: '#404040'
            }
          });
          if (cfg.origin._origin.lastDay) {
            container.addShape('path', {
              zIndex: 1,
              attrs: {
                path: this.parsePath([['M', points[1].x, points[1].y], ['L', points[2].x, points[2].y]]),
                lineWidth: 1,
                stroke: '#404040'
              }
            });
          }
        }
        container.sort();
        return polygon;
      }
    }
  });

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/github-commit.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [window.innerHeight / 3, 20, window.innerHeight / 3, 80]
    });
    chart.source(data, {
      day: {
        type: 'cat',
        values: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      },
      week: {
        type: 'cat'
      },
      commits: {
        sync: true
      }
    });

chart.axis('week', {
      position: 'top',
      tickLine: null,
      line: null,
      label: {
        offset: 12,
        textStyle: {
          fontSize: 12,
          fill: '#666',
          textBaseline: 'top'
        },
        formatter: function formatter(val) {
          if (val === '2') {
            return 'MAY';
          } else if (val === '6') {
            return 'JUN';
          } else if (val === '10') {
            return 'JUL';
          } else if (val === '15') {
            return 'AUG';
          } else if (val === '19') {
            return 'SEP';
          } else if (val === '24') {
            return 'OCT';
          }
          return '';
        }
      }
    });
    chart.axis('day', {
      grid: null
    });
    chart.legend(false);
    chart.tooltip({
      title: 'date'
    });
    chart.coord().reflect('y');
    chart.polygon().position('week*day*date').color('commits', '#BAE7FF-#1890FF-#0050B3').shape('boundary-polygon');
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>水平日历色块图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  var Shape = G2.Shape;
  var Util = G2.Util;
  Shape.registerShape('polygon', 'boundary-polygon', {
    draw: function draw(cfg, container) {
      if (!Util.isEmpty(cfg.points)) {
        var attrs = {
          stroke: '#fff',
          lineWidth: 1,
          fill: cfg.color,
          fillOpacity: cfg.opacity
        };
        var points = cfg.points;
        var path = [['M', points[0].x, points[0].y], ['L', points[1].x, points[1].y], ['L', points[2].x, points[2].y], ['L', points[3].x, points[3].y], ['Z']];
        attrs.path = this.parsePath(path);
        var polygon = container.addShape('path', {
          attrs: attrs
        });

图表简介

Calendar Heatmap，日历热力图。

了解更多

图表用法

由小色块有序且紧凑的组成的图表，以日历格式展示，从而在基础热力图的基础上增加了时间的维度，用来展示一段时间内的数据分布情况。

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接