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

• 主 資深大佬 : 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. 或者定义几个等级的颜色应该也可以