Obsidian 插件：Obsidian Charts 为 Obsidian 中的笔记增加一个图表功能

概述

为 Obsidian 中的笔记增加一个图表功能，将表格快速转化为图表，包含折线图，柱状图，饼图等等多种形式，使用 chart.js 和 dataviewjs 可以实现更多数据的绘图。

使用

基础格式

这些内容是每个图表类型都需要的基本元素

type:  //类型选择
labels: [] //内容项
series:    //数据项
- title: "" //数据标题
  data: []  //数据
- title: ""  //数据标题2
  data: []  //数据2
修饰符: xxx

不同图表类型

常见图表类型的基础语法

柱状图

type: bar
labels: [内容1,内容2,内容3]
series:
- title: 数据1
  data: [2,4,3]
width: 70%
labelColors: true

折线图

type: line
labels: [内容1,内容2,内容3]
series:
- title: 数据1
  data: [2,4,3]
width: 70%
labelColors: true

饼图

type: pie
labels: [内容1,内容2,内容3]
series:
- title: 数据1
  data: [2,4,3]
width: 40%
labelColors: true

圆环图

type: doughnut
labels: [内容1,内容2,内容3]
series:
- title: 数据1
  data: [2,4,3]
width: 40%
labelColors: true

雷达图

type: radar
labels: [内容1,内容2,内容3]
series:
- title: 数据1
  data: [2,4,3]
width: 40%
labelColors: true

极地图

type: polarArea
labels: [内容1,内容2,内容3]
series:
- title: 数据1
  data: [2,4,3]
width: 40%
labelColors: true

命令菜单

• Obsidian Charts: Create Chart from Table (Column orientedLayout)：将表格转化为图谱，按行
• Obsidian Charts: Create Chart from Table (Row orientedLayout)：按列
• Obsidian Charts: Create Image from Chart：将图表转化为图片插入
• Obsidian Charts: Insert new Chart：可视化插入一个图表。

设置菜单

• Show Button in Context Menu：在编辑器菜单增加一个插入图表的命令。
• Enable Theme Colors：使用主题或 css 的颜色
• lmage Format：插入图片的格式
• lmage Quality：插入图片的质量

修饰语

width

限制图表宽度大小，默认 100%

type: bar 
id: table-001  
width: 90%

fill

填充折线图下的轨迹，默认 false 不填充。（true/false）

type: line
id: table-001  
width: 80%
fill: true

bestFit

在折线图中用于生成最适合给定折线的线

• bestFit：true/false：是否生成最适合的折线。
• bestFitTitle：” 文本 ” 指定最适合折线的标题
• bestFitNumber：行索引，从 0 开始。指定哪一行的数据

type: line
labels: [Monday,Tuesday,Wednesday,Thursday,Friday]
series:
- title: Title 1
  data: [1,2,1,4,5]
- title: Title 2
  data: [5,8,6,7,6]
- title: Title 3
  data: [8,6,5,3,4]
bestFit: true
bestFitTitle: "名称"
bestFitNumber: 1
width: 80%

spanGaps

跳过缺失的数据进行绘图

type: line
labels: [内容1,内容2,内容3,内容4,内容5]
series:
- title: 缺失数据
  data: [3,null,5,null,3]
- title: 正常数据
  data: [2,3,4,3,2]
width: 70%
spanGaps: true

tension

折线图的平滑度（0~1）

type: line
id: table-001  
width: 80%
tension: 0.8

beginAtZero

强制将图表设置为从 0 开始，否则将剪掉所有未使用的空间。

type: line
labels: [内容1,内容2,内容3,内容4,内容5]
series:
- title: 最小为2的数据
  data: [2,3,4,3,2]
width: 70%
beginAtZero: true

legend

图例修饰

• legend: false/true 是否显示图例
• legendPosition：top/left/bottom/right 图例的显示位置

type: line
id: table-001  
width: 80%
legendPosition: bottom

indexAxis

设定坐标轴（x/y）

type: bar
id: table-001  
width: 80%
indexAxis: y

stacked

堆叠展示数据。

type: bar
id: table-001  
width: 80%
stacked: true

