本文作者：HelloGitHub-kalifun

图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。

一、介绍

项目地址：https://github.com/timqian/chart.xkcd

Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的图表。

效果是不是很可爱？那下面就跟着 HelloGitHub 发起的《讲解开源项目》的教程一起学习、上手使用起来吧！

二、快速入手

使用 Chart.xkcd 很容易，只需页面中包含库的引用和一个用于显示图表的 <svg> 节点即可。

2.1 代码示例

先用一段简短的代码，让大家了解下基本的参数和代码的样子，后面会有可运行的代码示例片段供大家学习和使用 😁。

<!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>

2.2 参数说明

  • title：图表的标题
  • xLabel：图表的 x 标签
  • yLabel：图表的 y 标签
  • data：需要可视化的数据
  • options：自定义设置

三、图表类型

Chart.xkcd 支持多样的图表类型，下面将逐一讲解和实现：折线图、XY 图、条形图、圆饼/甜甜圈图、雷达图，实现的示例代码完整可运行、注释完整、包含参数说明。

tips：下文中的示例代码均可直接运行，保存为 html 文件便可在本机查看效果。

3.1 折线图

折线图以折线形式显示一系列数据点，它可以用于显示趋势数据或不同数据集的比较。

示例代码

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <!--将 SVG 元素直接嵌入 HTML 页面中--> <