js折线图设置y轴刻度_手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun
图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库:一个手绘风格的 JS 图表库 —— Chart.xkcd,快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。
一、介绍
项目地址:https://github.com/timqian/chart.xkcd
Chart.xkcd 是一个图表库,可绘制“非精细”、“卡通”或“手绘”样式的图表。
效果是不是很可爱?那下面就跟着 HelloGitHub 发起的《讲解开源项目》[1]的教程一起学习、上手使用起来吧!
二、快速入手
使用 Chart.xkcd 很容易,只需页面中包含库的引用和一个用于显示图表的 节点即可。
2.1 代码示例
先用一段简短的代码,让大家了解下基本的参数和代码的样子,后面会有可运行的代码示例片段供大家学习和使用 。
Title
2.2 参数说明
- title:图表的标题
- xLabel:图表的 x 标签
- yLabel:图表的 y 标签
- data:需要可视化的数据
- options:自定义设置
三、图表类型
Chart.xkcd 支持多样的图表类型,下面将逐一讲解和实现:折线图、XY 图、条形图、圆饼/甜甜圈图、雷达图,实现的示例代码完整可运行、注释完整、包含参数说明。
tips:下文中的示例代码均可直接运行,保存为 html 文件便可在本机查看效果。
3.1 折线图
折线图以折线形式显示一系列数据点,它可以用于显示趋势数据或不同数据集的比较。
示例代码
Title
参数说明
- yTickCount:自定义要在y轴上看到的刻度号(默认为 3)
- legendPosition:指定要放置图例的位置(默认为 chartXkcd.config.positionType.upLeft)。
- 左上位置:chartXkcd.config.positionType.upLeft
- 顶右上位置:chartXkcd.config.positionType.upRight
- 左下位置:chartXkcd.config.positionType.downLeft
- 右下位置:chartXkcd.config.positionType.downRight
- dataColors:不同颜色的数据集数组
- fontFamily:定制图表中使用的字体系列
- unxkcdify:禁用 xkcd 效果(默认为 false)
效果展示
3.2 XY 图
XY 图表用于通过指定点的 XY 坐标来绘制点,您也可以通过连接这些点来绘制 XY 折线图。
示例代码
参数说明
- xTickCount:自定义要在x轴上看到的刻度号(默认为 3)
- yTickCount:自定义要在y轴上看到的刻度号(默认为 3)
- legendPosition:指定要放置图例的位置
- showLine: 点连接成线。
- timeFormat:指定时间格式
- dotSize:更改点的大小(默认为 1)
- dataColors:不同颜色的数据集数组
- fontFamily:定制图表中使用的字体系列
- unxkcdify:禁用 xkcd 效果(默认为 false)
效果展示
如果你想将这些点连接起来,让数据对比更加明显的话。请修改 showLine:true 再刷新页面你就可以看到连线的效果了。
3.3 条形图
条形图提供了一种显示以竖条表示的数据值的方式。
示例代码
参数说明
- yTickCount:自定义要在y轴上看到的刻度号(默认为 3)
- dataColors:不同颜色的数据集数组
- fontFamily:定制图表中使用的字体系列
- unxkcdify:禁用xkcd效果(默认为 false)
效果展示
3.4 圆饼/甜甜圈图
饼图广泛得应用在各个领域,用于表示不同分类的占比情况,通过弧度大小来对比各种分类。饼图通过将一个圆饼按照分类的占比划分成多个区块,整个圆饼代表数据的总量,每个区块(圆弧)表示该分类占总体的比例大小,所有区块(圆弧)的加和等于 100%。
示例代码
参数说明
- innerRadius:指定空的饼图半径(默认值:0.5)
- 需要饼图吗?将 innerRadius 设置为 0
- legendPosition:指定要放置图例的位置
- dataColors:不同颜色的数据集数组
- fontFamily:定制图表中使用的字体系列
- unxkcdify:禁用 xkcd 效果(默认为 false)
效果展示
3.5 雷达图
雷达图(Radar Chart)又被叫做蜘蛛网图,适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法,其中轴的相对位置和角度通常是无意义的。
示例代码
参数说明
- showLabels:在每行附近显示标签(默认为 false)
- ticksCount:自定义要在主行上看到的刻度号(默认为 3)
- dotSize:更改点的大小(默认为 1)
- showLegend:在图表附近显示图例(默认为 false)
- legendPosition:指定要放置图例的位置
- dataColors:不同颜色的数据集数组
- fontFamily:定制图表中使用的字体系列
- unxkcdify:禁用 xkcd 效果(默认为 false)
效果展示
四、最后
以上就是讲解的全部内容,相信教程至此 Chart.xkcd 库的基本用法你已经基本掌握,后面就可以用来今天学到的东西,提高自己项目的颜值了。
有了 Chart.xkcd 让数据可爱地展示出来并不难,快动手自己实现一个吧~
参考资料
[1]《讲解开源项目》: https://github.com/HelloGitHub-Team/Article
[2]CHART.XKCD 官方文档: https://timqian.com/chart.xkcd/
[3]CHART.XKCD 项目地址: https://github.com/timqian/chart.xkcd
『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章,你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们,让更多人爱上开源、贡献开源~
js折线图设置y轴刻度_手绘风格的 JS 图表库:Chart.xkcd相关推荐
- js折线图设置y轴刻度_d3.js实现自定义多y轴折线图
前言 需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项.效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图. 基础 这张图只用了d3.j ...
- echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
- echart 折线图设置y轴单位_Echarts自定义Y轴
1-Y轴默认.png 修改后: 2-1-字符串模板自定义Y轴刻度.png 代码: let option = { title: { text: 'ECharts 入门示例' }, tooltip: {} ...
- 怎么让e-charts折线图只有6个刻度_简单6步,打开图表定制之门
大家好,我是小明,一个爱图表如命的人. 很开心接到精进学苑的邀请,合作这一期公开课.因为之前的多次合作都很愉快,所以这一次想都没想就答应了. 答应之后,我就一直在想应该写些什么内容,大家到底需要什么样 ...
- extjs chart无法在panel中显示_手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- python图片转手绘软件_酷!一个仿漫画手绘风格的 Python 图表库
[导读]:关于数据可视化工具,如果你有点厌烦了常见风格(比如:Matplotlib 和 pyecharts),那可以试试换一种风格. 本文前哨君给大家介绍一个风格完全不一样的开源库:cutechart ...
- echarts 折线图 设置y轴最小刻度_用plotly和plt画图的基本设置(标题、坐标轴、图例、注释、图像)...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客 非常好的文章,值得推荐. 一 用matplotlib.py ...
- echarts折线图改变y轴刻度
目前项目有个要求,比如y轴数据大部分在几百,但是有个峰值达到了1W..这样导致经常出现的几百的数据变化不明显,这时候就需要对y轴数据进行处理,将不经常出现的数据范围进行缩小,比如1-500和500-5 ...
- echarts 折线图 设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予 我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
最新文章
- Python常用内置函数(二)
- Android中的ListView
- Linux 上的最佳 C/C++ IDE
- 读取文件:TypeError: an integer is required (got type str)
- 主流mes厂商_MES市场的前景
- pat 乙级 1029 旧键盘(C++)
- thinkPHP伪静态,如何去掉index.php呢?
- 1799元!OPPO A9悄然上架:4月30日正式开售
- Metatable让我从心认知了Lua(相知篇)
- java web编程技术实用教程_Java Web编程技术实用教程
- 通过BigInteger真正实现无限大的十进制转N(任意整数)进制
- 游戏外挂开发原理初探——植物大战僵尸内存挂为例
- 代理http,代理https,代理sk5,的正向代理和反向代理
- Ubuntu中恢复rm命令误删文件(超级详细+亲测有效)
- 记一次重装系统后恢复EFS加密文件过程
- DbVisualizer 8.0.11 出现乱码问题
- 服务器””上的 MSDTC 不可用。解决办法
- 一篇长文带你深析Linux动态链接的全过程
- 从raspberry pi OS 64-bit lite开始安装图形界面(icewm ,dwm)
- Linux执行命令常用命令4.0
热门文章
- NoClassDefFoundError: org/springframework/core/ErrorCoded 报错
- JQuery中的事件和选择器
- php中创建关联数组,以及遍历数组
- RDKit | 基于RDKit的肽和核酸序列转换分子Mol对象
- java 异步返回_在Java中使用异步后,主方法如何返回异步中得到的值?
- 线粒体|GetOrganelle组装软件
- JGG:COVID-19感染导致儿童上呼吸道和肠道菌群持续失衡
- MPB:浙大王佳堃组-​幼龄反刍动物粪便DNA提取及注意事项
- 易生信高级转录组分析和数据可视化第9期课程开课啦!!
- NEJM | 益生菌LGG治疗肠胃炎无效,Immunity|LGG促进生骨