📊 数据可视化

本教程介绍如何在 Obsidian 中实现数据可视化，让你的笔记数据以更直观的方式呈现。

🎯 学习目标

掌握 Dataview 的可视化功能
学习使用图表插件
了解 Canvas 可视化技巧
创建个性化数据看板

📈 Dataview 可视化

表格视图

基础表格

dataview

TABLE 
  file.ctime as "创建时间",
  file.mtime as "修改时间",
  file.size as "大小"
FROM "docs"
SORT file.mtime DESC
LIMIT 10

格式化表格

dataview

TABLE 
  choice(status = "active", "🟢 进行中", 
         choice(status = "done", "✅ 完成", "⚪ 待办")) as "状态",
  dateformat(file.ctime, "yyyy-MM-dd") as "创建日期",
  round(file.size / 1024, 1) + " KB" as "大小"
FROM "projects"
WHERE status
SORT file.mtime DESC

关联数据表格

dataview

TABLE 
  without id
  link(file.link, title) as "项目",
  length(filter(file.inlinks, (l) => l.type = "task")) as "任务数",
  sum(filter(file.inlinks, (l) => l.completed)) as "已完成"
FROM "projects"
WHERE type = "project"

列表视图

任务列表

dataview

TASK
FROM "tasks"
WHERE !completed
SORT due ASC
LIMIT 20

分组列表

dataview

LIST rows.file.link
FROM "notes"
GROUP BY file.folder

日历视图

Dataview 日历

dataview

CALENDAR file.ctime
FROM "daily-notes"
WHERE file.ctime >= date(today) - dur(30 days)

任务日历

dataview

CALENDAR due
FROM "tasks"
WHERE due AND !completed

📉 图表可视化

Charts 插件

安装配置

markdown

# 安装

设置 → 第三方插件 → 浏览 → 搜索 "Charts"
安装并启用

# 基础语法

```chart
type: bar
labels: [一月, 二月, 三月, 四月, 五月]
series:
  - title: 任务完成
    data: [12, 19, 8, 15, 22]
  - title: 新增笔记
    data: [5, 8, 12, 9, 15]

柱状图

chart

type: bar
labels: [周一, 周二, 周三, 周四, 周五, 周六, 周日]
series:
  - title: 创建笔记
    data: [3, 5, 2, 8, 6, 10, 4]
    color: "#7c3aed"
  - title: 完成任务
    data: [5, 3, 7, 4, 9, 2, 6]
    color: "#10b981"
options:
  title: 每周活动统计
  xTitle: 日期
  yTitle: 数量
  legendPosition: bottom

折线图

chart

type: line
labels: [1月, 2月, 3月, 4月, 5月, 6月]
series:
  - title: 笔记总数
    data: [100, 125, 150, 180, 220, 265]
    color: "#3b82f6"
  - title: 任务完成率
    data: [75, 80, 85, 88, 92, 95]
    color: "#10b981"
options:
  title: 知识库增长趋势
  tension: 0.4
  fill: false

饼图

chart

type: pie
labels: [工作, 学习, 生活, 娱乐, 其他]
series:
  - data: [35, 25, 20, 12, 8]
options:
  title: 笔记分类分布
  legendPosition: right

Tracker 插件

基础追踪

tracker

searchType: tag
searchTarget: exercise
folder: daily-notes
startDate: 2024-01-01
endDate: 2024-01-31
line:
  title: 运动追踪
  yAxisLabel: 分钟
  lineColor: "#10b981"

习惯追踪

tracker

searchType: frontmatter
searchTarget: habits.read
folder: daily-notes
startDate: 2024-01-01
month:
  startWeekOn: 'Mon'
  threshold: 1
  color: steelblue
  headerMonthColor: orange
  dimNotInMonth: true
  today: false

🎨 Canvas 可视化

知识图谱

创建可视化笔记网络

markdown

# 步骤

1. 创建新 Canvas
   命令面板 → Canvas: Create new canvas

2. 添加笔记节点
   拖拽笔记到 Canvas
   或使用 "Add a note from vault"

3. 创建连接
   拖拽节点边缘到另一节点
   添加连接标签说明关系

4. 分组和着色
   选择多个节点 → 创建分组
   设置颜色区分类型

Canvas 模板

markdown

# 项目规划 Canvas 模板

## 节点布局

[目标]
   ↓
[关键结果 1] [关键结果 2] [关键结果 3]
   ↓            ↓            ↓
[任务组 1]    [任务组 2]    [任务组 3]
   ↓            ↓            ↓
[里程碑]      [里程碑]      [里程碑]

## 颜色编码

- 🔴 红色：紧急/重要
- 🟡 黄色：待处理
- 🟢 绿色：已完成
- 🔵 蓝色：资料/参考
- ⚪ 灰色：笔记

流程图

markdown

# 使用 Canvas 创建流程图

1. 添加节点类型
   - 矩形：处理步骤
   - 圆角矩形：开始/结束
   - 菱形：判断条件

2. 添加连接箭头
   - 使用不同颜色表示分支
   - 添加条件标签

3. 示例：写作流程

[开始] → [选题] → [研究] → [大纲]
                              ↓
[发布] ← [修改] ← [初稿] ← [写作]

📊 数据看板

综合看板示例

markdown

# 📊 知识库看板

## 📈 概览统计

```dataview
TABLE WITHOUT ID
  length(rows) as "笔记总数",
  sum(rows.file.size) / 1024 / 1024 as "大小 (MB)"
