使用 Obsidian-Charts 插件进行绘制图表 - 公爵书房

4月

本文最后更新于2023年09月02日，已经过了31天没有更新，若内容或图片失效，请留言反馈

概述

观察数据最好的方式就是将数据可视化，即用折线图、柱状图、饼图等形式将数据呈现出来。

Obsidian-Charts 插件就是做这个事情的，不仅如此，Obsidian-Charts 插件创建的图形是交互式图形，用户可以通过鼠标与图形交互，比如隐藏部分数据、观察数据点的具体数值。Obsidian-Charts 插件能够快速创建折线图、柱状图、饼图、环状图、雷达图、极地图等类型的交互式图形。它还可以把 Obsidian 中的表格一键转化为交互式图形。同时该插件还能将生成的交互式图形转化为静态图片。Obsidian-Charts 插件为您建立了一条从数据到交互式图形，再到静态图片的阳光大道，增强了 Obsidian 的应用场景。

该插件是开源的，代码托管在 Github 上，地址: https://github.com/phibr0/obsidian-charts/

下面我们介绍这个插件的安装和使用。

gif图请点击查看哦，不会自动加载展示

Obsidian-Charts 插件安装

对 Obsidian 插件安装比较熟悉的读者可以跳过本节。

在国内在线安装 Obsidian 插件有困难，很难连上 Obsidian 的插件服务器，因此在此只介绍离线安装。安装步骤如下：

访问 https://github.com/phibr0/obsidian-charts/releases/；
将下图红框中的三个文件下载到本地；
如果 Obsidian 是打开的先关闭它；
在你的 Obsidian 库的 .obsidian/plugins 目录下新建 obsidian-charts 文件夹（如果 plugins 目录不存在就创建一个）；
将下载的3个文件拷贝到新建的obsidian-charts 文件夹。

image

为了方便读者，我们已经将这三个文件打包，下载链接：obsidian-charts

启动 Obsidian ；
按下面的视频激活 obsidian-charts 插件。

enable-oc-plugin

六种图形类型

使用 Obsidian-Charts 插件可以创建六种类型的图形：折线图、柱状图、饼图、环状图、雷达图、极地图。

折线图

折线图是用线条连接数据点，一般用于显示变化趋势或两个数据集的比较。

下面的代码用折线图显示3个股票周一至周五的收盘价。

TEXT 代码:

```chart
type: line
labels: [周一,周二,周三,周四,周五]
series:
  - title: 股票A
    data: [1,2,3,4,5]
  - title: 股票B
    data: [5,4,3,2,1]
  - title: 股票C
    data: [8,2,5,1,4]
```

如果将上述代码粘贴到 Obsidian 中，请使用Ctrl+Shift+V 粘贴，以避免粘贴过程中 Obsidian 更改缩进！！！后面的代码同样如此！！！

显示效果如下：

代码很直观，看几眼就能猜出来是什么意思。有几个地方稍微介绍一下。

chart，Obsidian-Charts 插件使用 Obsidian 的代码块来描述绘图信息。它使用了 chart 关键字告诉 Obsidian，下面的代码交给我来处理。
type，用于指明图形类型。可取值包括：line (折线图)、bar (柱状图)、pie (饼图)、doughnut (环状图)、radar (雷达图)、polarArea (极地图)。
labels，用于指定 x 轴标注，如本例中的周一、周二等。
series，声明要绘制的数据集。每一个数据集由 title 和 data 两个属性构成。title 用于声明数据集标签， data 用于声明数据集中的数据，数据用中括号引起来，类似于 python 中的列表。

柱状图

柱状图是用竖形的柱子显示数据，用于显示数据趋势，或并排比较多个数据集。

下面的代码用柱状图显示3个股票周一至周五的收盘价。

TEXT 代码:

```chart
type: bar
labels: [周一,周二,周三,周四,周五]
series:
  - title: 股票A
    data: [1.5,2,3,4,5]
  - title: 股票B
    data: [5,4,3,2,1.5]
  - title: 股票C
    data: [8,2,5,1.5,4]
```

显示效果如下：

饼图

饼图是常用的图表之一。一个圆形的饼被分成多块，每块的圆弧表示数据的比例值。该图表可直观展示数据之间的比例关系。

下面的代码用饼图显示5个水果所占的比例。

TEXT 代码:

```chart
type: pie
labels: [苹果,橘子,桃,西瓜,荔枝]
series:
  - title: Title 1
    data: [1,2,3,4,5]
width: 70%
labelColors: true
```

显示效果如下：

有个参数是折线图和柱状图没有的，需要说明一下。

labelColors，用于指定是否用不同颜色区分数据项，默认为 false。一般会把这个参数设置为true，否则很难区分不同的数据项。

环状图

环状图与饼图类似，不同之处在于：饼图使用扇形区域表示数据，环状图使用扇形的圆环表示数据。其实环状图是在饼图的基础上，以圆点为中心切去一块圆形形成的，一般切去的圆形的半径是外圆半径的50%。

下面的代码用环状图显示5个水果所占的比例。

TEXT 代码:

```chart
type: doughnut
labels: [苹果,橘子,桃,西瓜,荔枝]
series:
  - title: Title 1
    data: [1,2,3,4,5]
width: 70%
labelColors: true
```

