Repolode
提交项目
timqian

timqian/chart.xkcd

一个 JavaScript 图表库，用 SVG 绘制手绘、卡通风格（xkcd 风格）的图表。

在 GitHub 查看官网
Star
7,872
Fork
207
未关闭 Issue
3
最近提交
17天前

这是什么？

chart.xkcd 是一个 JavaScript 图表库，可以绘制带有手绘、卡通感的图表，风格灵感来自 xkcd 漫画。图表渲染在页面中的单个 SVG 元素里，只需引入脚本并指定一个 <svg> 节点即可生成图表。

使用时通过 chartXkcd.Line 等构造函数，传入目标 SVG 节点，再配置标题、坐标轴标签以及包含 labels 和 datasets 的数据对象。库可以通过 CDN 或 npm 引入，项目还提供了文档站点和示例。

它适合用于非正式的演示、博客文章，或者不需要正式商务风格的示意图。

核心功能

  • 01以手绘、卡通风格渲染折线图等多种图表。
  • 02所有内容绘制在页面中的一个 SVG 元素里。
  • 03通过包含 labels 和 datasets 的简单数据对象进行配置。
  • 04可通过 CDN 或 npm 引入，作为普通浏览器脚本使用。
  • 05支持设置标题以及 x、y 轴标签。

适用场景

  • 在博客文章或演示文稿中加入轻松、非正式的图表。
  • 用手绘风格展示估算或计划数据。
  • 在无需构建步骤的静态 HTML 页面中嵌入快速图表。

快速上手

  1. 1

    在页面中引入 chart.xkcd 脚本并添加一个 SVG 节点

    <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script>
  2. 2

    在 SVG 元素上使用 new chartXkcd.Line 创建折线图

收录于专题

前端框架与界面组件数据科学课程与工具

标签

#chart#svg#data-visualization#javascript#hand-drawn#frontend#graph#html5#html5-charts#svg-sprite

常见问题

chart.xkcd 是什么？
一个 JavaScript 图表库，用 SVG 绘制手绘、卡通风格（xkcd 风格）的图表。 chart.xkcd 是一个 JavaScript 图表库，可以绘制带有手绘、卡通感的图表，风格灵感来自 xkcd 漫画。图表渲染在页面中的单个 SVG 元素里，只需引入脚本并指定一个 <svg> 节点即可生成图表。
chart.xkcd 可以免费使用吗？用的什么许可证？
chart.xkcd 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
chart.xkcd 还在维护吗？
活跃维护中。chart.xkcd 最近一次提交是在 2026年10月21日。
chart.xkcd 适合用来做什么？
在博客文章或演示文稿中加入轻松、非正式的图表。 用手绘风格展示估算或计划数据。 在无需构建步骤的静态 HTML 页面中嵌入快速图表。
chart.xkcd 怎么安装和运行？
在页面中引入 chart.xkcd 脚本并添加一个 SVG 节点: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> 在 SVG 元素上使用 new chartXkcd.Line 创建折线图
在哪里获取 chart.xkcd？
源代码和安装说明在 GitHub 上：https://github.com/timqian/chart.xkcd

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目