FROM ""
WHERE file.folder != "Templates"
GROUP BY true

✅ 任务统计

dataview

TABLE WITHOUT ID
  length(filter(rows, (r) => r.completed)) as "已完成",
  length(filter(rows, (r) => !r.completed)) as "进行中",
  round(length(filter(rows, (r) => r.completed)) / length(rows) * 100, 1) + "%" as "完成率"
FROM "tasks"
GROUP BY true

📅 近期活动

dataview

TABLE 
  file.name as "笔记",
  dateformat(file.mtime, "MM-dd HH:mm") as "修改时间"
FROM ""
WHERE file.mtime >= date(today) - dur(7 days)
SORT file.mtime DESC
LIMIT 10

🏷️ 标签分布

dataview

TABLE WITHOUT ID
  key as "标签",
  length(rows) as "使用次数"
FLATTEN file.tags as tag
FROM ""
WHERE tag
GROUP BY tag AS key
SORT length(rows) DESC
LIMIT 10


### 项目进度看板

```markdown
# 📊 项目进度看板

## 进行中的项目

```dataview
TABLE 
  choice(status = "active", "🟢 活跃", "🟡 暂停") as "状态",
  progress as "进度",
  deadline as "截止日期",
  (deadline - date(today)).days + " 天" as "剩余"
FROM "projects"
WHERE status = "active"
SORT deadline ASC

本周目标

dataview

TABLE 
  task as "任务",
  due as "截止",
  choice(completed, "✅", "⏳") as "状态"
FROM "weekly-goals"
WHERE week = dateformat(date(today), "yyyy-ww")
SORT due ASC


---

## 🔧 高级技巧

### 动态数据可视化

#### 使用 DataviewJS

```dataviewjs
// 动态笔记热力图
const pages = dv.pages('"daily-notes"')
  .where(p => p.file.ctime >= dv.date("today") - dur(90 days));

const data = {};
for (let page of pages) {
  const date = page.file.ctime.toFormat("yyyy-MM-dd");
  data[date] = (data[date] || 0) + 1;
}

// 生成热力图
const calendar = dv.el("div", "", {cls: "heatmap"});
let html = '<div class="heatmap-grid">';
for (let i = 89; i >= 0; i--) {
  const date = dv.date("today").minus({days: i}).toFormat("yyyy-MM-dd");
  const count = data[date] || 0;
  const intensity = Math.min(count / 5, 1);
  html += `<div class="heatmap-cell" style="background: rgba(16, 185, 129, ${intensity})" title="${date}: ${count} 笔记"></div>`;
}
html += '</div>';
calendar.innerHTML = html;

状态追踪图

dataviewjs

// 项目状态时间线
const projects = dv.pages('"projects"')
  .where(p => p.start && p.end);

const timeline = dv.el("div", "", {cls: "timeline"});
let html = '<div class="gantt-chart">';

for (let project of projects.sort(p => p.start)) {
  const start = project.start;
  const end = project.end || dv.date("today");
  const total = dv.date("today") - start;
  const progress = Math.max(0, Math.min(100, 
    (dv.date("today") - start) / (end - start) * 100));
  
  html += `
    <div class="gantt-row">
      <div class="gantt-label">${project.file.link}</div>
      <div class="gantt-bar">
        <div class="gantt-progress" style="width: ${progress}%"></div>
      </div>
    </div>
  `;
}
html += '</div>';
timeline.innerHTML = html;

自定义样式

css

/* 热力图样式 */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
}

.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  cursor: pointer;
}

/* 甘特图样式 */
.gantt-chart {
  margin: 1rem 0;
}

.gantt-row {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}

.gantt-label {
  width: 150px;
  font-size: 0.9rem;
}

.gantt-bar {
  flex: 1;
  height: 20px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.gantt-progress {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.3s ease;
}

📱 移动端可视化

简化视图

markdown

# 移动端适配的简化看板

```dataview
TABLE WITHOUT ID
  file.link as "笔记",
  choice(status = "done", "✅", "⏳") as "状态"
