平常要画图表的时候,应该会使用开源的 Chart.js 来画互动式图表。但是在跟大家长的一样的图表、或是自己加 CSS 之间做取舍,或许可以考虑用 Chart.xkcd 来画出卡通样式、手写风的图表。

xkcd 是个“关于浪漫、讽刺、数学和语言的网络漫画”。大多都是简单的火柴人,里面有很多讽刺工程师的梗。下图是名为 Automation 的 xkcd 漫画。

Chart.xkcd 的用法用起来和 Chart.js 很像,如果你之前有用过的话,上手应该会相当容易。

首先要载入 Chart.xkcd 的 script。我撰写这篇文章的当下版本是 1.0.1,可以到网站上看看他的最新版本是多少。

接着在 html 上新增一个 svg 容器,之后我们的图表会画在这个容器里面。

因为我们要把图绘制在刚刚的容器中,所以我们要先把容器选起来:

接着就可以开始画图了,这边以长条图为例:

更可以画圆饼图: