Obsidian Charts & Layout — Obsidian 图表和布局

Obsidian Charts & Layout 技能 ⚠️ 开始前 — 关键事项 本技能适用于 caronchen/obsidian-chartsview-plugin（图表视图）插件。 事项 详情 插件 ID caronchen/obsidian-chartsview-plugin 代码块标签 chartsview — 不 是 chart 图表引擎 AntV G2Plot — 不 是 Chart.js 数据格式 数组对象（数据：带命名字段） 字段映射 xField: "name" / yField: "value" / angleField: "value" 如果使用 ```chartorlabels/datasets 格式，图表将无法渲染。

命名对照表 英文术语 中文说法 含义 Annotation 标注 一直显示在图表上的文字（柱子顶端数字、饼图旁边的名称和百分比） Data label / Tooltip 数据标签 鼠标悬停时弹出的提示框（无需配置，默认就有）

历史踩坑总结（一定要看） ❌ 使用 chart 标签 → 图表不显示，显示为源代码 ✅ 必须 使用 chartsview ❌ 使用 Chart.js 格式（labels/datasets） → 图表不显示 ✅ 必须 使用 G2Plot 格式（数据对象数组） ❌ 字段名没加双引号（xField: price） → 部分情况能工作但不可靠 ✅ 必须 加引号 xField: "price" ❌ 通过 PowerShell 传中文内容建模板 → 引号被吃掉、内容被截断 ✅ 直接使用 Python 写文件到 vault 目录 ❌ 通过 obsidian eval 传超大 JS 代码 → Obsidian IPC 崩溃、插件列表丢失 ✅ 使用简单的 CLI 命令或重启 Obsidian ❌ 通过 obsidian create name=... content=... 传带中文/$/引号的内容 → PowerShell 可能截断或转义 ✅ 直接使用 Python 写文件到 vault 目录

• 插件安装

1.1 CLI 安装 obsidian plugin:install id=obsidian-chartsview-plugin obsidian plugin:enable id=obsidian-chartsview-plugin 1.2 查看图表 必须在 阅读模式/预览模式（Reading/Preview Mode）下才能看到图表 快捷键：Ctrl+E（Windows/Linux）或 Cmd+E（Mac） 编辑模式（Source/Edit Mode）下只会显示代码块 1.3 插件丢失后的恢复 如果 obsidian plugins 不再列出 obsidian-chartsview-plugin（这可能发生在 IPC 调用失败后）： # 步骤 1：重新安装（它会说“已经安装” — 这是正常的） obsidian plugin:install id=obsidian-chartsview-plugin # 步骤 2：启用它 obsidian plugin:enable id=obsidian-chartsview-plugin # 步骤 3：验证 obsidian plugins | Select-String "chartsview" 如果图表仍然无法渲染，请完全关闭并重新打开 Obsidian。

• 图表语法 — 完整参考

图表是带有语言 chartsview 的围栏代码块：

type: Pie # 必需：Pie/Bar/Column/Line/Scatter
data: # 必需：对象数组 - 每个数据项都是一个带有命名字段的对象
field1: value1
field2: value2
options: # 必需：图表配置
xField: "field1" # 哪个字段映射到 X 轴
yField: "field2" # 哪个字段映射到 Y 轴

2.1 数据格式详解 数据部分是 YAML 对象数组。每个对象都有您自己命名的字段。 数据：- type: OpenAI # 字段名 = "type"，值 = "OpenAI" value: 45 # 字段名 = "value"，值 = 45

• type: DeepSeek # 第二个数据项

value: 30 关键规则：无论您在数据中使用什么字段名，您都必须在 options.xField、options.yField、options.angleField、options.colorField 和 options.label.formatter 函数体（通过 datum.fieldName）中一致地引用它们。

2.2 options 字段说明 options： xField: "fieldName" # X 轴映射的字段名（必须加双引号） yField: "fieldName" # Y 轴映射的字段名（必须加双引号） angleField: "fieldName" # 饼图：扇形大小映射的字段 colorField: "fieldName" # 按字段值自动分配颜色 seriesField: "fieldName" # 按字段值分组（多系列对比时使用。只有一组数据可以省略） radius: 0.7 # 饼图半径比例 smooth: true # 折线是否平滑 legend: display: true # 是否显示图例 position: "bottom" # "top"|"bottom"|"left"|"right" label: # 标注配置（一直显示在图表上的文字） position: "top" # "top"/"right"/"outer"/"inner" formatter: function formatter(datum) { return datum.fieldName + " " + datum.otherField; } offset: 5 style: fill: "#333" fontSize: 11 xAxis: title: text: "轴标题" yAxis: max: 20 # Y 轴最大值（Column 必须设置，给顶端标注留空间） point: size: 4 # 折线图/散点图数据点大小

2.3 formatter 函数详解 formatter 函数作为 YAML 中的 JavaScript 函数编写： label: formatter: function formatter(datum) { return datum.fieldName + " " + datum.fieldName2; } datum 对象 = 数据数组中的每个元素。您的数据有什么字段，datum 就有什么属性。 例如，如果数据是： 数据：- model: GPT-5 price: 15.00 那么 datum.model = "GPT-5"，datum.price = 15.00。 常见 formatter 写法（全部已验证可工作）： return datum.type + ' ' + datum.value + '%'; # 饼图：OpenAI 45% return '$' + datum.price.toFixed(2); # 柱状图：$15.00 return datum.price; # 折线图：15 return datum.model + ': $' + datum.price.toFixed(2); # 组合字段：GPT-5: $15.00 $ 符号说明：单引号 '$' 和双引号 "$" 在 YAML 中都能正常工作。 已验证的参考模板（W21-市场图谱）使用的是 '$'。两种写法都 OK。

• 图表模板（已全部在 Obsidian 中验证通过）

3.1 Pie（饼图）— 有标注 type: Pie 数据：- type: 极低价($0.05-0.30/M) value: 42

• type: 中端($0.30-1.00/M)

value: 38

• type: 高端($1.00-5.00/M)

value: 15

• type: 超旗舰($5+/M)

value: 5 options: angleField: "value" # 扇形大小 = value 字段 colorField: "type" # 每个 type 分配不同颜色 radius: 0.7 # 饼图半径比例 label: type: "outer" # 标注在饼图外部 formatter: function formatter(datum) { return datum.type + ' ' + datum.value + '%'; } offset: 15 # 标注离饼图边缘的距离 style: fontSize: 10 legend: position: "bottom"