FROM "tasks"
WHERE !completed
SORT due ASC
LIMIT 5


### 触摸友好图表

```markdown
# 使用简化图表

```chart
type: bar
labels: [周一, 周二, 周三, 周四, 周五]
series:
  - data: [3, 5, 2, 8, 6]
options:
  responsive: true
  maintainAspectRatio: false


---

## 🐛 常见问题

### 图表不显示

```markdown
# 排查步骤

1. 检查插件是否启用
   设置 → 第三方插件 → Charts

2. 检查数据格式
   确保数据是数字类型

3. 检查语法错误
   YAML 格式必须正确缩进

4. 检查控制台错误
   Cmd/Ctrl + Shift + I

Dataview 性能问题

markdown

# 优化建议

1. 限制结果数量
   使用 LIMIT 减少结果

2. 避免复杂查询
   简化 WHERE 条件

3. 使用索引
   确保常用字段有索引

4. 缓存查询结果
   使用 dataviewjs 缓存

📚 进阶资源

插件文档

示例模板

🎯 小结

可视化方式	适用场景	推荐度
Dataview 表格	结构化数据、清单	⭐⭐⭐⭐⭐
Charts 图表	趋势分析、对比	⭐⭐⭐⭐
Canvas	思维导图、流程	⭐⭐⭐⭐⭐
Tracker	习惯追踪、趋势	⭐⭐⭐⭐
自定义 CSS	个性化展示	⭐⭐⭐

📖 相关内容

[[dataview|Dataview 入门]]
[[dataview-advanced|Dataview 进阶]]
[[canvas|Canvas 使用指南]]
[[dashboard-template|看板模板集合]]

💡 提示：好的可视化不是追求华丽，而是让数据说话，帮助你快速获取信息和发现模式。

📊 数据可视化 ​

🎯 学习目标 ​

📈 Dataview 可视化 ​

表格视图 ​

基础表格 ​

格式化表格 ​

关联数据表格 ​

列表视图 ​

任务列表 ​

分组列表 ​

日历视图 ​

Dataview 日历 ​

任务日历 ​

📉 图表可视化 ​

Charts 插件 ​

安装配置 ​

柱状图 ​

折线图 ​

饼图 ​

Tracker 插件 ​

基础追踪 ​

习惯追踪 ​

🎨 Canvas 可视化 ​

知识图谱 ​

创建可视化笔记网络 ​

Canvas 模板 ​

流程图 ​

📊 数据看板 ​

综合看板示例 ​

✅ 任务统计 ​

📅 近期活动 ​

🏷️ 标签分布 ​

本周目标 ​

状态追踪图 ​

自定义样式 ​

📱 移动端可视化 ​

简化视图 ​

Dataview 性能问题 ​

📚 进阶资源 ​

插件文档 ​

示例模板 ​

🎯 小结 ​

📖 相关内容 ​

📊 数据可视化

🎯 学习目标

📈 Dataview 可视化

表格视图

基础表格

格式化表格

关联数据表格

列表视图

任务列表

分组列表

日历视图

Dataview 日历

任务日历

📉 图表可视化

Charts 插件

安装配置

柱状图

折线图

饼图

Tracker 插件

基础追踪

习惯追踪

🎨 Canvas 可视化

知识图谱

创建可视化笔记网络

Canvas 模板

流程图

📊 数据看板

综合看板示例

✅ 任务统计

📅 近期活动

🏷️ 标签分布

本周目标

状态追踪图

自定义样式

📱 移动端可视化

简化视图

Dataview 性能问题

📚 进阶资源

插件文档

示例模板

🎯 小结

📖 相关内容