周末做了个小玩意：GitHub 贡献图生成器

桃源隐者

统计加载中...

GitHub

加载中...

加载GitHub贡献图...

✨ 欢迎来到桃源笔记

这里是记录生活、分享技术、探索世界的小天地。愿你在忙碌的生活中，也能找到属于自己的那片桃源～

查看详情

标签

安全宝库笔记编程实践博客触摸事件低碳生活调试都市减压独处个人成长个性化教育更新日志工具工业4.0 工作生活平衡公告构建孤独观察航天技术合成生物学环保火星任务基因编辑计算器技能技术创新加密货币焦虑教师生涯教育开源科技趋势科技与生活可持续生活量子计算灵活办公零浪费浏览器API 留白艺术慢生活哲学命令行工具内心成长评论系统前端区块链去中心化人工智能人文人性思考商业航天商业应用生活生活方式生活平衡生活哲学生态友好生物技术师德楷模时间管理实验室实用方法书单数字化数字极简主义数字经济数字孪生数字伦理数字转型随笔太空探索太空殖民体验优化天津宝坻推荐未来工作未来经济未来科技未来学习未来展望物联网咸鱼之王乡村教育小工具效率效率工具协议心理健康心理健康工具心灵治愈性能优化虚拟现实医疗创新移动端游戏语文教学元宇宙远程工作远程医疗阅读增强现实正念知识管理智慧生活智能制造专注力自我关怀自我疗愈自我探索自我提升 Astro Canvas GitHub Obsidian Pagefind PKM Python RSS Rust Svelte Umami Web3

分类

--

分

预计充满时间 -- | 剩余电量 --

1070 字

5 分钟

周末做了个小玩意：GitHub 贡献图生成器

2026-02-01

项目

前端

/

/

/

/

统计加载中...

起因#

周末闲着没事，想给博客加个”代码贡献统计”的页面。GitHub 自带的贡献图挺好看，但样式固定，不能自定义。

于是花了一个下午，用 Canvas API 撸了个生成器。

效果预览#

支持的功能：

✅ 自定义颜色主题（GitHub 绿、蓝色、紫色等）
✅ 调整格子大小和间距
✅ 显示/隐藏月份标签
✅ 导出为 PNG 或 SVG
✅ 响应式设计，移动端友好

技术实现#

数据结构#

首先定义贡献数据的结构：

1
interface Contribution {
2
  date: string; // 'YYYY-MM-DD'
3
  count: number; // 贡献次数
4
  level: 0 | 1 | 2 | 3 | 4; // 颜色等级
5
}
6

7
interface ContributionData {
8
  contributions: Contribution[];
9
  totalCount: number;
10
  startDate: string;
11
  endDate: string;
12
}

Canvas 绘制#

核心绘制逻辑：

1
class ContributionGraph {
2
  private canvas: HTMLCanvasElement;
3
  private ctx: CanvasRenderingContext2D;
4
  private cellSize = 10;
5
  private cellGap = 2;
6
  private colors = {
7
    0: "#161b22", // 无贡献
8
    1: "#0e4429", // 1-3 次
9
    2: "#006d32", // 4-6 次
10
    3: "#26a641", // 7-9 次
11
    4: "#39d353", // 10+ 次
12
  };
13

14
  constructor(canvas: HTMLCanvasElement) {
15
    this.canvas = canvas;
16
    this.ctx = canvas.getContext("2d")!;
17
  }
18

19
  draw(data: ContributionData) {
20
    const weeks = this.groupByWeek(data.contributions);
21
    const width = weeks.length * (this.cellSize + this.cellGap);
22
    const height = 7 * (this.cellSize + this.cellGap);
23

24
    this.canvas.width = width;
25
    this.canvas.height = height;
26

27
    weeks.forEach((week, weekIndex) => {
28
      week.forEach((day, dayIndex) => {
29
        const x = weekIndex * (this.cellSize + this.cellGap);
30
        const y = dayIndex * (this.cellSize + this.cellGap);
31

32
        this.ctx.fillStyle = this.colors[day.level];
33
        this.ctx.fillRect(x, y, this.cellSize, this.cellSize);
34
      });
35
    });
36
  }
37

38
  private groupByWeek(contributions: Contribution[]) {
39
    // 按周分组逻辑
40
    const weeks: Contribution[][] = [];
41
    let currentWeek: Contribution[] = [];
42

43
    contributions.forEach((contrib, index) => {
44
      const date = new Date(contrib.date);
45
      const dayOfWeek = date.getDay();
46

47
      if (dayOfWeek === 0 && currentWeek.length > 0) {
48
        weeks.push(currentWeek);
49
        currentWeek = [];
50
      }
51

52
      currentWeek.push(contrib);
53
    });
54

55
    if (currentWeek.length > 0) {
56
      weeks.push(currentWeek);
57
    }
58

59
    return weeks;
60
  }
61
}

交互功能#

添加鼠标悬停提示：

1
canvas.addEventListener("mousemove", (e) => {
2
  const rect = canvas.getBoundingClientRect();
3
  const x = e.clientX - rect.left;
4
  const y = e.clientY - rect.top;
5

6
  const weekIndex = Math.floor(x / (cellSize + cellGap));
7
  const dayIndex = Math.floor(y / (cellSize + cellGap));
8

9
  const contribution = weeks[weekIndex]?.[dayIndex];
10

11
  if (contribution) {
12
    showTooltip(e.clientX, e.clientY, {
13
      date: contribution.date,
14
      count: contribution.count,
15
    });
16
  } else {
17
    hideTooltip();
18
  }
19
});

导出功能#

导出为 PNG：

