本文作者：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. Spark学习之Scala的基础知识

    Scala的变量声明 在Scala创建变量的时候,必须使用val或者var val,变量值不可修改,一旦分配不能重新指向别的值 var,分配后,可重新指向类型相同的值 举例 val lines = s ...

  2. [Optimized Python] 17 - Performance bottle-neck

    前言 对于一门编程语言,没接触到“优化”和“库代码”的源码理解程度,不足以谈“掌握”二字. 本篇的学习笔记,同时也意味着自己终于触及到了Python的junior国际水准.(joke) 要学的东西有很 ...

  3. 树莓派3安装openwrt

    1.在编译openwrt之前,需要先安装依赖包,命令如下: sudo apt-get install autoconf binutils bison bzip2 flex gawk gettext m ...

  4. 使用命令行创建maven web项目

    一,前言 遇到了一个非常简单的maven命令: 总的来说,这是一个用maven创建一个jersey快速开始项目的maven命令. 这次不妨使用maven命令来构建项目,看体验如何. 在文章idea m ...

  5. Spring Boot 的单元测试和集成测试

    学习如何使用本教程中提供的工具,并在 Spring Boot 环境中编写单元测试和集成测试. 1. 概览 本文中,我们将了解如何编写单元测试并将其集成在 Spring Boot 环境中.你可在网上找到 ...

  6. 如何判断前后端bug

    测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的技能.这里先说定位问题的要求,定位问题要向深入,前提当然是对功能.产品的流程.开发方案.开发人员 ...

  7. 从零开始入门 K8s | 应用编排与管理：Job & DaemonSet

    一.Job 需求来源 Job 背景问题 首先我们来看一下 Job 的需求来源.我们知道 K8s 里面,最小的调度单元是 Pod,我们可以直接通过 Pod 来运行任务进程.这样做将会产生以下几种问题: ...

  8. 配置Redis(远程访问及授权设置)

    配置Redis(远程访问及授权设置) 1.将redis.conf里面的bind 127.0.0.1这一行注释掉,添加自己服务器的IP 2. 还有,找到protected-mode这行, 将改为yes. ...

  9. linux mysql中文乱码解决

    测试的机器是ubuntu 12.04个别linux发行版可能略有不同. 登陆mysql查看当前字符集命令: mysql> show variable like '%char%'; +------ ...

  10. Spring Boot （九）： 微服务应用监控 Spring Boot Actuator 详解

    1. 引言 在当前的微服务架构方式下,我们会有很多的服务部署在不同的机器上,相互是通过服务调用的方式进行交互,一个完整的业务流程中间会经过很多个微服务的处理和传递,那么,如何能知道每个服务的健康状况就 ...