手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun
图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库:一个手绘风格的 JS 图表库 —— Chart.xkcd,快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。
一、介绍
项目地址:https://github.com/timqian/chart.xkcd
Chart.xkcd 是一个图表库,可绘制“非精细”、“卡通”或“手绘”样式的图表。
效果是不是很可爱?那下面就跟着 HelloGitHub 发起的《讲解开源项目》的教程一起学习、上手使用起来吧!
二、快速入手
使用 Chart.xkcd 很容易,只需页面中包含库的引用和一个用于显示图表的 <svg>
节点即可。
2.1 代码示例
先用一段简短的代码,让大家了解下基本的参数和代码的样子,后面会有可运行的代码示例片段供大家学习和使用
手绘风格的 JS 图表库:Chart.xkcd的更多相关文章
- chart.js图表库案例赏析,饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- Highcharts纯js图表库,以后可以跟客户说,你跟阿里云ECS用的图表库是同款
Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...
- JavaScript手绘风格的图形库RoughJS使用指南
RoughJS是一个轻量级的JavaScript图形库(压缩后约9KB),可以让你在网页上绘制素描风格.手绘样式般的图形.RoughJS定义了绘制直线,曲线,圆弧,多边形,圆和椭圆的图元,同时它还支持 ...
- 可能是史上最强大的js图表库——ECharts带你入门
PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...
- 史上最强大的js图表库——ECharts带你入门(转)
出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...
- 免费下载:320+ 手绘风格 Apple iOS7 图标
Themify 图标是一套用在网页设计和应用程序的图标,包括 320+ 手工制作的像素完美的苹果 iOS7 图标中汲取灵感.这些图标完全免费,您可以用于任何目的,无论是个人或商业. 您可能感兴趣的相 ...
- Python中使用cutecharts实现简单的手绘风格的图表
场景 效果 cutecharts的Github: https://github.com/chenjiandongx/cutecharts 注: 博客: https://blog.csdn.net/ba ...
- 关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)
官网http://www.hcharts.cn/ 引入下列文件 <script type="text/javascript" src="http://cdn.hch ...
- Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
http://www.hcharts.cn/index.php 暂无介绍,等待后续补充
随机推荐
- 连接电脑时,无法启用USB调试
原因: 手机悬浮球 解决方案: 取消悬浮球,停止一切悬浮应用 (下面的废话可以不听) 预置条件: 手机已经打开开发者模式 开启USB调试模式 电脑能检测到手机 故事背景: 经常用手机连接电脑进行adb ...
- linux环境下Nginx的安装
因为工作环境大多数都是windows server服务器,仅有的linux服务器同事们都在抢着用,所以特意买了一台阿里云服务器,感兴趣的小伙伴可以了解一下,一年只要293: https://promo ...
- [python]OS文件系统
1.getcwdd() 获得应用程序当前的工作目录 #getcwd() 获取应用程序当前的工作目录 import os print(os.getcwd()) 2.chdir(path) 改变当前工作目 ...
- Python学习笔记整理总结【Django】【MVC/MTV/路由分配系统(URL)/视图函数 (views)/表单交互】
一.Web框架概述 Web框架本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python # -*- coding:utf-8 ...
- 读《深入理解Elasticsearch》点滴-查询评分
计算文档得分的因子: 文档权重(document boost):索引期赋予某个文档的权重值 字段权重(field boost):查询期赋予某个文档的权重值 协调因子(coord):基于文档中词项个数的 ...
- RBD 基本使用 - Storage6
块存储管理系列文章 (1)RBD 基本使用 - Storage6 (2)iSCSI 网关管理 (3)使用 librbd 将虚拟机运行在 Ceph RBD (4)RBD Mirror 容灾 Ceph 块 ...
- Spring Cloud Stream 整合 RabbitMQ
简介 Spring Cloud Stream是一个构建消息驱动微服务的框架,应用程序通过input(相当于consumer).output(相当于producer)来与Spring Cloud Str ...
- 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...
- 每个新手程序员都必须知道的Python技巧
当下,Python 比以往的任何时候都更加流行,人们每天都在实践着 Python 是多么的强大且易用. 我从事 Python 编程已经有几年时间了,但是最近6个月才是全职的.下面列举的这些事情,是我最 ...
- 【MySQL】java.sql.SQLException: The server time zone value
错误:Could not open JDBC Connection for transaction; nested exception is java.sql.SQLException: The se ...