本文作者：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. nginx重启失败，无法关闭nginx占用端口

    nginx配置修改后,需要重启nginx,出现上图中的异常. 找不见无法正常nginx的原因,所以只能强制关闭所有端口,再重启nginx 运行命令:fuser -k 80/tcp

  2. 【linux】【elasticsearch】解决docker pull error pulling image configuration: Get https://d2iks1dkcwqcbx.cloudfront.net/

    网络原因导致的问题: error pulling image configuration: Get https://d2iks1dkcwqcbx.cloudfront.net/docker/regis ...

  3. 安装sublime text3 、转化为汉化版、安装SublimeREPL使得在交互条件下运行代码,设置快捷键

    一.sublime Sublime Text 3是轻量级的,安装包很小,它的大部分功能是依靠丰富的插件实现的,而且占用资源少.目前主流版本是Sublime Text3,在官网就可以下载,http:// ...

  4. SpringBootSecurity学习（06）网页版登录方法级别的权限

    用户授权 前面讨论过,Web应用的安全管理,主要包括两个方面的内容,一个是用户身份的认证,即用户登录的设计,二是用户授权,即一个用户在一个应用系统中能够执行哪些操作的权限管理.前面介绍了登录,下面简单 ...

  5. FreeSql 导航属性的联级保存功能

    写在前面 FreeSql 一个款 .net 平台下支持 .net framework 4.5+..net core 2.1+ 的开源 ORM.单元测试超过3100+,正在不断吸引新的开发者,生命不息开 ...

  6. 23种设计模式之原型模式（Prototype Pattern）

    原型模式 使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象 分析: 孙悟空:根据自己的形状复制(克隆)出多个身外身 软件开发:通过复制一个原型对象得到多个与原型对象一模一样的新对象 ...

  7. # C# 中的Task创建指南

    本文还处于草稿阶段,难免还有错误修改改正,逻辑还不是很清晰,笔者会努力完善,长期更新! [0000] 前言 标题起得有些"大",意在集大家的力量,总结出来一份关于Task相对&qu ...

  8. 蓝松短视频SDK基本功能免费列表

    下载地址:https://github.com/LanSoSdk/LanSoEditor_common 功能免费. 个人和公司都可以商用,不需要和我们说明. 直接下载, 直接去用既可. 完全不需要和我 ...

  9. ThinkPHP5通过composer安装Workerman安装失败问题（避坑指南）

    $ composer require topthink/think-workerUsing version ^2.0 for topthink/think-worker./composer.json ...

  10. Sublime text3 配置c++环境 并设置快捷键

    VScode配c++环境太麻烦了 打算用sublime写C++ 记录一下配置过程因为我是有DEV环境的 直接将MINGW64加入环境变量即可 在DEV文件夹下的MinGW64\bin(就是有g++.e ...