Title

• x/yTitle：设置 x 轴/y 轴标题

type: bar
id: table-001  
width: 80%
xTitle: "x标题"
yTitle: "y标题"

Reverse

• x/yReverse：反转它所应用的轴，交换正负位置

type: bar
id: table-001  
width: 80%
yReverse: true

Min/Max

指定轴的最小值和最大值

• xMax
• yMin
• Min
• rMax

type: line
id: table-001  
width: 80%
yMax: 10

Display

• Display：轴是否可见
• TickDisplay：轴刻度是否可见

type: line
id: table-001  
width: 80%
yDisplay: false
xTickDisplay: false

time

将 X 轴上使用日期的按照时间长度进行组织。（day，week，month，year）

    type: line
    labels: [2023-01-01,2023-02-02,2023-02-15,2023-03-04,2023-04-05]
    series:
        - title: Title 1
          data: [4,2,3,4,5]
        - title: Title 2
          data: [5,4,3,2,2]
    time: week

transparency

覆盖图表元素的内部的不透明度（0~1）默认 0.25

type: line
id: table-001  
width: 80%
transparency: 0.9

美化

通过 css 代码 设置图表样式

:root {
    --chart-color-1: #ff00ff; 
    --chart-color-x: rgb(255,255,255);
}

使用 Dataview 数据绘图

数据

呈现 3 个内容，每个内容包含 2 个值域

• 内容一:: 内容 1
  • 数据甲一:: 10
  • 数据乙一:: 13
• 内容二:: 内容 2
  • 数据甲二:: 14
  • 数据乙二:: 12
• 内容三:: 内容 3
  • 数据甲三:: 12
  • 数据乙三:: 15

API 方法

使用标准的 Chart.js中文网 数据和其中支持的所有内容。

const file = dv.current() //以当前文件数据为例子
const chartData = {  //定义chart的内容
    type: 'line',  //类型
    data: {  //数据参数 
        labels: [file.内容一,file.内容二,file.内容三],  //查找内容项
        datasets: [
            //数据1
            {  
            label: ["数据1"],  
            data: [file.数据甲一,file.数据甲二,file.数据甲三],
            borderColor: '#36A2EB',//边颜色
            backgroundColor: '#9BD0F5',//背景色
            borderWidth: 1 ,//边宽度
            },
            //数据2
            {  
            label: ["数据2"],
            data: [file.数据乙一,file.数据乙二,file.数据乙三],
            borderColor: '#fffddd',//边颜色
            backgroundColor: '#fffddd',//背景色
            borderWidth: 1 ,//边宽度
            }],
    },
        options: {  //其余chart.js控制
        maintainAspectRatio: false, // 不保持纵横比
        aspectRatio: 2, // 宽高比例为2:1
        layout: {
            padding: {
                left: 20,
                right: 20,
                top: 20,
                bottom: 20
            }
        },
        plugins: {
            legend: {
                display: true,
                position: 'bottom' // 图例显示在底部
            }
        }
    }
}
window.renderChart(chartData, this.container);//调取接口

代码块方法

const file = dv.current() //以当前文件数据为例子

dv.paragraph(`\`\`\`chart  //渲染一个代码块
    type: bar  
    labels: [${file.内容一},${file.内容二},${file.内容三}]
    series:
    - title: 数据1
      data: [${file.数据甲一},${file.数据甲二},${file.数据甲三}]
    - title: 数据2
      data: [${file.数据乙一},${file.数据乙二},${file.数据乙三}]
    width: 80%
\`\`\``)

表格数据绘图

数据表格

假设这里引用成 ^table-001

id 引用法

在表格下添加块 id^table-001，然后

type: bar //选择类型
id: table-001  //输入块id
file: 文件夹/路径/文化.md  //输入文件名或者路径使用其他文件下的块，默认当前文件
layout: rows/columns //选择内容是行或者列，默认为行
select: [内容1,内容3]  //选择指定内容，默认全部

命令法

鼠标选择表格后，运行 chart 命令进行替换为图表。

其他参考

• Modifiers - Obsidian Charts

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。