在 Antora 中嵌入 Vega-Lite 图表答案

【问题标题】：Embed Vega-Lite Diagrams in Antora在 Antora 中嵌入 Vega-Lite 图表
【发布时间】：2020-12-16 15:00:35
【问题描述】：

我正在尝试将这个 vega-lite 图嵌入到我的 antora 文档中：https://vega.github.io/vega-lite/examples/line_overlay.html

我的 Asciidoc 文件如下所示：

... some text ...

== Attachments
[vegalite, rendered-vega-image, svg]
----
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "data/stocks.csv"},
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date"},
    "y": {"aggregate":"mean", "field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }
}
----

... some more text ...

问题是找不到包含我的数据的 CSV 文件。我尝试了我想象的每条路径......相对和绝对文件系统路径以及相对和绝对 http url。仍然我总是收到这条消息：

[DONE] build ui bundle
Skipping vegalite block. No such file: http://localhost:8080/vegalite/svg/eNpVkEFywyAMRfc5BcN0mdibdpNtj9D0AAQrWA0gArKnnozvXoHbpl0Zv9F_X3DfKaWfih0hGH1UemRO5dj3MzjTOeRxOndI_TbQ6MEjQz8_dx-Fot7X_ADFZkyMAsTxxmSvKmW0UBRd1Is6gR3VK4VkIlY2Q1YnDNB95w3X8ruesq-Cu2E2dgwQuQyY1z5QRKaM0R08OVe_GRJlllNfal3pbJn12nTB5GvVyVn-eElQpR4jtDphiTCyQM4TCNliEC0NInxEP9tSLIu-S3-VLGCy3it9QfBDBbI6bLUyv7R541yWdxJ-1AFM_DffXqWSn7Vuk4mMbBjnh8iSp9xkv8GyhDP5v8lIAaPxeq032K1fIi6OZQ==
[DONE] build docs

Skipping vegalite block 不应出现。

我尝试使用直接在 json 块中定义的数据进行 vega-lite。这个 sn-p 有效。所以 Vega-Lite 在一般情况下是有效的（我使用 Kroki 服务器来生成图表）。

[vegalite, rendered-vega-image, svg]
----
{
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
----

直接在图表定义中定义我的数据对我来说不是一个解决方案。现在我只是想用 demo-CSV 文件让它工作。但之后我将切换到我自己的自动生成的大型 CSV 文件。我的真实 CSV 文件和演示文件都位于 docs/modules/technical-docs/assets/attachments/monitoring-logging-reporting/stocks.csv。

我的一般设置包括几个项目。

项目包含 antora playbook 和 shell-script 以在我的 localhost 上生成我的文档
包含 Asciidoc、CSV 文件和大量其他文档和源代码的项目
其他几个项目包含与当前问题无关的 asciidoc 文档。

有人有什么想法吗？谢谢你的帮助。

【问题讨论】：

标签： vega-lite asciidoc antora

【解决方案1】：

Kroki 提供了限制对文件系统和网络上文件的访问的安全级别。每个级别都包含在之前的安全级别中启用的限制：

UNSAFE：禁用任何安全功能。
SAFE：假设图表库安全模式请求清理就足够了。
SECURE：防止尝试从文件系统或网络读取文件。

默认情况下，Kroki 以SECURE 模式运行。

因此，"data": {"url": "data/stocks.csv"} 将被删除/忽略。

如果您使用 Asciidoctor Kroki，预处理器应解析路径、读取内容并将data.url 替换为实际值。见：https://github.com/Mogztter/asciidoctor-kroki

另外，由于您正在运行 Kroki 的本地实例，您可以使用 KROKI_SAFE_MODE=unsafe 环境变量将安全模式配置为 unsafe。

【讨论】：