如何通过Hugo简码加载数据生成数据可视化？

Question

Hugo 本机短代码 不管理数据可视化。然而，我发现了一个 Hugo 主题 (DoIt)，它可以通过 ECharts 的短代码来处理数据可视化。使用此主题，ECharts 选项只需以 JSON、YAML 或 TOML 格式插入 ECharts 短代码中。

这是一个例子：

{{< echarts >}}
{
"xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "data": [820, 932, 901, 934, 1290, 1330, 1320],
      "type": "line",
      "areaStyle": {}
    }
  ]
}
{{< /echarts >}}

如何从 CSV 或 JSON 文件加载数据，而不是直接在短代码中加载数据？

上述示例中的数据：

|----------+-------|
| category | value |
|----------+-------|
| Mon      |   820 |
| Tue      |   932 |
| Wed      |   901 |
| Thu      |   934 |
| Fri      |  1290 |
| Sat      |  1330 |
| Sun      |  1320 |
|----------+-------|

input.csv

：

category,value
Mon,820
Tue,932
Wed,901
Thu,934
Fri,1290
Sat,1330
Sun,1320

input.json

：

[
  {
    "category": "Mon",
    "value": 820
  },
  {
    "category": "Tue",
    "value": 932
  },
  {
    "category": "Wed",
    "value": 901
  },
  {
    "category": "Thu",
    "value": 934
  },
  {
    "category": "Fri",
    "value": 1290
  },
  {
    "category": "Sat",
    "value": 1330
  },
  {
    "category": "Sun",
    "value": 1320
  }
]

Answer 1

尝试

os.Readfile

创建布局/短代码/load_file.html：

{{ readFile (.Get "file_name") }} 然后，将以下内容添加到您的页面：

{{< echarts >}}
{{< load_file file_name="path/to/input.json" >}}
{{< /echarts >}}