Blowfish 图表使用#
Blowfish 主题内置了 Chart.js 支持，可以通过 Frontmatter 变量灵活地管理图表数据。
为什么使用 Frontmatter 变量？#
- 数据集中管理：所有数据在文章开头定义，便于查看和修改
- 数据复用：同一组数据可用于多个图表
- 维护方便：更新数据时只需修改 frontmatter
使用 Frontmatter 管理图表数据#
虽然 Hugo 不能直接在 <script> 标签中处理 frontmatter 变量，但你仍然可以在 frontmatter 中定义数据结构，然后复制到 shortcode 中使用。这样做的好处是：
- 数据集中管理：所有数据在文章开头定义
- 便于维护：修改数据时只需更新 frontmatter
- 结构清晰：数据格式一目了然
在 Frontmatter 中定义数据#
+++
# 图表数据参考
# 柱状图
barChartLabels = ["一月", "二月", "三月", "四月", "五月", "六月"]
barChartValues = [65, 59, 80, 81, 56, 70]
barChartLabel = "月度活跃度"
# 饼图
pieChartLabels = ["编程", "阅读", "写作", "运动", "其他"]
pieChartValues = [35, 20, 15, 20, 10]
# 折线图
lineChartLabels = ["Week 1", "Week 2", "Week 3", "Week 4"]
lineChartValues1 = [12, 19, 15, 25]
lineChartValues2 = [8, 15, 12, 20]
+++使用数据创建图表#
将 frontmatter 中定义的数据复制到 shortcode 中：
图表示例#
柱状图#
饼图#
折线图#
高级技巧#
使用多数据集#
在一个图表中显示多个数据集：
自定义图表选项#
通过 options 参数自定义图表外观：
注意事项#
- 数据直接嵌入：图表数据需要直接写在 shortcode 中，不能通过 JavaScript 动态读取 frontmatter
- 推荐做法：在 frontmatter 中定义数据作为参考，然后复制到 shortcode 中
- 语法格式：shortcode 使用 YAML 格式，注意引号和逗号
- 性能考虑：大量数据时考虑分页或简化图表