1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <!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>
|
|
