如何将Obsidian中Markdown表格数据转换为Chart.js图表？

前提准备 #

假设你的睡眠Markdown表格结构类似示例：

实现步骤 #

1. 用Dataview提取并转换数据 #

通过dataviewjs代码块提取表格字段，整理成Chart.js兼容的格式：

// 获取当前笔记里的睡眠表格数据
const tableData = dv.current().file.lists.where(item => item.type === "table").values[0].rows;

// 拆分整理各类数据
const labels = tableData.map(row => row["Date"]);
// 把时间转成分钟数，方便图表排序和展示
const bedtimeMinutes = tableData.map(row => {
  const [h, m] = row["Bedtime"].split(":").map(Number);
  return h * 60 + m;
});
const wakeupMinutes = tableData.map(row => {
  const [h, m] = row["Wake up"].split(":").map(Number);
  return h * 60 + m;
});
const durationData = tableData.map(row => parseFloat(row["Sleep duration"]));

// 调用Obsidian Chart渲染图表
window.renderChart({
  type: "line", // 可替换为bar、radar等类型
  data: {
    labels: labels,
    datasets: [
      {
        label: "入睡时间",
        data: bedtimeMinutes,
        borderColor: "#FF6B6B",
        fill: false
      },
      {
        label: "起床时间",
        data: wakeupMinutes,
        borderColor: "#4ECDC4",
        fill: false
      },
      {
        label: "睡眠时长(小时)",
        data: durationData,
        borderColor: "#45B7D1",
        fill: false,
        yAxisID: "y1" // 单独用右侧Y轴，避免时间和时长刻度冲突
      }
    ]
  },
  options: {
    scales: {
      y: {
        title: { display: true, text: "时间(分钟)" },
        ticks: {
          // 把分钟数转回时间格式显示
          callback: val => {
            const h = Math.floor(val / 60).toString().padStart(2, '0');
            const m = (val % 60).toString().padStart(2, '0');
            return `${h}:${m}`;
          }
        }
      },
      y1: {
        position: "right",
        title: { display: true, text: "时长(小时)" },
        grid: { drawOnChartArea: false }
      }
    }
  }
}, this.container);

2. 适配调整说明 #

• 如果你的表格列名和示例不同，直接修改代码中row["Date"]、row["Bedtime"]这类字段名即可。
• 图表类型可以按需替换：比如用bar做柱状图突出睡眠时长对比，用line展示入睡/起床时间的变化趋势。
• 时间转分钟数是为了避免字符串时间的排序bug，保证图表数据顺序正确。

3. 渲染效果 #

代码块会直接在Obsidian笔记中生成包含三个数据系列的图表：入睡/起床时间用左侧时间刻度展示，睡眠时长用右侧小时刻度展示，清晰呈现睡眠数据的变化规律。

内容的提问来源于stack exchange，提问作者PhDoanh