文档章节

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

编辑部的故事
 编辑部的故事
发布于 2017/07/27 17:43
字数 1110
阅读 7667
收藏 403
点赞 12
评论 12

现代 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 简单并易于使用。

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1083
博文 231
码字总数 392922
作品 0
深圳
运营/编辑
加载中

评论(12)

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

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

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

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

开源中国 ⋅ 01/05 ⋅ 0

推荐!国外程序员整理的机器学习资源大全

本列表选编了一些机器学习领域牛B的框架、库以及软件(按编程语言排序)。 C++ 计算机视觉 CCV —基于C语言/提供缓存/核心的机器视觉库,新颖的机器视觉库 OpenCV—它提供C++, C, Python, J...

oschina ⋅ 2014/07/22 ⋅ 59

整理的机器学习资源大全

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

李雷岗 ⋅ 2016/11/24 ⋅ 0

国外程序员整理的机器学习资源大全

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

chworld ⋅ 2015/08/07 ⋅ 0

Flex 开源数据可视化框架--Axiis

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

匿名 ⋅ 2009/06/23 ⋅ 0

OSChina 技术周刊第三十期 —— IT 公司开源软件整理计划

每周技术抢先看,总有你想要的! 移动开发 【翻译】Intel® INDE for Google Android Studio 【软件】移动应用开发框架 Samurai-Native 【博客】學習 React.js:用 Node 和 React.js 創建一個...

OSC编辑部 ⋅ 2015/04/19 ⋅ 9

前端数据可视化插件大盘点

在大数据时代,很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展,从传统只能依靠于flash、IE的v...

dongzhumao ⋅ 2016/01/20 ⋅ 0

程序员应该知道的七个图形工具

在上一篇《全栈工程师的百宝箱:黑魔法之文档篇》我们介绍了一些文档工具,今天让我来分享一下,我常用的一些图形工具,主要有两类: 流程图 数据可视化 流程图:Graphviz 说到流程图还是再次...

oschina ⋅ 2016/06/22 ⋅ 27

史上最全的“大数据”学习资源(下)[转]

从网上转的 当前,整个互联网正在从IT时代向DT时代演进,大数据技术也正在助力企业和公众敲开DT世界大门。当今“大数据”一词的重点其实已经不仅在于数据规模的定义,它更代表着信息技术发展...

强子哥哥 ⋅ 2016/05/04 ⋅ 0

最最流行的10个开源数据可视化项目

D3 Stars: 46561, Forks: 12465 D3 是一个JavaScript数据可视化库用于HTML和SVG。它旨在将数据带入生活,强调Web标准,将强大的可视化技术与数据驱动的文档对象模型(DOM)操作方法相结合。 D3...

linux小陶 ⋅ 2016/12/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 58分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部