分类

← View All Tools

日历热力图生成器

生成GitHub风格的日历热力图，用于可视化随时间的活动模式，非常适合跟踪年度贡献、习惯或指标

日历热力图的活动数据。格式：日期|数值|标签（YYYY-MM-DD格式）

显示在热力图上方的标题

日历年份（留空为当前年份）

自定义配色方案的起始颜色（需要选择自定义颜色）

自定义配色方案的结束颜色（需要选择自定义颜色）

无活动日期的颜色

单元格的边框颜色

每个日期单元格的像素大小（8-20）

单元格之间的像素间距（1-5）

动画的毫秒时长

图表容器的背景颜色

在单元格内显示数值（较大的单元格效果更好）

显示颜色强度图例

在日历上方显示月份名称

显示星期几的标签

在图表下方显示活动统计信息

启用单元格悬停工具提示

关键信息

分类
Data Visualization
输入类型
textarea, text, select, number, color, checkbox
输出类型
html
样本覆盖
4
支持 API
Yes

概览

日历热力图生成器是一款高效的数据可视化工具，能够将时间序列数据转化为直观的 GitHub 风格热力图。通过颜色深浅的变化，您可以轻松识别年度活动模式、习惯养成进度或关键指标的波动趋势。

适用场景

  • •需要直观展示全年每日的活动频率或贡献量时。
  • •想要通过可视化手段跟踪个人习惯养成或项目进度时。
  • •需要将时间序列数据转化为专业且易于理解的年度视图报告时。

工作原理

  • •输入活动数据：按照“日期|数值|标签”的格式或 JSON 格式填入您的时间序列数据。
  • •自定义样式：选择配色方案、调整单元格大小、间距以及是否显示图例和统计信息。
  • •生成预览：点击生成按钮，即可实时预览并下载您的专属年度日历热力图。

使用场景

开发者贡献跟踪：可视化展示全年的代码提交频率，分析工作产出规律。
习惯养成打卡：记录每日运动、阅读或学习时长，通过热力图直观查看坚持情况。
业务指标监控：跟踪每日销售额或用户活跃度，快速定位业务高峰与低谷期。

用户案例

1. 年度代码贡献可视化

软件工程师
背景原因
工程师希望在个人博客中展示全年的 GitHub 贡献情况，但需要更灵活的配色以匹配网站主题。
解决问题
需要生成一个与 GitHub 风格一致但颜色可定制的年度贡献热力图。
如何使用
在活动数据框中粘贴全年的提交记录，选择“自定义颜色”，设置起始颜色为浅绿色，结束颜色为深绿色。
示例配置
colorScheme: 'custom', startColor: '#c6e48b', endColor: '#239a3b', showStats: true
效果
生成了一张清晰的年度贡献热力图，完美融入博客页面，直观展示了全年的编码活跃度。

2. 每日运动习惯打卡

健身爱好者
背景原因
用户正在进行为期一年的健身计划，希望通过可视化图表激励自己保持运动习惯。
解决问题
需要一个能显示每日运动时长，并能通过颜色深浅区分运动强度的图表。
如何使用
输入每日运动时长数据，开启“显示颜色图例”和“显示统计信息”功能。
示例配置
colorScheme: 'blue', showLegend: true, showStats: true, showTooltip: true
效果
通过热力图，用户可以一眼看出哪个月份运动最频繁，并能通过悬停查看具体日期的运动时长。

用 Samples 测试

data-visualization
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
keywords time,series,data
sample
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
keywords time,data
sample
Chart.js 图表库示例
全面的Chart.js示例，包括各种图表类型、自定义选项、动画和响应式设计
keywords graph,data,visualization
sample
ClickHouse 示例
ClickHouse列式数据库，包含高性能分析、时序处理和实时仪表板示例
keywords time,series,data
sample

相关专题

JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
AudioConvert工具专题
探索 100 个围绕 audio 的 convert 工作流工具，快速找到相近能力。
DesignConvert工具专题
探索 98 个围绕 design 的 convert 工作流工具，快速找到相近能力。

常见问题

支持哪些数据输入格式？

支持 JSON 数组格式（包含 date, value, label 字段）以及简单的文本格式（日期|数值|标签）。

可以自定义热力图的颜色吗？

可以，除了预设的多种配色方案外，您还可以选择“自定义颜色”模式，手动设置起始颜色和结束颜色。

生成的图表可以显示具体的数值吗？

可以，勾选“在单元格中显示数值”选项即可在每个日期方块内直接展示具体数值。

支持查看往年的数据吗？

支持，您可以在年份选项中输入 2000 到 2030 之间的任意年份来生成对应年度的视图。

如何调整图表的布局？

您可以通过调整“单元格大小”和“单元格间距”参数，以及控制月份、星期标签和统计信息的显示与否来优化布局。

API 文档

请求端点

POST /zh/api/tools/calendar-heatmap

请求参数

参数名 类型 必填 描述
chartData textarea 是 日历热力图的活动数据。格式：日期|数值|标签（YYYY-MM-DD格式）
chartTitle text 否 显示在热力图上方的标题
colorScheme select 否 -
year number 否 日历年份（留空为当前年份）
startColor color 否 自定义配色方案的起始颜色（需要选择自定义颜色）
endColor color 否 自定义配色方案的结束颜色（需要选择自定义颜色）
emptyColor color 否 无活动日期的颜色
borderColor color 否 单元格的边框颜色
cellSize number 否 每个日期单元格的像素大小（8-20）
cellSpacing number 否 单元格之间的像素间距（1-5）
animationDuration number 否 动画的毫秒时长
backgroundColor color 否 图表容器的背景颜色
showValues checkbox 否 在单元格内显示数值（较大的单元格效果更好）
showLegend checkbox 否 显示颜色强度图例
showMonthLabels checkbox 否 在日历上方显示月份名称
showDayLabels checkbox 否 显示星期几的标签
showStats checkbox 否 在图表下方显示活动统计信息
showTooltip checkbox 否 启用单元格悬停工具提示

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-calendar-heatmap": {
      "name": "calendar-heatmap",
      "description": "生成GitHub风格的日历热力图，用于可视化随时间的活动模式，非常适合跟踪年度贡献、习惯或指标",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=calendar-heatmap",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]