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. 搭建zipkin并以mysql的方式存储数据

    zipkin以mysql的方式存储 (centos+java8+mysql+zipkin2.3.1) 前言: 这篇教程用于搭建已mysql作为存储的zipkin.(还不知道zipkin是什么的小伙伴请 ...

  2. phpstorm 2016.3.2 的最新破解方法

    v2.0 最新的方式 第一:下载PHPStorm20173.2:(下载链接:windows) 第二:直接用浏览器打开 http://idea.lanyus.com/ ,点击页面中的“获得注册码”,然后 ...

  3. 半导体行业MES系统应用案例

    半导体行业的发展是受惠在集成电路上的,但是收到技术瓶颈的阻碍,所以工业时期对半导体行业就造成了严重的冲击. 为了推动半导体行业快速发展,扭转像IBM.东芝以及富士康等IDM大厂利用晶圆代工对半导体制造 ...

  4. android studio学习----构建编译

    项目创建成功后会自动下载Gradle,这个过程特别慢,建议翻墙.下载的Gradle在Windows平台会默认在 C:\Documents and Settings\<用户名>.gradle ...

  5. Cheat Engine 人造指针

    打开游戏 查看内存区域 查看游戏当前使用的内存区域 下面这一段是游戏当前使用的内存区域,选择一片可以读写的内存区域 跳转到这片内存 查看是否有空余内存可以使用 使用空闲内存 我们选择0075DFD0开 ...

  6. 5 dex文件

    Dex文件中数据结构 类型 含义 u1 等同于uint8_t,表示1字节无符号数 u2 等同于uint16_t,表示2字节的无符号数 u4 等同于uint32_t,表示4字节的无符号数 u8 等同于u ...

  7. HttpUtils请求工具类

    package com.cmcc.hybj.payment.framework.https; import java.io.UnsupportedEncodingException;import ja ...

  8. springmvc核心流程

    用户请求DispathcerServlet(前端控制器). (前端控制器)DispatcherServlet接受到请求,将根据请求信息交给处理器映射器(HandlerMapping). 处理器映射器( ...

  9. MyCat教程四：实现读写分离

    本文我们来给大家介绍下通过MyCat来实现MySQL的读写分离操作 MyCat读写分离 一.读写分离配置   前面我们已经介绍过了mysql的主从同步和mycat的安装及相关配置文件的介绍,现在我们来 ...

  10. Codeforces Round #601 (Div. 2) E2. Send Boxes to Alice (Hard Version)

    Codeforces Round #601 (Div. 2) E2. Send Boxes to Alice (Hard Version) N个盒子,每个盒子有a[i]块巧克力,每次操作可以将盒子中的 ...