本文作者：HelloGitHub-kalifun

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

一、介绍

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

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

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

二、快速入手

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

2.1 代码示例

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

手绘风格的 JS 图表库：Chart.xkcd的更多相关文章

  1. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  2. Highcharts纯js图表库，以后可以跟客户说，你跟阿里云ECS用的图表库是同款

    Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...

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

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

  4. 可能是史上最强大的js图表库——ECharts带你入门

    PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...

  5. 史上最强大的js图表库——ECharts带你入门(转)

    出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...

  6. 免费下载：320+ 手绘风格 Apple iOS7 图标

    Themify 图标是一套用在网页设计和应用程序的图标,包括 320+ 手工制作的像素完美的苹果  iOS7 图标中汲取灵感.这些图标完全免费,您可以用于任何目的,无论是个人或商业. 您可能感兴趣的相 ...

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

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

  8. 关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)

    官网http://www.hcharts.cn/ 引入下列文件 <script type="text/javascript" src="http://cdn.hch ...

  9. Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

    http://www.hcharts.cn/index.php 暂无介绍,等待后续补充

随机推荐

  1. centos7防火墙命令

    https://blog.csdn.net/achang21/article/details/52538049

  2. pycharm最新版本激活码（永久有效） python安装教程

    Mac 系统自带python 1.打开终端, 输入 python 可以查看python当前版本. 2.输入“python”回车后即进入解释器,例如打印“hello world!”, 可输入 ‘ pri ...

  3. 搭建第一个node服务器

    1.在项目文件夹根目录创建app.js: (1)先引入模块 const http = require('http');//http是安装好node就有的一个模块,是用来创建http服务器的 (2)创建 ...

  4. Java常识及数据类型

    上次介绍完了JDK的下载,安装,以及配置了环境变量 .这次我们来讲讲Java的常识及Java的数据类型; 常见Java开发工具 编辑器: 1:UltraEdit; 2:EditPlus等; 集成开发环 ...

  5. pyenv的安装和简单使用

    centos7.4   python2.7 安装pyenv需要的依赖 yum -y install gcc zlib-devel bzip2-devel openssl-devel ncurses-d ...

  6. 基于RHEL8/CentOS8的网络基础配置

    在rhel7上,同时支持network.service和NetworkManager.service(简称NM).默认情况下,这2个服务都有开启,但许多人都会将NM禁用掉.而在rhel8上,已废弃ne ...

  7. redis-计数信号量

    1.基本概念 2.信号量类 3.测试类 4.测试日志 基本概念 计数信号量是一种锁,它可以让用户限制一项资源最多能够同时被多少个进程访问, 技术信号量和其他锁的区别:当客户端获取锁失败时,客户端会选择 ...

  8. rt.jar包添加源文件只需要关联到已安装对应jdk目录下source.zip源码文件即可

    项目中配置的JRE System Libriry下的rt.jar包,需要关联源文件时候,只需要点击“Attach Source...“按钮,选择"External File..." ...

  9. Python控制函数运行时间

    在某个Flask项目在做后端接口时需要设置超时响应,因为接口中使用爬虫请求了多个网站,响应时间时长时短. 我需要设置一个最大响应时间,时间内如果接口爬虫没跑完,直接返回请求超时. 从网上了解到有两种方 ...

  10. Android NDK(二) CMake构建工具进行NDK开发

    本文目录 一Androidstudio中需要的插件 二项目配置 ①build.gardle配置 ②CMakeLists.txt ③Android和Cpp的代码 ④so文件生成 ⑤so文件的位置 一.A ...