1. 概述
观察数据最好的方式就是将数据可视化，即用折线图、柱状图、饼图等形式将数据呈现出来。
Obsidian-Charts 插件就是做这个事情的，不仅如此，Obsidian-Charts 插件创建的图形是交互式图形，用户可以通过鼠标与图形交互，比如隐藏部分数据、观察数据点的具体数值。Obsidian-Charts 插件能够快速创建折线图 、柱状图、饼图、环状图、雷达图、极地图等类型的交互式图形。它还可以把 Obsidian 中的表格一键转化为交互式图形。同时该插件还能将生成的交互式图形转化为静态图片。Obsidian-Charts 插件为您建立了一条从数据到交互式图形，再到静态图片的阳光大道，增强了 Obsidian 的应用场景。
该插件是开源的，代码托管在 Github 上，地址: https://github.com/phibr0/obsidian-charts/
本文介绍的是 Obsidian-Charts 3.1.1 版本的功能，后续版本的功能请关注该插件的 Github 主页。
下面我们介绍这个插件的安装和使用。
2. Obsidian-Charts 插件安装
对 Obsidian 插件安装比较熟悉的读者可以跳过本节。
在国内在线安装 Obsidian 插件有困难，很难连上 Obsidian 的插件服务器，因此在此只介绍离线安装。安装步骤如下：
- 访问 https://github.com/phibr0/obsidian-charts/releases/；
- 将下图红框中的三个文件下载到本地；
- 如果 Obsidian 是打开的先关闭它；
- 在你的 Obsidian 库的
.obsidian/plugins目录下新建obsidian-charts文件夹 （如果plugins目录不存在就创建一个）； - 将下载的3个文件拷贝到新建的
obsidian-charts文件夹。
为了方便读者，我们已经将这三个文件打包，下载链接：obsidian-charts-plugin-3.1.1.zip。
- 启动 Obsidian ；
- 按下面的视频激活 obsidian-charts 插件。
3. 六种图形类型
使用 Obsidian-Charts 插件可以创建六种类型的图形：折线图 、柱状图、饼图、环状图、雷达图、极地图。
3.1 绘制折线图 (line)
折线图是用线条连接数据点，一般用于显示变化趋势或两个数据集的比较。
下面的代码用折线图显示3个股票周一至周五的收盘价。
```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.2 绘制柱状图 (bar)
柱状图是用竖形的柱子显示数据，用于显示数据趋势，或并排比较多个数据集。
下面的代码用柱状图显示3个股票周一至周五的收盘价。
```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] ```
显示效果如下：
3.3 绘制饼图 (pie)
饼图是常用的图表之一。一个圆形的饼被分成多块，每块的圆弧表示数据的比例值。该图表可直观展示数据之间的比例关系。
下面的代码用饼图显示5个水果所占的比例。
```chart type: pie labels: [苹果,橘子,桃,西瓜,荔枝] series: - title: Title 1 data: [1,2,3,4,5] width: 70% labelColors: true ```
显示效果如下：
有个参数是折线图和柱状图没有的，需要说明一下。
labelColors，用于指定是否用不同颜色区分数据项，默认为false。一般会把这个参数设置为true，否则很难区分不同的数据项。
3.4 绘制环状图 (doughnut)
环状图与饼图类似，不同之处在于：饼图使用扇形区域表示数据，环状图使用扇形的圆环表示数据。其实环状图是在饼图的基础上，以圆点为中心切去一块圆形形成的，一般切去的圆形的半径是外圆半径的50%。
下面的代码用环状图显示5个水果所占的比例。
```chart type: doughnut labels: [苹果,橘子,桃,西瓜,荔枝] series: - title: Title 1 data: [1,2,3,4,5] width: 70% labelColors: true ```
显示效果如下：
3.5 绘制极地图 (polarArea)
极地图也是用饼形来显示数据，这一点和饼图相似，不同之处在于：饼图中每块扇形的半径是一样的，但扇形的圆心角不同，圆心角的大小由数据大小决定，而极地图每块扇形的圆心角是一样的，但扇形的半径不同，半径的大小由数据大小决定。
下面的代码用极地图显示5个水果数量的对比。
```chart type: polarArea labels: [苹果,橘子,桃,西瓜,荔枝] series: - title: Title 1 data: [1,2,3,4,5] width: 70% labelColors: true ```
显示效果如下：
3.6 绘制雷达图 (radar)
雷达图是显示多个数据点和它们之间差异的一种方式，通常用于比较两个或更多不同数据集的点。
下面的代码用雷达图显示小明和小芳2个小朋友七门功课的成绩分布，从图中可以直观的看出小明和小芳的强项和弱项。
```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% ```
显示效果如下：
4. 属性说明
Obsidian-Charts 插件使用属性来控制绘图行为，因此需要对这些属性有一些基本的了解。下面通过说明和示例为大家介绍这些属性。
4.1 width
- 功能：控制图形显示宽度。默认宽度为100%。
- 适用图型：所有
- 可以用固定值指定宽度，如
width: 300px - 也可以用百分比指定宽度，如
width: 50% - 默认值： 100%
演示如下：
4.2 fill
- 功能：控制折线下方是否填充颜色。默认不填充颜色。
- 适用图型：折线图
- 数据类型：布尔
- 取值：
true,false - 默认值：
false
演示如下：
4.3 spanGaps
- 功能：控制绘图时遇到数据点为
null时的行为。有两种行为，一是绘制上一个有效点到下一个有效点的连线，二是不绘制上一个有效点到下一个有效点的连线。默认不绘制。 - 适用图型：折线图
- 数据类型：布尔
- 取值：
true,false - 默认值：
false
演示如下：
4.4 tension
- 功能：控制贝赛尔曲线的线张力，值为0时绘制直线。默认显示直线。
- 适用图型：折线图
- 数据类型：双精度浮点数
- 取值范围：0-1
- 默认值： 0
演示如下：
4.5 beginAtZero
- 功能：控制折线图的Y轴是否从0开始显示。这个主要用于控制数据集里的数据全部大于0的情况下如何绘图，如果该项设为
true，则Y轴从0开始显示，如果该项设为false，则Y轴从数据集里最小的数据开始显示。默认不从0开始。 - 适用图型：折线图
- 数据类型：布尔
- 取值：
true,false - 默认值：
false
演示如下：
4.6 legend
- 功能：控制是否显示图例。默认显示图例。
- 适用图型：所有
- 数据类型：布尔
- 取值：
true,false - 默认值：
true
演示如下：
4.7 legendPosition
- 功能：控制图例的显示位置。图例可以显示在图形的上、下、左、右四个位置，默认显示在上方。
- 适用图型：所有
- 取值：
top,left,bottom,right - 默认值：
top
演示如下：
4.8 坐标轴属性
坐标轴属性仅适用于折线图和柱状图。
4.8.1 indexAxis
- 功能：控制数据标签显示在x轴上还是显示在y轴上。默认显示在x轴上。
- 适用图型：折线图、柱状图
- 取值：
x,y - 默认值：
x
演示如下：
4.8.2 stacked
- 功能：控制是否以堆叠的形式显示数据集。默认为不堆叠。
- 适用图型：折线图、柱状图
- 数据类型：布尔
- 取值：
true,false - 默认值：
false
演示如下：
4.8.3 Title
- 功能：控制 x 轴或 y 轴的标题。坐标轴默认是没有标题的。如果要给 x 轴添加标题，则在
Title前加x，如：xTitle: "姓名"。如果要给 y 轴添加标题，则在Title前加y，如：yTitle: "数量"。 - 适用图型：折线图、柱状图
- 数据类型：字符串
演示如下：
4.8.4 Reverse
- 功能：控制 x 轴或 y 轴的显示方向。x 轴默认是从左往右显示，y 轴默认是从下往上显示。如果 x 轴要从右往左显示，则在
Reverse前加x，如：xReverse: true。如果 y 轴要从上往下显示，则在Reverse前加y，如：yReverse: true。 - 适用图型：折线图、柱状图
- 数据类型：布尔
- 取值：
true,false - 默认值：
false
演示如下：
4.8.5 Display
- 功能：控制是否显示水平网格线或垂直网格线。这两种网格线默认是显示的。如果要隐藏垂直方向网格线，则在
Display前加x，并将它设置为false，如：xDisplay: false。如果要隐藏水平方向网格线，则在Display前加y，并将它设置为false，如：yDisplay: false。 - 适用图型：折线图、柱状图
- 数据类型：布尔
- 取值：
true,false - 默认值：
true
演示如下：
4.8.6 TickDisplay
- 功能：控制是否显示 x 轴上的刻度标签或 y 轴上的刻度标签。这两种标签默认是显示的。如果要隐藏 x 轴上的刻度标签，则在
TickDisplay前加x，并将它设置为false，如：xTickDisplay: false。如果要隐藏 y 轴上的刻度标签，则在TickDisplay前加y，并将它设置为false，如：yTickDisplay: false。 - 适用图型：折线图、柱状图
- 数据类型：布尔
- 取值：
true,false - 默认值：
true
演示如下：
5. 将表格转换为图形
Obsidian-Charts 插件可以将表格直接装换为图形，这个功能还是很酷的。演示如下：
6. 将图形转换为图片
Obsidian-Charts 插件提供了一个将绘制的图形转化为图片的功能，这个也是比较适用的。具体操作请见下面的视频。
7. 图形交互
Obsidian-Charts 插件创建的所有图形都是可交互的。用户可以用鼠标与图形互动，示例如下：
8. 总结
本文介绍的内容可归纳为下面的导图，希望对您有帮助。我们在知乎上的名字叫小小鸟，欢迎您有空光临。
