JavaScript图形库
做前端少不了画图,html5 的 canva 很强大,可是如果所有需求都自己画图,恐怕会被 leader 炒掉。记录一下我用过的几个 2D 和 3D 的js图形库,各种功能。我就不分 2D 和 3D 了,因为 WebGL前端数据可视化是一个很热门的方向,发展趋势,也是很多图形库的发展目标。
1.echarts:百度开源的功能很多的图形库。看一下下图的 demo 就知道它的功能了。http://echarts.baidu.com/examples.html 。可以满足基本的二维数据图表的绘制,简单方便。
2.echarts-gl:百度开源的功能很多的GL(3D)图形库。下图的 demo。http://echarts.baidu.com/examples.html 。可以满足基本的二维数据图表的绘制,简单方便。http://gallery.echartsjs.com/explore.html#tags=echarts-gl~sort=rank~timeframe=all~author=all 。画地球仪、3D 百度地图什么的,很好用。还可以结合 Web AudioContext ,结合音频数据,做出很炫酷的效果。
3.threejs :一个开源的web 3D 工具,还开源了 threejs editor ,是个简化版的建模工具。threejs 示例 https://threejs.org/ ,threejs editor 示例:http://mrdoob.com/ 。learining threejs :http://learningthreejs.com/,中文教程:http://techbrood.com/threejs/docs/ 。 其他示例:http://alteredqualia.com/three/examples/materials_cubemap_escher.html ,https://floorplanner.com/pro ,http://exocortex.com/ ,WebGL 学习教程:https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html
还可以模拟分子模型,当然,你能想到的 3D 模型,threejs 几乎都能做到。但是 threejs 的交互功能并不是很完善。
4.D3.js:https://d3js.org/,更倾向于二位数据图表的绘制,是一个很强大的用户自定义结构的工具。学习D3:http://d3.decembercafe.org/index.html
5.mapbox.js,可以创建各种自定义地图,二维的世界地图、各省市地图都可以绘制成功。https://www.mapbox.com/maps/ 。它还有一个客户端绘制软件:https://tilemill-project.github.io/tilemill/
6.mapbox-gl.js,就是 3D 的地图绘制,数据和行为之间的交互做的很好,其实 echarts-gl 和.mapbox-gl 结合可以做出更炫酷的效果,详情见:.http://gallery.echartsjs.com/editor.html?c=xrJHCfsfE- 。
7. cytoscape.js http://js.cytoscape.org/ ,很适合绘制二维的社交节点关系图、神经网络节点关系图,反正涉及到节点的图表都可以试试这个图形库,当然这库还有其他的优点哈,比如图中各节点的动态交互就做的很棒棒。
8.amcharts,一个部分开源的工具,可以绘制二维的折线图、柱状图、饼图、地图、股票趋势图、仪表图等,当然还可以绘制三维的饼图、柱状图等。但是非开源,图标上方会有水印,工具好用。https://www.amcharts.com/demos/
9.highcharts,功能很多,满足基本的数据展示需求,国内用的很多。
10.GraphicsJS : http://www.graphicsjs.org/ ,就不多说了,可以自己看官网了解。
11.阿里的G2可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。也可以看看阿里的DataV数据可视化,貌似是付费的。
12.raphael.js : https://dmitrybaranovskiy.github.io/raphael/
13.BabylonJS:微软加的 3D 图形引擎工具,不过是typescript 写的,很好用。建模效果很逼真。http://www.babylonjs.com/
14.Stardust,https://stardustjs.github.io/,基于CPU的可视化图形库。
15.其他库:okaycharts、fusioncharts、xCharts、Flotr、RGraph、ichartjs、ChartJS、rickshaw、jqplot、rgraph、digraphs、canvasxpress、graphael、 Awesome Chart JS ,大家可以看看这篇:http://blog.csdn.net/github_36111469/article/details/53345664 当然,这些其他库我还没用过。
16.其他3D 图形库:SceneJS、PhiloJS等。Google 的 webGL 示例库:https://experiments.withgoogle.com/
17.推荐几个思维导图软件:https://www.zhihu.com/question/19622223?sort=created,还有processOn
JavaScript图形库的更多相关文章
- 【 随笔 】 JavaScript 图形库的流行度调查
2014年可以说是 JavaScript 最风光的一年,成为上升最快的语言,在 Github 上最受关注的前10个仓库中,有7个是基于 JavaScript 开发的,数不胜数的函数库可适应于各种需求. ...
- [转载]几个开源Javascript图形库
[转载]原文地址:http://www.cnblogs.com/webgis8/articles/1516639.html 因为Google Map项目的需要,最近一直在寻求相关的Javascript ...
- 让数据可视化变得简单 – JavaScript 图形库
作者 | 董叶 公司决策层会围绕着数据来制定相应的策略,数据的重要性与日俱增,政府.金融机构.互联网大厂正在以前所未有的速度收集数据,面对扑面而来的数据,没有抽象.视觉层的帮助,我们很难快速理解掌握其 ...
- JavaScript手绘风格的图形库RoughJS使用指南
RoughJS是一个轻量级的JavaScript图形库(压缩后约9KB),可以让你在网页上绘制素描风格.手绘样式般的图形.RoughJS定义了绘制直线,曲线,圆弧,多边形,圆和椭圆的图元,同时它还支持 ...
- 2014年3月新鲜出炉的最佳 JavaScript 工具库
一个 JavaScript 库是预先编写的 JavaScript 程序,用于简化 Web 应用程序开发,特别是对 Ajax 和其它 Web 为中心的技术.JavaScript 提供了多种方法,通过它来 ...
- 向 Web 开发人员推荐35款 JavaScript 图形图表库
图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了3 ...
- Cytoscape.js – 用于数据分析和可视化的交互图形库
Cytoscape.js 是一个开源的 JavaScript 图形库,您可以使用 Cytoscape.js 进行数据分析和可视化.Cytoscape.js 可以轻松的继承到你的网站或者 Web 应用 ...
- 15 款JavaScript 热门图形图表库
图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”.几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流.可视化图表可以 ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
随机推荐
- 『TensorFlow』正则化添加方法整理
一.基础正则化函数 tf.contrib.layers.l1_regularizer(scale, scope=None) 返回一个用来执行L1正则化的函数,函数的签名是func(weights). ...
- 【其他】【http】【1】HTTP状态码
一些常见的状态码: 200 - 服务器成功返回网页 400 - 错误请求 404 - 请求的网页不存在 500 - 服务器内部错误 503 - 服务器超时 状态码大全: 1xx(临时响应)表示临时响应 ...
- pandas的数据结构之series
Pandas的数据结构 1.Series Series是一种类似于一维数组的对象,由下面两个部分组成: index:相关的数据索引标签 values:一组数据(ndarray类型) series的创建 ...
- CCF关于NOIP竞赛程序提交的管理规则
在NOIP复赛中,NOI各省组织单位必须严格遵循CCF<关于NOIP数据提交格式的说明>的规范在竞赛结束后规定时间内向CCF提交本赛区所有参赛选手的程序. 为竞赛的公平以及赛后按时完成竞赛 ...
- C++中 string 的用法大全
之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必 担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至 ...
- .net core WebApi Monitor实现并发同步
在.net中,还可以使用Monitor实现线程并发同步.Monitor类是纯托管且完全可移植,并且可能会在操作系统资源需求方面更加高效. Monitor的锁对象尽可能使用引用对象,如果是字符串或值对象 ...
- SQL-48 将所有获取奖金的员工当前的薪水增加10%。
题目描述 将所有获取奖金的员工当前的薪水增加10%.create table emp_bonus(emp_no int not null,recevied datetime not null,btyp ...
- traceroute命令初探
一.学习目标 了解traceroute基本概念 了解traceroute工作原理及详细过程 熟悉traceroute常用命令 一些注意点 二.traceroute基本概念 traceroute (Wi ...
- binary and out mode to open a file
When I use binary and out mode to open a exist file, and to modify the 4th and 8th byte data to 0x78 ...
- 剑指Offer 1. 二维数组中的查找 (数组)
题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...