chart.xkcd 可以用来绘制手绘样式的图表，使用简单，样式也挺好看

简单使用

  • 代码

    index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.line-chart')
​
  new chartXkcd.Line(svg, {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollors',
    data: {
      labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'],
      datasets: [{
        label: 'Plan',
        data: [30, 70, 200, 300, 500 ,800, 1500, 2900, 5000, 8000],
      }, {
        label: 'Reality',
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
      }]
    },
  });
</script>
</body>
</html>
  • 启动效果

    使用live-server

live-server
 

参考资料

https://timqian.com/chart.xkcd/
https://github.com/timqian/chart.xkcd

chart.xkcd 可绘制粗略，开通，手绘样式的图表库的更多相关文章

  1. Python中使用cutecharts实现简单的手绘风格的图表

    场景 效果 cutecharts的Github: https://github.com/chenjiandongx/cutecharts 注: 博客: https://blog.csdn.net/ba ...

  2. 手绘风格的 JS 图表库：Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

  3. JavaScript手绘风格的图形库RoughJS使用指南

    RoughJS是一个轻量级的JavaScript图形库(压缩后约9KB),可以让你在网页上绘制素描风格.手绘样式般的图形.RoughJS定义了绘制直线,曲线,圆弧,多边形,圆和椭圆的图元,同时它还支持 ...

  4. Python绘图还在用Matplotlib？out了 ！发现一款手绘可视化神器！

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. GitHub 地址:https://github.com/chenjian ...

  5. IOS 手绘地图导航

    手绘地图导航 第三方库 NAMapKit, 1)支持在手绘图上标记.缩放 2)支持在单张图片 3)支持瓦片小图片 思路 前提:美工已经切好手绘图,并告知我们当前的缩放级别. 1)确定好手绘图左上角点在 ...

  6. 发现一款手绘可视化神器！Python绘图还在用Matplotlib？out了 ！

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取htt ...

  7. UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制

    本篇作为技术分享系列的第二篇,详细讲一下文字的解析和绘制,这部分功能的研究和最终实现由团队共同完成,目前还在寻找更理想的实现方式. 首先看一下文字绘制在手绘视频中的应用场景 文字是手绘视频中很重要的表 ...

  8. arcgis api 4.x for js 自定义 Draw 绘制手绘面以及手绘线，只针对二维视图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  9. EDIUS手绘遮罩功能如何用

    学了这么久的EDIUS视频编辑软件,你们学的怎么样了呢?你们知道EIDUS手绘遮罩的用法么,会熟练地使用它么?如果你们还没有学到这一知识点的话也不要着急,因为你们看完下面这篇文章就会明白了.事不宜迟, ...

随机推荐

  1. ArrayDeque详解

    美人如斯! ArrayDeque是java中对双端队列的线性实现 一.特性 无容量大小限制,容量按需增长: 非线程安全队列,无同步策略,不支持多线程安全访问: 当用作栈时,性能优于Stack,当用于队 ...

  2. Matplotlib中figure、subplot、axes、axis的区别

    参考链接:https://blog.csdn.net/JasonZhu_csdn/article/details/85860963 画图板/画布: 这是一个基础载体,类似实际的画图板,用pyplot. ...

  3. 给基于对话框的MFC程序添加状态栏并实时显示时间

    转载自丝雪儿 1.首先在string table 里添加两个字串,ID分别为IDS_INDICATOR_MESSAGE and IDS_INDICATOR_TIME 2.在你的 dlg.h 类里面加个 ...

  4. 关于js保留两位小数方法总结

    https://www.cnblogs.com/le220/p/9756881.htmlhttps://blog.csdn.net/hyb1234hi/article/details/84142721 ...

  5. 前端工程师拿到全新的 Mac 需要做哪些准备

    最近苹果退出了新款 Mac,用了3年15款Pro之后,终于盼到18款的降价,于是含泪更新换代 但是每次换电脑,重装环境的好多东西记不清,于是记个笔记 一.终端 安装 zsh sh -c "$ ...

  6. python小项目之文本编辑器

    高考完后这么久才想起这系列教程,实在抱歉,现在该来继续教程了. 本节利用前面所学知识,来完成一个小工具--文本编辑器! tkinter 在实现文本编辑器之前,先来了解下tkinter这个python库 ...

  7. Android实现二维码扫描功能

    1.效果预览 先上图展示效果(模拟器没有摄像头,录出来效果不好,将就看) 2.集成步骤 1.拷贝本项目demo中的com.google.zxing5个包引入到自己的项目中. 2.拷贝本项目demo中的 ...

  8. 最强在线文件格式转换（支持200+文件格式如常用的PDF，DOCX，JPG,GIF,MP3，MP4，FLV,MOBI）（通用）

    网站展示:http://www.alltoall.net/ 分类简洁 支持的所有文件格式展示: 单独展示文档转换: 单独展示PDF转换:

  9. Windows Server 2012 R2 远程桌面自动设置为不允许连接问题解决方案

    用“gpedit.msc”调出策略组设置窗口,在策略组界面点击:计算机配置->管理模块->Windows组件->远程桌面服务->远程桌面会话主机->连接->允许用户 ...

  10. java list map在初始化的时候添加元素

    List<String> list = new ArrayList<String>(){{ add("First Object"); add("S ...