Github Contribution 统计图那种效果怎么实现的呀？
Macv1994 · weijiang1994 · 2020-11-18 11:15:58 +08:00 · 2912 次点击这是一个创建于 1495 天前的主题，其中的信息可能已经有所发展或是发生改变。
类似的还有 leetcode 上面的贡献，还有 gitee 上也有。
请问一下懂哥们，这种功能是怎么实现的呀？
下图这样的
 |
1
Macv1994 OP 我是想在自己的博客网站上加一个这样的统计效果
|
 |
2
acmore 2020-11-18 11:40:13 +08:00  1
AntV: 日历热力图
https://g2plot.antv.vision/zh/examples/heatmap/basic#calendar |
 |
3
xrr2016 2020-11-18 11:49:32 +08:00
svg OR canvas
|
 |
4
Leprax 2020-11-18 12:00:09 +08:00
前几天刚好也在找这个轮子，等待分享...
|
 |
6
Rhianu 2020-11-18 13:22:17 +08:00
Github 用的是 SVG，自己实现的话 SVG 、Div 、Canvas 都可以
|
 |
7
zouzou0208 2020-11-18 13:33:58 +08:00
这个我完整的写过，我是用 svg 做的，https://yihong.run/running/ 点击 total 就能出现这种 svg
思路是用 svg 绘制 rect 然后 增加 title 和点击事件。 这两个都是用一种思路实现的，其实就是根据内容不同染色，再根据颜色不同增加点击事件。 https://github.com/yihong0618/blog/blob/master/assets/github.svg https://github.com/yihong0618/gcores_calendar/blob/master/assets/github.svg |
|
8
zouzou0208 2020-11-18 13:39:24 +08:00
@Leprax 你可以用我这个魔改，我是根据初始的 https://github.com/flopp/GpxTrackPoster 实现的（这里面的 github type 是我贡献的）
|
|
9
Macv1994 OP @zouzou0208 大哥太溜了 谢谢了 另外 echarts 好像也支持这种日历热力图
|
|
10
zouzou0208 2020-11-18 13:52:45 +08:00
@Macv1994 嗯啊
|
|
11
xrr2016 2020-11-18 18:00:33 +08:00
@Macv1994 这两天我也在思考，目前思路是
1. 计算年份的天数，判断今年第一天是否是星期一； 2. 记录第一天的位置，每绘制一天，更新位置 x, y ； 3. 根据对应日期的数字大小，按每周 7 天把全年的方格画出来； |
|
12
Macv1994 OP |
|
13
zouzou0208 2021-04-29 12:50:16 +08:00
@Macv1994 @xrr2016
我把 running_page 的逻辑抽出来了，可以用我的代码，直接继承 base_loader 写，基本有数据就可以生成。目前也支持了一些。 https://github.com/yihong0618/GitHubPoster |
|
14
zouzou0208 2021-04-29 12:50:40 +08:00
|
|
15
Macv1994 OP @zouzou0208 谢谢啦，我已经用 echarts 实现了
|
Select Language