文档章节

给 Web 开发人员推荐的开源图形库 —— 数据可视化

编辑部的故事
 编辑部的故事
发布于 2017/07/27 17:43
字数 1110
阅读 2.1W
收藏 403

3 月,跳不动了?>>>

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。

以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。

数据可视化

1、D3.js

最流行的可视化库之一,被各种表格插件、库、框架所使用。它允许绑定任意数据到 DOM ,然后将数据驱动转换应用到 Document 中。你可以使用它从数组中生成 HTML 表,或是使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。

效果预览:点此查看

2、Recharts

基于 React 的组合式图表,用解耦的、可重用的 React 组件快速构建你的图表。依赖于轻量级的 D3 子模块构建 SVG 元素,还可以调整组件的属性与传递组件来自定义图表。

效果预览:点此查看

类似的将 React 和 D3 结合在一起的还有:

Victory

一个用于构建图表模块化和交互式数据可视化的 ReactJS 库。效果预览

VX

可重用的 low-level 可视化组件集合。效果预览

3、ECharts

一个由百度开源的纯 Javascript 图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari 等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

效果预览:点此查看

4、Highcharts

同样是一个制作图表的纯 Javascript 类库,为网站或 Web 应用提供了一种简单的方法来添加交互式图表。 目前支持直线图、曲线图、区域图、区域曲线图、柱状图、饼状图、散布图等类型。需注意的是,商业使用该库需要购买授权。

效果预览:点此查看

5、Google Charts

Google Charts 提供了一种可视化网站数据的方式,从简单的线图到复杂的层次树图,内置的图表库提供大量打开即用的图表类型。它还可以自定义图表以适应网站外观,图表具有高度的互动性,使用 HTML5 / SVG 技术呈现,以提供跨浏览器兼容性和跨平台可移植性。

效果预览:点此查看

6、Plotly.js

一个 high-level 声明式图表库,基于 D3 和 stack.gl ,内置 20 多种图表类型,包括 3D 图表、统计图和 SVG 图等。

7、Chart.js

一个简单灵活的基于 HTML5 的 JavaScript 图表库,浏览器兼容性良好,内置 8 种不同的图表类型以可视化数据,且均可定制,可重新绘制窗口上的图表大小,以获得完美的粒度呈现。

效果预览:点此查看

8、AntV G2

一个由纯 JavaScript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由地定制图表。由蚂蚁金服开源。

效果预览:点此查看

他们家还有一个 AntV G6 ,是一个关系图基础技术框架,能用来进行关系图的查看视图和编辑视图进行快速的二次开发。

9、Timesheet.js

基于 HTML5 和 CSS3 可视化数据和事件的库。用 JavaScript 创建事件轴,用 CSS 美化样式,还有适合移动端的方法。这个库偏向于做时间轴(表)。

10、Leaflet

适用于移动设备的交互式 JavaScript 地图库,具有大多数开发人员所需要的所有制图(mapping)功能。设计简单,性能和可用性较好,可在所有主流的桌面和移动平台上高效运行,也支持扩展大量的插件。API 简单并易于使用。

© 著作权归作者所有

编辑部的故事

编辑部的故事

粉丝 1577
博文 270
码字总数 532419
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(12)

y
ywzhaiqi
推荐个 dygraphs
苦涩茶味
中用过ECharts
f
ffffffffffffffffffff
一直用的highchart
_简简单单_
_简简单单_
百度唯一的一款良心作品,不过是收购的
SoLoTmac
SoLoTmac

引用来自“般若1994”的评论

Echart 百度良心产品
确实
大漠穷秋
大漠穷秋
ECharts应该排在首位才对。
Kit_lee
Kit_lee
啊哈?leaflet也被选来凑热闹
看与不见
看与不见
前段时间不是才推了吗?
R
Ryan132432
123
般若xys
Echart 百度良心产品
10月新增开源项目:号称最快的 Node.js 应用框架来了

摘要: 看看开源中国社区十月份有哪些值得关注的新增项目:百度研发的移动端深度学习框架 MDL,号称是目前最快 Node.js 应用框架之一的 Fastify,Go 语言实现的分布式全文搜索引擎 riot 等等…...

开源中国
2018/01/05
0
0
10月新增开源项目:号称最快的 Node.js 应用框架来了

立冬已过,人们认为这是夏天的终结,冬天的开始。立,建始也;冬,终也,万物收藏也。不过在开源的世界里,开发者并不畏惧寒冷,对技术的不懈追求也未曾终结。 开源的世界总是精彩纷呈,十月...

编辑部的故事
2017/11/07
1.3W
16
Flex 开源数据可视化框架--Axiis

Axiis 是一个数据可视化框架,于五月份使用MIT许可证发布。“数据可视化”这个词经常用来描述应用数据的图形化视图,如图表和图形。 Axiis构建在Degrafa之上。Degrafa是为Flex应用的一个开源...

匿名
2009/06/23
7.2K
0
整理的机器学习资源大全

本文汇编了一些机器学习领域的框架、库以及软件(按编程语言排序)。 伯乐在线已在 GitHub 上发起「机器学习资源大全中文版」的整理。欢迎扩散、欢迎加入。 https://github.com/jobbole/awe...

李雷岗
2016/11/24
56
0
国外程序员整理的机器学习资源大全

 英文原文:awesome-machine-learning   本文汇编了一些机器学习领域的框架、库以及软件(按编程语言排序)。   C++   计算机视觉 CCV —基于C语言/提供缓存/核心的机器视觉库,新颖的...

chworld
2015/08/07
413
0

没有更多内容

加载失败,请刷新页面

加载更多

HashMap:数组+链表+红黑树,环链表-尾插法,二的倍数数组

版本:JDK1.8。 这里把数组每个元素称为桶 使用数组+链表+红黑树:使用红黑树为了解决链表过长导致性能下降的问题。链表大于8就会转为红黑树 JDK1.8后,hashmap使用尾插法。新增的元素会放在...

mrsuperli
27分钟前
27
0
磁盘挂载

https://www.fujieace.com/linux/centos-mount.html Centos挂载硬盘完整图文教程(查看、分区、格式化、挂载)磁盘 此教程是博主亲自帮朋友管理服务器所操作的完整步骤,当然此步骤适合所有的...

nibilly
34分钟前
39
0
SpringBoot 从入门到进阶系列小册SpringForAll社区全网独家发布

经过小编的整理,将社区的SpringBoot系列从入门到进阶文章进行了小册子制作,领取方式见文末,小册大纲如下: Spring Boot 入门系列 Spring Boot 快速入门 《使用Intellij中的Spring Initia...

SpringForA
52分钟前
14
0
springboot configuration annotation processor not configured

解决办法: 在pom.xml中增加如下依赖       <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-configuratio......

ATOZ_HJ
56分钟前
22
0
2D游戏开发(4) CreateJS函数库简单案例

案例1:围住神经猫 开发工具:VsCode 游戏介绍: 蓝色圆圈表示神经猫,点击灰色圆圈围捕神经猫,不让神经猫逃走即可获胜。 代码参考: index.html <!DOCTYPE html><html> <head> ...

hhn30
今天
28
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部