Github Contribution 统计图那种效果怎么实现的呀？

[Macv1994]

类似的还有 leetcode 上面的贡献，还有 gitee 上也有。 请问一下懂哥们，这种功能是怎么实现的呀？ 下图这样的

[Macv1994]

我是想在自己的博客网站上加一个这样的统计效果

[acmore]

AntV: 日历热力图
https://g2plot.antv.vision/zh/examples/heatmap/basic#calendar

[xrr2016]

svg OR canvas

[Leprax]

前几天刚好也在找这个轮子，等待分享...

[Macv1994]

@xrr2016 具体怎么实现呢？我看了 github 好像用的 svg

[Rhianu]

Github 用的是 SVG，自己实现的话 SVG 、Div 、Canvas 都可以

[zouzou0208]

这个我完整的写过，我是用 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

[zouzou0208]

@Leprax 你可以用我这个魔改，我是根据初始的 https://github.com/flopp/GpxTrackPoster 实现的（这里面的 github type 是我贡献的）

[Macv1994]

@zouzou0208 大哥太溜了 谢谢了 另外 echarts 好像也支持这种日历热力图

[zouzou0208]

@Macv1994 嗯啊

[xrr2016]

@Macv1994 这两天我也在思考，目前思路是
1. 计算年份的天数，判断今年第一天是否是星期一；
2. 记录第一天的位置，每绘制一天，更新位置 x, y ；
3. 根据对应日期的数字大小，按每周 7 天把全年的方格画出来；

[Macv1994]

@xrr2016 嗯嗯，我大概也是这么考虑的
颜色填充思路:
1. 定义基调颜色
2. 获取当前数据组的最大值
3. 最大值的颜色最深，然后根据比例降色调
4. 或者定义几个等级的颜色应该也可以

[zouzou0208]

@Macv1994 @xrr2016
我把 running_page 的逻辑抽出来了，可以用我的代码，直接继承 base_loader 写，基本有数据就可以生成。目前也支持了一些。
https://github.com/yihong0618/GitHubPoster

[zouzou0208]

@Leprax

[Macv1994]

@zouzou0208 谢谢啦，我已经用 echarts 实现了