如何在黑曜石数据视图中创建进度条

Question

我想创建进度条来查看这一年中我在 Obsidian 中不同主题的进展。

我已经检查了几个选项，例如本教程，但我似乎不清楚： https://obsidianttrpgtutorials.com/Obsidian+TTRPG+Tutorials/Plugin+Tutorials/Dataview/DataviewJS+-+Progress+Bar+on+Tasks

在以下示例中，他们提供：

```dataviewjs
    (await dv.tryQuery('TASK FROM "Test" ')).values.length
    const Tasks = dv.page("Test").file.tasks
    
    let CompletedTasks = Tasks
        .where(t => t.completed)
    
    dv.span(
        "![progress](https://progress-bar.dev/"
        + parseInt((CompletedTasks.length / Tasks.length) * 100)
        + "/)"
    )

- [ ] Quest 1
- [ ] Quest 2
- [ ] Quest 3
- [ ] Quest 4
- [ ] Quest 5

我需要修改什么才能获得进度条？

Answer 1

您链接的示例对我来说是开箱即用的。让我们看看他们是如何运作的。

网页进度条

这个进度条是从一个名为 https://progress-bar.dev/ 的网站嵌入的，该网站可以按需生成进度条图片。 DataviewJS 看起来像这样：

const Tasks = dv.page("Test").file.tasks
    
let CompletedTasks = Tasks
    .where(t => t.completed)
    
dv.span(
    "![progress](https://progress-bar.dev/"
    + parseInt((CompletedTasks.length / Tasks.length) * 100)
    + "/)"
)

1. 从名为

   tasks

   的页面获取

   "Test"

   （复选框）并将结果存储为

   Tasks

   。
2. 将 completed 任务复制到另一个变量

   CompletedTasks

   。
3. 构造一个

   https://progress-bar.dev/80/

   形状的URL，计算百分比为

   (Tasks / CompletedTasks) * 100

   ，并用

   parseInt()

   四舍五入小数。
4. 在普通 Markdown 中嵌入图片：

HTML 进度条

这是一个原生 HTML 进度条，因此它可以离线工作，并且如果您愿意，可以使用 CSS 进行自定义。该示例使用内联 DataviewJS 查询，我将在此处将其分成单独的行：

const value = Math.round((
  (dv.current().file.tasks.where(t => t.completed).length) / (dv.current().file.tasks).length || 0
) * 100);

"<progress value='" + value + "' max='100'></progress>" + " " + value + "%"

1. 计算百分比为

   tasks.where(t => t.completed).length

   除以

   file.tasks.length

   ，并用

   Math.round()

   对数字进行四舍五入（如果任务未加载，则使用

   0

   作为后备）。
2. 将百分比存储为

   value

   。
3. 通过将字符串连接在一起创建 HTML 进度条，输出：

   <progress value='80' max='100'></progress> 80%

自己使用此代码

您可以通过调用

dv.current()

或

dv.page("My note")

选择不同的注释来选择进度条使用哪个注释。对于您需要执行的任何其他操作，请通读 Dataview 文档 并了解其 JavaScript API。

https://progress-bar.dev/ 实际上也有一些额外的命令来自定义栏，例如

title

和

scale

，你可以在他们的 GitHub 上看到一些示例。

祝你设计一个有趣的黑曜石仪表板好运！