Chart.xkcd介绍
Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的图表。它在GitHub上已经有 7.6K 个Star了。
快速入手
使用 Chart.xkcd 很容易，只需页面中包含库的引用和一个用于显示图表的 节点即可。
我用 本博客 动态💬 栏目的顶端图表做个说明：
关键代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--将 SVG 元素直接嵌入 HTML 页面中-->
<svg class="line-chart"></svg>
<!--引入 JS 库-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
//关键代码块
const svg = document.querySelector('.line-chart')
new chartXkcd.Line(svg, {
title: '',
xLabel: '',
yLabel: '',
data: {...},
options: {},
});
</script>
</body>
</html>
参数说明
- title：图表的标题
- xLabel：图表的 x 标签
- yLabel：图表的 y 标签
- data：需要可视化的数据
- options：自定义设置
- yTickCount: y轴上看到的刻度号数量 （默认3）
- legendPosition：放置图例的位置
chartXkcd.config.positionType.upLeft
...upRIght
...downLeft
...downRIght
- dataColors: 不同颜色的数据集数组
- fontFamily: 定制字体
- unxkcdify: 禁用xkcd效果
图表类型支持
- 折线图 Line
- XY图 XY
- 条形图 Bar
- 甜甜圈图 Pie
- 雷达图 Radar
Hugo Shortcode
新建layouts/shortcodes/chart_xkcd.html
<div>
<svg class='{{ .Get "name" }}'></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg{{ .Get "name" | safeJS }} = document.querySelector('.{{ .Get "name" }}');
new chartXkcd.{{ .Get "type" | safeJS }}(svg{{ .Get "name" | safeJS }},{
{{ .Inner | safeJS }}
});
</script>
</div>
XY图使用举例
以上例子的代码👇 📸 by Polacode