企业官网建设流程全解析

Obsidian 热力图日历插件终极指南：可视化追踪你的生活与习惯

【免费下载链接】heatmap-calendar-obsidianAn Obsidian plugin for displaying data in a calendar similar to the github activity calendar项目地址: https://gitcode.com/gh_mirrors/he/heatmap-calendar-obsidian

Heatmap Calendar是 Obsidian 中最强大的数据可视化插件之一，它能将你的笔记数据转换为类似 GitHub 活动日历的热力图。无论你是想追踪健身进度、财务支出、写作习惯还是情绪变化，这个免费工具都能帮你一目了然地看到时间维度上的变化趋势。

🌟 核心功能：数据可视化的全新维度

Heatmap Calendar 插件为 Obsidian 用户提供了一个简单而强大的数据可视化解决方案。它的核心功能包括：

• GitHub 风格热力图：使用颜色深浅直观展示数据强度
• 多维度追踪：同时追踪多个不同主题的数据
• 高度自定义：支持自定义颜色方案、强度范围和显示内容
• 与 DataviewJS 无缝集成：直接从你的笔记中提取数据
• 响应式设计：自动适应不同屏幕尺寸

Heatmap Calendar 多场景应用示例

🚀 快速上手：5分钟安装配置教程

第一步：安装插件

1. 打开 Obsidian，进入"设置" → "社区插件"
2. 点击"浏览"，搜索"Heatmap Calendar"
3. 找到插件后点击"安装"，然后"启用"

第二步：启用必要功能

确保以下插件已启用：

• Dataview（社区插件）
• DataviewJS（在 Dataview 设置中启用）

第三步：创建你的第一个热力图

在你的笔记中添加以下代码块：

const calendarData = { colors: "githubGreen", entries: [] }; for (let page of dv.pages('"daily notes"').where(p => p.exercise)) { calendarData.entries.push({ date: page.file.name, intensity: page.exercise, content: "🏋️" }); } renderHeatmapCalendar(this.container, calendarData)

📊 实用案例：从健身到财务的全面追踪

案例一：健身习惯追踪

想要记录每天的锻炼情况？在每日笔记中添加这样的元数据：

--- exercise: 30 ---

然后在概览页面创建热力图：

const calendarData = { colors: { red: ["#ff9e82","#ff7b55","#ff4d1a","#e73400","#bd2a00"] }, entries: [] }; for(let page of dv.pages('"daily notes"').where(p => p.exercise)){ calendarData.entries.push({ date: page.file.name, intensity: page.exercise, content: await dv.span(`[](${page.file.name})`), }); } renderHeatmapCalendar(this.container, calendarData)

案例二：财务支出管理

追踪每日支出，让财务可视化：

--- moneySpent: 150 category: "餐饮" ---

对应的热力图配置：

const calendarData = { colors: "blue", entries: [] }; for(let page of dv.pages('"daily notes"').where(p => p.moneySpent)){ calendarData.entries.push({ date: page.file.name, intensity: page.moneySpent, color: "blue" }); } renderHeatmapCalendar(this.container, calendarData)

Heatmap Calendar 数据配置教程

🎨 进阶技巧：个性化你的热力图

自定义颜色方案

Heatmap Calendar 支持完全自定义的颜色配置：

const calendarData = { colors: { customTheme: [ "#8cb9ff", // 最浅色 "#69a3ff", "#428bff", "#1872ff", "#0058e2" // 最深色 ] }, entries: [] };

多数据源聚合

你可以同时显示多个不同类型的数据：

// 情绪追踪：红色到绿色渐变 const calendarData = { intensityScaleStart: 1, intensityScaleEnd: 9, colors: { moodGradient: [ "hsl(13, 100%, 37%)", // 最差情绪 "hsl(13, 100%, 50%)", "hsl(13, 100%, 60%)", "hsl(13, 100%, 77%)", "hsl(0, 0%, 80%)", // 中性 "hsl(92, 70%, 72%)", "hsl(112, 43%, 56%)", "hsl(132, 49%, 36%)", "hsl(132, 59%, 24%)" // 最佳情绪 ] }, entries: [] };

悬浮预览功能

启用页面预览功能，让鼠标悬停时显示详细信息：

1. 在 Obsidian 设置中启用"页面预览"核心插件
2. 在代码中添加悬浮预览支持：

content: await dv.span(`[](${page.file.name})`)

Heatmap Calendar 多笔记数据聚合

🔧 配置优化技巧

常用配置选项

性能优化建议

1. 数据过滤：使用dv.pages().where()精确过滤需要的数据
2. 批量处理：避免在循环中进行复杂计算
3. 缓存结果：对于不常变动的数据，考虑使用缓存机制

💡 最佳实践与应用场景

1. 习惯养成追踪

• 写作习惯：追踪每日写作字数或时间
• 阅读习惯：记录每日阅读页数或时长
• 冥想练习：追踪冥想频率和时长

2. 健康与健身

• 运动强度：根据运动类型和时长设置不同颜色
• 饮食记录：追踪营养摄入或卡路里消耗
• 睡眠质量：用颜色表示睡眠质量等级

3. 项目管理

• 任务完成度：显示每日任务完成情况
• 学习进度：追踪技能学习时间
• 项目里程碑：标记重要节点和进度

📁 项目结构与资源

示例库

项目包含完整的示例库，位于EXAMPLE_VAULT/目录，包含：

• daily notes/- 2022年1月至4月的示例笔记
• Overview.md- 完整的配置示例
• Overview extended.md- 扩展功能演示

相关文件

• main.ts- 插件主程序源码
• settings.ts- 插件设置界面
• main.css- 样式文件
• manifest.json- 插件元数据

🚀 快速开始完整步骤

1. 克隆仓库（可选，用于开发或查看示例）：

   git clone https://gitcode.com/gh_mirrors/he/heatmap-calendar-obsidian

2. 安装插件：通过 Obsidian 社区插件市场安装

3. 创建每日笔记：使用 YAML 格式添加元数据

4. 配置热力图：复制示例代码到你的笔记中

5. 自定义样式：根据需要调整颜色和显示选项

6. 分享成果：将你的可视化成果分享给朋友或社区

总结

Heatmap Calendar 插件为 Obsidian 用户提供了一个强大而灵活的数据可视化工具。通过简单的配置，你可以将日常笔记中的数据转化为直观的热力图，帮助你更好地理解自己的习惯、进度和趋势。无论是个人成长追踪、项目管理还是健康管理，这个插件都能让你的数据"活"起来。

记住，数据可视化的关键不是复杂的技术，而是清晰的表达。从简单的健身追踪开始，逐步探索更多可能性，让 Heatmap Calendar 成为你 Obsidian 工作流中不可或缺的一部分。

【免费下载链接】heatmap-calendar-obsidianAn Obsidian plugin for displaying data in a calendar similar to the github activity calendar项目地址: https://gitcode.com/gh_mirrors/he/heatmap-calendar-obsidian