手绘风格的 JS 图表库 Chart.xkcd

MIT
JavaScript
跨平台
2019-11-15
timqian

【年终提升】2019尾声,来 OSC·年终盛典收割技术干货,get新技能!>>>

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

图表类型

Chart.xkcd 支持多样的图表类型,下面将逐一讲解和实现:折线图、XY 图、条形图、圆饼/甜甜圈图、雷达图,实现的示例代码完整可运行、注释完整、包含参数说明。

快速入门

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

在下面的示例中,创建了一个线条图:

<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: '$ Dollars',
    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],
      }]
    },
    options: {}
  });
</script>

 

的码云指数为
超过 的项目
加载中

评论(1)

Vector25
Vector25
哇哦,xkcd

暂无资讯

暂无问答

手绘风格的数据可视化实现 Sketchify

多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,《Sketchy Rendering for Information Visualization》(该论文发表于2013年) 于是我带...

2019/11/16 17:11
769
0
symfony小部分文档翻译之http的介绍

由于个人兴趣、工作和学习的需要,我了解过smarty模板引擎;drupal、tp(3.2及之前版本)、Yii2.0、laravel等开源项目。最近我在drupal、Yii2.0、laravel中都发现了symfony的组件,于是去了解了...

2016/02/23 11:30
16
1
50款JavaScript图表库分享

慧都小编收集了50款最受欢迎的JavaScript图形图表库,其中不乏一些优秀的开源、免费产品。这个列表对于想要利用JavaScript技术创建图表展现数据的开发者来说,非常具有参考意义,你可以从中选...

2014/04/11 11:55
8.4K
0
第420期 Python 周刊

文章、教程或讲座 Python 数据科学教程:分析 Stack Overflow 2019 年开发者调查表** https://www.youtube.com/watch?v=_P7X8tMplsw 在此 Python 编程视频中,我们将从 Stack Overflow 2019 ...

2019/12/18 10:29
23
0
翻译:python标准库手册之Sqlite3(一)

看了一些pyton sqlite3,最后感觉还是标准库里面的介绍的比较顺口,简略记录下

2015/09/15 11:26
110
1
chart 目录结构 - 每天5分钟玩转 Docker 容器技术(164)

chart 由一系列文件组成,这些文件描述了 Kubernetes 部署应用时所需要的资源,比如 Service、Deployment、PersistentVolumeClaim、Secret、ConfigMap 等。...

2018/05/07 06:23
79
0
Sencha Touch 2.1学习图表Chart概述

Extjs.chart提供了可视化展现数据的能力,每个图表可以绑定到数据模型Ext.data.Store上, 并随着数据的变换可以自动的更新图表 一个图表对象包括图标风格、坐标(axes)、序列(series) Ex...

2016/04/07 15:22
13
1
Helm 架构 - 每天5分钟玩转 Docker 容器技术(161)

本节学习 Helm 的架构。

2018/04/30 06:34
64
0
00-Getting-Started

You can download the latest version of Chart.js on GitHub

2016/09/21 13:20
13
0
开发自己的 chart - 每天5分钟玩转 Docker 容器技术(167)

本节讨论如何开发自己的 chart。

2018/05/14 06:18
51
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部