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

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-obsidianHeatmap Calendar是 Obsidian 中最强大的数据可视化插件之一它能将你的笔记数据转换为类似 GitHub 活动日历的热力图。无论你是想追踪健身进度、财务支出、写作习惯还是情绪变化这个免费工具都能帮你一目了然地看到时间维度上的变化趋势。 核心功能数据可视化的全新维度Heatmap Calendar 插件为 Obsidian 用户提供了一个简单而强大的数据可视化解决方案。它的核心功能包括GitHub 风格热力图使用颜色深浅直观展示数据强度多维度追踪同时追踪多个不同主题的数据高度自定义支持自定义颜色方案、强度范围和显示内容与 DataviewJS 无缝集成直接从你的笔记中提取数据响应式设计自动适应不同屏幕尺寸Heatmap Calendar 多场景应用示例 快速上手5分钟安装配置教程第一步安装插件打开 Obsidian进入设置 → 社区插件点击浏览搜索Heatmap Calendar找到插件后点击安装然后启用第二步启用必要功能确保以下插件已启用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: [] };悬浮预览功能启用页面预览功能让鼠标悬停时显示详细信息在 Obsidian 设置中启用页面预览核心插件在代码中添加悬浮预览支持content: await dv.span([](${page.file.name}))Heatmap Calendar 多笔记数据聚合 配置优化技巧常用配置选项配置项说明默认值year显示年份当前年份showCurrentDayBorder显示当天边框truedefaultEntryIntensity默认强度值4intensityScaleStart强度范围起始值数据最小值intensityScaleEnd强度范围结束值数据最大值性能优化建议数据过滤使用dv.pages().where()精确过滤需要的数据批量处理避免在循环中进行复杂计算缓存结果对于不常变动的数据考虑使用缓存机制 最佳实践与应用场景1. 习惯养成追踪写作习惯追踪每日写作字数或时间阅读习惯记录每日阅读页数或时长冥想练习追踪冥想频率和时长2. 健康与健身运动强度根据运动类型和时长设置不同颜色饮食记录追踪营养摄入或卡路里消耗睡眠质量用颜色表示睡眠质量等级3. 项目管理任务完成度显示每日任务完成情况学习进度追踪技能学习时间项目里程碑标记重要节点和进度 项目结构与资源示例库项目包含完整的示例库位于EXAMPLE_VAULT/目录包含daily notes/- 2022年1月至4月的示例笔记Overview.md- 完整的配置示例Overview extended.md- 扩展功能演示相关文件main.ts- 插件主程序源码settings.ts- 插件设置界面main.css- 样式文件manifest.json- 插件元数据 快速开始完整步骤克隆仓库可选用于开发或查看示例git clone https://gitcode.com/gh_mirrors/he/heatmap-calendar-obsidian安装插件通过 Obsidian 社区插件市场安装创建每日笔记使用 YAML 格式添加元数据配置热力图复制示例代码到你的笔记中自定义样式根据需要调整颜色和显示选项分享成果将你的可视化成果分享给朋友或社区总结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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考