V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Macv1994
V2EX  ›  程序员

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

  •  
  •   Macv1994 ·
    weijiang1994 · 2020-11-18 11:15:58 +08:00 · 2790 次点击
    这是一个创建于 1226 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    15 条回复    2021-05-12 11:16:58 +08:00
    Macv1994
        1
    Macv1994  
    OP
       2020-11-18 11:16:47 +08:00
    我是想在自己的博客网站上加一个这样的统计效果
    acmore
        2
    acmore  
       2020-11-18 11:40:13 +08:00   ❤️ 1
    AntV: 日历热力图
    https://g2plot.antv.vision/zh/examples/heatmap/basic#calendar
    xrr2016
        3
    xrr2016  
       2020-11-18 11:49:32 +08:00
    svg OR canvas
    Leprax
        4
    Leprax  
       2020-11-18 12:00:09 +08:00
    前几天刚好也在找这个轮子,等待分享...
    Macv1994
        5
    Macv1994  
    OP
       2020-11-18 13:18:02 +08:00
    @xrr2016 具体怎么实现呢?我看了 github 好像用的 svg
    Rhianu
        6
    Rhianu  
       2020-11-18 13:22:17 +08:00
    Github 用的是 SVG,自己实现的话 SVG 、Div 、Canvas 都可以
    zouzou0208
        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
    zouzou0208
        8
    zouzou0208  
       2020-11-18 13:39:24 +08:00
    @Leprax 你可以用我这个魔改,我是根据初始的 https://github.com/flopp/GpxTrackPoster 实现的(这里面的 github type 是我贡献的)
    Macv1994
        9
    Macv1994  
    OP
       2020-11-18 13:51:43 +08:00
    @zouzou0208 大哥太溜了 谢谢了 另外 echarts 好像也支持这种日历热力图
    zouzou0208
        10
    zouzou0208  
       2020-11-18 13:52:45 +08:00
    @Macv1994 嗯啊
    xrr2016
        11
    xrr2016  
       2020-11-18 18:00:33 +08:00
    @Macv1994 这两天我也在思考,目前思路是
    1. 计算年份的天数,判断今年第一天是否是星期一;
    2. 记录第一天的位置,每绘制一天,更新位置 x, y ;
    3. 根据对应日期的数字大小,按每周 7 天把全年的方格画出来;
    Macv1994
        12
    Macv1994  
    OP
       2020-11-18 20:01:51 +08:00
    @xrr2016 嗯嗯,我大概也是这么考虑的
    颜色填充思路:
    1. 定义基调颜色
    2. 获取当前数据组的最大值
    3. 最大值的颜色最深,然后根据比例降色调
    4. 或者定义几个等级的颜色应该也可以
    zouzou0208
        13
    zouzou0208  
       2021-04-29 12:50:16 +08:00
    @Macv1994 @xrr2016
    我把 running_page 的逻辑抽出来了,可以用我的代码,直接继承 base_loader 写,基本有数据就可以生成。目前也支持了一些。
    https://github.com/yihong0618/GitHubPoster
    zouzou0208
        14
    zouzou0208  
       2021-04-29 12:50:40 +08:00
    Macv1994
        15
    Macv1994  
    OP
       2021-05-12 11:16:58 +08:00 via Android
    @zouzou0208 谢谢啦,我已经用 echarts 实现了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2118 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 16:14 · PVG 00:14 · LAX 09:14 · JFK 12:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.