推荐一些有趣实用的前端可视化工具库,助力可视化开发
前言
前端可视化一直是人们常谈到的词,随着SVG,Canvas,WebGL等技术的发展,也涌现了一大批的优秀的可视化库。本文将从中选择一些有趣实用的推荐给大家,工具使用好了,开发效率自然也就提升了。
ECharts
ECharts是一个基于 JavaScript 的开源可视化图表库。我相信很多做过可视化相关项目的伙伴们都用过,可以说是永远滴神了。
GitHub:https://github.com/apache/echarts
网站:https://echarts.apache.org/zh/index.html
makeapie
makeapie 是 ECharts社区资源集合地。网站里面有很多社区小伙伴的作品,如果你实在想不出实现效果,那就到makeapie看看,很可能就有你想要的。
网站:https://www.makeapie.cn
ZRender
ZRender是一个二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。有兴趣的小伙伴可以研究研究。
GitHub:https://github.com/ecomfe/zrender
网站:https://ecomfe.github.io/zrender-doc/public/
Chartjs
Chartjs是一个为设计人员和开发人员提供简单而灵活的JavaScript图表。风格挺清新。
GitHub:https://github.com/chartjs/Chart.js
网站:https://www.chartjs.org/
中文:https://chartjs.bootcss.com/
D3.js
D3.js 是用于数据可视化的开源的JavaScript函数库,被认为是很好的JavaScript可视化框架之一。相比于ECharts更灵活,也更复杂。
GitHub:https://github.com/d3/d3
网站:https://d3js.org/
AntV
AntV系列:包含各种数据可视化的解决方案,这一套很系统,包含了数据可视化的方方面面。
GitHub:https://github.com/antvis
网站:https://antv.vision/zh
AntV G2
AntV G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。
网站:https://g2.antv.vision/zh
AntV F2
AntV F2是一个专注于移动端,面向常规统计图表,开箱即用的可视化引擎。
网站:https://f2.antv.vision/zh
AntV G6
AntV G6是一个简单、易用、完备的图可视化引擎。
网站:https://g6.antv.vision/zh
AntV X6
AntV X6是一个图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。
网站:https://x6.antv.vision/zh
AntV L7
AntV L7是一个地理空间可视化分析引擎。
SpriteJS
SpriteJS是一个跨平台的高性能图形系统,它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。
GitHub:https://github.com/spritejs/spritejs
网站:https://spritejs.org/#/zh-cn/index
Rough.js
Rough.js:可以用来绘制草图外观的图形。
GitHub:https://github.com/rough-stuff/rough
网站:https://roughjs.com/
ThreeJS
ThreeJS 是一款开源的主流3D绘图JS引擎,可以说是前端3D开发必备神器了。
GitHub:https://github.com/mrdoob/three.js/
网站:https://threejs.org/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FNAEEZUn-1653214719241)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92aebfaffe614174b3981a8b5644dcb9~tplv-k3u1fbpfcp-watermark.image?)]
Pixi.js
Pixi.js是一个非常快的 2D sprite 渲染引擎,支持webgl。可以帮助我们显示、动画和管理交互式图形,这样我们就可以轻松地使用JavaScript和其他HTML5技术制作游戏和应用程序。
GitHub:https://github.com/pixijs/pixijs
网站:https://pixijs.com/
中文:https://pixijs.huashengweilai.com/
Phaser
Phaser是一个快速、有趣并且免费的开源H5游戏开源框架。对H5游戏开发感兴趣小伙伴可以看看 Pixi.js 和这个库。
GitHub:https://github.com/photonstorm/phaser
网站:http://phaser.io/
SVG.js
SVG.js是用于操纵SVG和设置SVG动画的轻量级库。
GitHub:https://github.com/svgdotjs/svg.js
网站:https://svgjs.dev/docs/3.0/
Snap.svg
Snap.svg 是一个为现代web而生的JavaScript SVG库。
GitHub:https://github.com/adobe-webplatform/Snap.svg
网站:http://snapsvg.io/
Fabric.js
Fabric.js 是一个操作canvas的库,可以进行svg和canvas的相互转换。
GitHub:https://github.com/fabricjs/fabric.js
网站:http://fabricjs.com/
Easing functions
Easing functions 自定义参数随时间变化的速率,帮助我们选择正确的缓动函数。
GitHub:https://github.com/ai/easings.net
网站:https://easings.net/en#
Animate.css
Animate.css 跨浏览器的CSS动画库。
GitHub:https://github.com/animate-css/animate.css
网站:https://animate.style/
Anime.js
Anime.js 一个轻量级JavaScript动画库,具有简单但功能强大的API。
GitHub:https://github.com/juliangarnier/anime
网站:https://animejs.com/
中文:https://www.animejs.cn/
Hover.css
Hover.css 纯CSS3鼠标滑过特效库
GitHub:https://github.com/IanLunn/Hover
网站:http://ianlunn.github.io/Hover/
最后
暂时就分享这么多吧,上面这些库的实用性都比较高的,而且有些还十分有趣。如果你也用过文章中没有,但是也很有趣或实用,欢迎分享~
推荐一些有趣实用的前端可视化工具库,助力可视化开发相关推荐
- 一款实用的前端截图工具
一款实用的前端截图工具kscreenshot 安装: npm install kscreenshot --save 使用: import kscreenshot from 'kscreenshot'/ ...
- 论文研读-图可视化-NetV.js:Web端可视化工具库
NetV.js:一个基于网络的用于大规模图和网络的高效可视化的库 1 论文概述 1.1 文章摘要 1.2 引言 1.3 文章脉络 2 相关工作 3 设计 3.1 设计要求 3.2 设计细节 3.2.1 ...
- DIY官网可视化工具打造UNIAPP-uviewUI可视化
DIY官网可视化工具打造UNIAPP-uviewUI可视化一键生成导出致力为UNIAPP-uviewUI开发者加速开发 快速生成基于Vue开发前端应用的框架,减少前端开发者80%工作量 UNIAP ...
- Grafana可视化工具-之表格图开发
Grafana可视化工具-之表格图开发 Table Panel也是Grafana的原生插件,Table Panel支持将基于时间序列的多种数据以表格式形式展示,Table Panel灵活且相对复杂 D ...
- Docker可视化工具:Portainer可视化面板安装
Docker可视化工具:Portainer可视化面板安装 1.Portainer(非最佳选择) 什么是Portainer Portainer可视化面板安装 docker启动出现Error respon ...
- 推荐两个实用的视频解析工具
01 BTNULL BTNULL是一个视频解析网站,为我们提供了方便快捷的在线视频解析服务.该网站支持解析各种常见的视频网站和平台,我们只需将视频链接粘贴到网站上即可进行解析和观看. BTNULL网站 ...
- 推荐7款实用强大的神器工具,建议你先收藏,总有一天你会用到!
分享7个非常强大的神器工具,每一款都是精品,喜欢的话记得点赞支持哦~ 1.后羿采集器 后羿采集器是前谷歌技术团队倾力打造,基于人工智能技术,只需要输入网址就能自动识别采集内容.支持Win/Mac/Li ...
- 数据可视化工具_数据可视化
数据可视化工具 Visualizations are a great way to show the story that data wants to tell. However, not all v ...
- python文献知识图谱可视化_知识图谱可视化工具(知识图谱可视化python)
知识图谱可视化工具免费杭州市西湖区教育装备保障服务中心 除了知识图,图还能做什么?编者注:作者的高级解决方案顾问包汉林.本文将集中在三个方面,侧重于图数据库和图分析的价值,并列举图分析应用程序的一些方 ...
最新文章
- 留念,第一次在C中调用lua成功!
- win7与ubuntu 13.04 64位双系统安装介绍
- python配置文件密码管理_python – 可以在django管理员中实现“下次登录时更改密码”类型功能吗?...
- Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
- php大文件上传插件,PHP 大文件上传进度条实现
- 报错:failed to get the task for process XXX(解决方案)
- Unix 多进程编程
- AI论文解读:基于Transformer的多目标跟踪方法TrackFormer
- Chainlink预言机正式集成至币安智能链
- 站点页面Service Unavailable 503的一种解决方法
- 惊爆!一行正则表达式引发的 CPU 惨案
- python find next_bitset中_Find_first()与_Find_next()函数
- android 弹窗banner,弹窗交互规范分析|UI|观点|DesigneR_D - 原创文章 - 站酷 (ZCOOL)
- matlab lu解线性方程,LU分解和求解线性方程组
- 安装win10虚拟机遇到的坑
- 基本共射放大电路的简单进化 阻容式耦合放大电路
- HTCVIVE无线套装安装后unityvr项目无法在头盔中显示
- java.lang.NoClassDefFoundError: org/jdom2/Content
- 10个iPad Air常见小问题及解决方法汇总
- 关于python异常处理、以下说法正确的是_以下关于Python高级特性说法正确的是(_____)。...
热门文章
- Revit API: DWG翻模的基本原理
- [Ubunut] c++段错误调试工具gdb的使用方法
- 双 JK 触发器 74LS112 逻辑功能。真值表_由热靴移至机侧 尼康发布全新闪灯触发器_...
- 华为还是赢了,高通为它定制新款芯片,率先在手机接入卫星通信
- 10.区块链系列之hardhat部署抵押赎回Fund合约
- selenium网页自动登录、打卡(一)
- [Debug]驱动程序调测方法与技巧
- 绝对干货硬核实用作品教程——DIY制作空气净化器全过程,可能是年度最佳创客DIY作品(微长)...
- java相对路径上上级_关于上级目录与上上级目录的表示相对路径
- 【机器学习】`ConvergenceWarning: Liblinear failed to converge, increase the number of iterations`问题记录