显示效果如下：

极地图

极地图也是用饼形来显示数据，这一点和饼图相似，不同之处在于：饼图中每块扇形的半径是一样的，但扇形的圆心角不同，圆心角的大小由数据大小决定，而极地图每块扇形的圆心角是一样的，但扇形的半径不同，半径的大小由数据大小决定。

下面的代码用极地图显示5个水果数量的对比。

TEXT 代码:

```chart
type: polarArea
labels: [苹果,橘子,桃,西瓜,荔枝]
series:
  - title: Title 1
    data: [1,2,3,4,5]
width: 70%
labelColors: true
```

显示效果如下：

雷达图

雷达图是显示多个数据点和它们之间差异的一种方式，通常用于比较两个或更多不同数据集的点。

下面的代码用雷达图显示小明和小芳2个小朋友七门功课的成绩分布，从图中可以直观的看出小明和小芳的强项和弱项。

TEXT 代码:

```chart
type: radar
labels: [数学,物理,化学,语文,英语,地理,历史]
series:
  - title: 小明
    data: [90,80,92,60,77,67,82]
  - title: 小芳
    data: [70,72,60,90,97,100,62]
width: 80%
```

显示效果如下：

属性说明

Obsidian-Charts 插件使用属性来控制绘图行为，因此需要对这些属性有一些基本的了解。下面通过说明和示例为大家介绍这些属性。

width

功能：控制图形显示宽度。默认宽度为100%。
适用图型：所有
可以用固定值指定宽度，如 width: 300px
也可以用百分比指定宽度，如 width: 50%
默认值： 100%

演示如下：

fill

功能：控制折线下方是否填充颜色。默认不填充颜色。
适用图型：折线图
数据类型：布尔
取值：true, false
默认值： false

演示如下：

spanGaps

功能：控制绘图时遇到数据点为 null 时的行为。有两种行为，一是绘制上一个有效点到下一个有效点的连线，二是不绘制上一个有效点到下一个有效点的连线。默认不绘制。
适用图型：折线图
数据类型：布尔
取值：true, false
默认值： false

演示如下：

tension

功能：控制贝赛尔曲线的线张力，值为0时绘制直线。默认显示直线。
适用图型：折线图
数据类型：双精度浮点数
取值范围：0-1
默认值： 0

演示如下：

beginAtZero

功能：控制折线图的Y轴是否从0开始显示。这个主要用于控制数据集里的数据全部大于0的情况下如何绘图，如果该项设为true，则Y轴从0开始显示，如果该项设为false，则Y轴从数据集里最小的数据开始显示。默认不从0开始。
适用图型：折线图
数据类型：布尔
取值：true, false
默认值： false

演示如下：

legend

功能：控制是否显示图例。默认显示图例。
适用图型：所有
数据类型：布尔
取值：true, false
默认值： true

演示如下：

legendPosition

功能：控制图例的显示位置。图例可以显示在图形的上、下、左、右四个位置，默认显示在上方。
适用图型：所有
取值：top, left, bottom, right
默认值： top

演示如下：

坐标轴属性

坐标轴属性仅适用于折线图和柱状图。

indexAxis

功能：控制数据标签显示在x轴上还是显示在y轴上。默认显示在x轴上。
适用图型：折线图、柱状图
取值：x, y
默认值： x

演示如下：

stacked

功能：控制是否以堆叠的形式显示数据集。默认为不堆叠。
适用图型：折线图、柱状图
数据类型：布尔
取值：true, false
默认值： false

演示如下：

Title

功能：控制 x 轴或 y 轴的标题。坐标轴默认是没有标题的。如果要给 x 轴添加标题，则在 Title 前加 x，如：xTitle: "姓名"。如果要给 y 轴添加标题，则在 Title 前加 y，如：yTitle: "数量"。
适用图型：折线图、柱状图
数据类型：字符串

演示如下：

Reverse

功能：控制 x 轴或 y 轴的显示方向。x 轴默认是从左往右显示，y 轴默认是从下往上显示。如果 x 轴要从右往左显示，则在 Reverse 前加 x，如：xReverse: true。如果 y 轴要从上往下显示，则在 Reverse 前加 y，如：yReverse: true。
适用图型：折线图、柱状图
数据类型：布尔
取值：true, false
默认值： false

演示如下：

Display

功能：控制是否显示水平网格线或垂直网格线。这两种网格线默认是显示的。如果要隐藏垂直方向网格线，则在 Display 前加 x，并将它设置为 false，如：xDisplay: false。如果要隐藏水平方向网格线，则在 Display 前加 y，并将它设置为 false，如：yDisplay: false。
适用图型：折线图、柱状图
数据类型：布尔
取值：true, false
默认值： true

演示如下：

TickDisplay

功能：控制是否显示 x 轴上的刻度标签或 y 轴上的刻度标签。这两种标签默认是显示的。如果要隐藏 x 轴上的刻度标签，则在 TickDisplay 前加 x，并将它设置为 false，如：xTickDisplay: false。如果要隐藏 y 轴上的刻度标签，则在 TickDisplay 前加 y，并将它设置为 false，如：yTickDisplay: false。
适用图型：折线图、柱状图
数据类型：布尔
取值：true, false
默认值： true