Chart.xkcd 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Chart.xkcd 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Chart.xkcd 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Chart.xkcd 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Chart.xkcd 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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>

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
哇哦,xkcd
2019/11/15 17:26
回复
举报
更多评论
暂无内容
发表了博客
2020/07/09 01:54

我们如何制作xkcd样式图? - How can we make xkcd style graphs?

问题: Apparently, folk have figured out how to make xkcd style graphs in Mathematica and in LaTeX . 显然,民间已经想出了如何在Mathematica和LaTeX中制作xkcd风格的图形。 Can we do it in R? 我们可以用R做吗? Ggplot2-ers? GGPLOT2-ERS? A geom_xkcd and/or theme_xkcd? 一个geom_xkcd和/或theme_xkcd? I guess in base graphics, par(xkcd=TRUE)? 我想在基本图形中,par(xkcd = TRUE)? How do I do it? 我该怎...

0
0
发表了博客
2020/05/04 01:30

我们如何制作xkcd样式图? - How can we make xkcd style graphs?

问题: Apparently, folk have figured out how to make xkcd style graphs in Mathematica and in LaTeX . 显然,民间已经想出了如何在Mathematica和LaTeX中制作xkcd风格的图形。 Can we do it in R? 我们可以用R做吗? Ggplot2-ers? GGPLOT2-ERS? A geom_xkcd and/or theme_xkcd? 一个geom_xkcd和/或theme_xkcd? I guess in base graphics, par(xkcd=TRUE)? 我想在基本图形中,par(xkcd = TRUE)? How do I do it? 我该怎...

0
0
发表于开发技能专区
2020/11/29 21:10

Python:matplotlib漫画风格(XKCD)

# https://www.matplotlib.org.cn/gallery/showcase/xkcd.html import matplotlib.pyplot as pltimport numpy as np with plt.xkcd(): # Based on "Stove Ownership" from XKCD by Randall Monroe # http://xkcd.com/418/ fig = plt.figure() ax = fig.add_axes((0.1, 0.2, 0.8, 0.7)) ax.spines['right'].set_color('none') ax.spines['top'].set_color('none') plt.xticks([]) plt.yticks([]) ax...

0
0
发表了博客
2018/03/03 19:26

Chart:Amcharts

ylbtech-Chart:Amcharts Amcharts ,是一个致力于图表组件开发的公司,公司地址在立陶宛首都维尔纽斯,2004年开始推出图表和地图组件。 1. 简介返回顶部 截至目前,amCharts提供了JavaScript/HTML5 Charts、Javascript/HTML5 Stock Chart、JavaScript Maps三种图表组件。amCharts图形效果炫丽,得到了广大使用者的青睐,amCharts的用户遍布全球各地,不乏Microsoft, Cisco, NASA, Motorola之类的行业巨头。 amCharts在1.x版本是...

0
0
发表了博客
2020/04/19 17:04

手写chart

发布一个k8s部署视频:https://edu.csdn.net/course/detail/26967 课程内容:各种k8s部署方式。包括minikube部署,kubeadm部署,kubeasz部署,rancher部署,k3s部署。包括开发测试环境部署k8s,和生产环境部署k8s。 腾讯课堂连接地址https://ke.qq.com/course/478827?taid=4373109931462251&tuin=ba64518 第二个视频发布 https://edu.csdn.net/course/detail/27109 腾讯课堂连接地址https://ke.qq.com/course/484107?tuin=ba64...

0
0
发表了博客
2018/01/16 18:25

ascii chart

![输入图片说明](https://static.oschina.net/uploads/img/201801/16182508_p1DY.png "asciichart")

0
0
发表了博客
2018/11/07 09:34

chart控件

https://blog.csdn.net/feng_8071/article/details/55511483 https://blog.csdn.net/G1036583997/article/details/50443809 https://bbs.csdn.net/topics/392153759?page=1

0
0
发表了博客
2013/01/27 01:10

Pie Chart

绘制饼状图。可以在图形上标注数据。效果十分漂亮,而且没有用到一张图片。 Code4App编译测试,测试环境:Xcode 4.3, iOS 5.0。 转载:http://www.adobex.com/ios/source/details/00000293.htm

0
0
发表了博客
2013/01/27 00:40

Percentage Chart

绘制百分比半圆饼图。可以用其表示百分数。 Code4App编译测试,测试环境:Xcode 4.5, iOS 5.0以上。 转载:http://www.adobex.com/ios/source/details/00000283.htm

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
6 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部