1
function exportToPNG() {
2
  const link = document.createElement("a");
3
  link.download = "contribution-graph.png";
4
  link.href = canvas.toDataURL("image/png");
5
  link.click();
6
}

导出为 SVG（更清晰）：

1
function exportToSVG(data: ContributionData) {
2
  const weeks = groupByWeek(data.contributions);
3
  const width = weeks.length * (cellSize + cellGap);
4
  const height = 7 * (cellSize + cellGap);
5

6
  let svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">`;
7

8
  weeks.forEach((week, weekIndex) => {
9
    week.forEach((day, dayIndex) => {
10
      const x = weekIndex * (cellSize + cellGap);
11
      const y = dayIndex * (cellSize + cellGap);
12
      const color = colors[day.level];
13

14
      svg += `<rect x="${x}" y="${y}" width="${cellSize}" height="${cellSize}" fill="${color}" />`;
15
    });
16
  });
17

18
  svg += "</svg>";
19

20
  const blob = new Blob([svg], { type: "image/svg+xml" });
21
  const url = URL.createObjectURL(blob);
22
  const link = document.createElement("a");
23
  link.download = "contribution-graph.svg";
24
  link.href = url;
25
  link.click();
26
}

优化点#

1. 性能优化#

最开始每次鼠标移动都重绘整个 Canvas，很卡。优化后只在必要时重绘：

1
let lastHoveredCell: [number, number] | null = null;
2

3
canvas.addEventListener("mousemove", (e) => {
4
  const cell = getCellAtPosition(e.clientX, e.clientY);
5

6
  if (!isSameCell(cell, lastHoveredCell)) {
7
    redrawHighlight(cell);
8
    lastHoveredCell = cell;
9
  }
10
});

2. 响应式设计#

根据容器宽度自动调整格子大小：

1
function calculateCellSize(containerWidth: number, weeks: number) {
2
  const availableWidth = containerWidth - 40; // 留出边距
3
  const totalGaps = (weeks - 1) * cellGap;
4
  return Math.floor((availableWidth - totalGaps) / weeks);
5
}

3. 主题切换#

支持多种配色方案：

1
const themes = {
2
  github: {
3
    0: "#161b22",
4
    1: "#0e4429",
5
    2: "#006d32",
6
    3: "#26a641",
7
    4: "#39d353",
8
  },
9
  blue: {
10
    0: "#161b22",
11
    1: "#0a3069",
12
    2: "#0969da",
13
    3: "#54aeff",
14
    4: "#79c0ff",
15
  },
16
  purple: {
17
    0: "#161b22",
18
    1: "#3d1f47",
19
    2: "#6e40aa",
20
    3: "#a06cd5",
21
    4: "#d896ff",
22
  },
23
};

使用方法#

安装#

1
npm install github-contribution-graph

基础用法#

1
import { ContributionGraph } from "github-contribution-graph";
2

3
const canvas = document.getElementById("graph") as HTMLCanvasElement;
4
const graph = new ContributionGraph(canvas);
5

6
// 从 GitHub API 获取数据
7
const data = await fetchGitHubContributions("username");
8

9
graph.draw(data);

自定义配置#

1
const graph = new ContributionGraph(canvas, {
2
  cellSize: 12,
3
  cellGap: 3,
4
  theme: "blue",
5
  showMonthLabels: true,
6
  showWeekdayLabels: true,
7
});

遇到的坑#

坑1：日期计算#

JavaScript 的 Date 对象有很多坑，特别是时区问题。最后用了 date-fns 库：

1
import { startOfWeek, endOfWeek, eachDayOfInterval } from "date-fns";
2

3
const days = eachDayOfInterval({
4
  start: startOfWeek(startDate),
5
  end: endOfWeek(endDate),
6
});

坑2：Canvas 模糊#

在高 DPI 屏幕上，Canvas 会模糊。解决方案：

1
const dpr = window.devicePixelRatio || 1;
2
canvas.width = width * dpr;
3
canvas.height = height * dpr;
4
canvas.style.width = `${width}px`;
5
canvas.style.height = `${height}px`;
6
ctx.scale(dpr, dpr);

坑3：SVG 导出中文乱码#

SVG 导出时，中文会乱码。需要指定编码：

1
const blob = new Blob([svg], {
2
  type: "image/svg+xml;charset=utf-8",
3
});

后续计划#

支持更多主题（暗黑模式、彩虹色等）
添加动画效果（渐入、波浪等）
支持自定义数据源（不只是 GitHub）
做成 Web Component，方便集成
发布到 npm

开源地址#

代码已开源：github.com/example/contribution-graph

欢迎 star 和 PR！

在线体验#

做了个在线 Demo：contribution-graph.demo.com

可以直接输入 GitHub 用户名生成贡献图。

技术栈：

TypeScript
Canvas API
date-fns
Vite

开发时间：

核心功能：4 小时
优化和测试：2 小时
文档和 Demo：2 小时

总共一个周末搞定，还是挺有成就感的 😄

周末做了个小玩意：GitHub 贡献图生成器

https://sylviz.cn/posts/16/

作者

kiwi

发布于

2026-02-01

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

咖啡馆观察日记：那些有趣的陌生人

我的"摸鱼"哲学

心是桃源，处处水云

起因#

效果预览#

技术实现#

数据结构#

Canvas 绘制#

交互功能#

导出功能#

优化点#

1. 性能优化#

2. 响应式设计#

3. 主题切换#

使用方法#

安装#

基础用法#

自定义配置#

遇到的坑#

坑1：日期计算#

坑2：Canvas 模糊#

坑3：SVG 导出中文乱码#

后续计划#

开源地址#

在线体验#