整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

推荐50个超实用的 Chrome 扩展,建议收藏

家好,我是 Echa。

今天来分享 50 个超实用的 Chrome 浏览器扩展!

JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可视化JSON文件。其核心功能包括:

  • 支持将JSON数据进行格式化,并使用属性或者图表进行展示;
  • 使用面包屑深入遍历 JSON 属性;
  • 在输入区写入自定义 JSON;
  • 导入本地 JSON 文件;
  • 使用上下文菜单下载 JSON 文件;
  • 网址过滤器;
  • 改变主题;
  • 自定义 CSS ;
  • 复制属性和值;

输入界面如下:

格式化之后:

2. JSONVue

JSONVue 是一个JSON数据查看器,主要用来格式化JSON数据:

网站技术

3. Library Sniffer

Library Sniffer 是一款给开发者使用的工具,能够探测当前网页所使用的类库、框架和服务器环境,为开发者提供了方便。

4. Wappalyzer

Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展,可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。

5. WhatRuns

WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。

开发调试

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以将设计图加载至网页中,与已成型的网页进行重叠对比,以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。

7. Clear Cache

可以使用此扩展程序快速清除缓存,无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量,包括:应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。

8. VisBug

VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具,它可以让用户使用点击式和拖放式界面来查看网站的元素。

9. Debug CSS

Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播,按住Ctrl,并将鼠标悬浮在元素上,即可查看其信息:

10. CSS Viewer

CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义,CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。

11. EditThisCookie

EditThisCookie 是一个 cookie 管理器。可以添加,删除,编辑,搜索,锁定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后,将在 Chrome DevTools 中获得两个新选项卡:"⚛️ Components" 和 "⚛️ Profiler":

  • Components 选项卡显示了在页面上呈现的根 React 组件,以及它们最终呈现的子组件;
  • Profiler 选项卡用来记录性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件,可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。

14. Augury

Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件,在Chrome中安装了Firebug Lite插件以后,开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容,其包含了基本的HTML、CSS以及Javascript的调试功能,用于帮助网页前端开发工程师快速地调试网页,以便及时地找到网页中的BUG并及时修复。

16. HTML Validator

HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示,详细信息可以在浏览器的开发者工具中查看。

17. Web Developer

Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox,并且可以在这些浏览器支持的任何平台上运行,包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox浏览器插件,提供URL转发、修改HTTP请求和结果、插入脚本等功能。

19. Window Resizer

Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。

21. Moesif Origin & CORS Changer

此插件允许直接从浏览器发送跨域请求,而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头,并将 Access-Control-Allow-Origin 设置为 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具,可让从网页等中选择颜色值。

23. CSSPeeper

CSS Peeper 用于检查和复制元素样式的优秀工具,使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上,然后单击鼠标即可复制元素的样式。

24. Dimensions

Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件,该插件在点击启动插件图标后,可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量,同时还可以通过使用快捷键来快速启用或关闭该插件的功能,简单实用。

25. Site Palette

Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。

26. ColorZilla

ColorZilla 是一款功能强大地提取网页色彩的工具;也是个快速的对颜色进行调节的Chrome插件,许多的用户将这款软件称呼为颜色吸取插件,它提取的颜色是非常的多样化,还可生产css颜色的代码等。

  • 吸管器-获取页面上任何像素或区域的颜色;
  • 一个先进的颜色选择器类似于可以在Photoshop和Paint Shop Pro中找到的;
  • 网页颜色分析器-分析任何网页上的DOM元素颜色,找到相应的元素;
  • 终极CSS梯度发生器;
  • 调色板查看器与7预先安装调色板;
  • 颜色历史最近挑选的颜色;
  • 显示标签名称,类别,编号,大小等元素信息;
  • 光标下的轮廓元素;
  • 自动将生成或采样的颜色复制到CSS RGB,Hex和其他格式的剪贴板;
  • 使用键盘快速采样页面颜色的键盘快捷键。

字体

27. WhatFont

当我们想查看网页中文字的字体时,最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢?WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标,再点需要查看为文字即可:

28. Fonts Ninja

Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。

标签页

29. BrowserStack

使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。

30. Toby

Toby 是一款 Chrome 新标签页工具,能够将未读的标签页分组显示在新标签页中,这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口,将你的标签页都拖进 Toby 中,就不需要实时开着占地方了。

31. daily.dev

该扩展提供了每日热门开发者新闻,不需要再浪费时间搜索高质量的文章了。

32. Momentum

Momentum 拥有漂亮的新标签页面,每日更新精彩背景壁纸图片,可设置每日新鲜事焦点以及跟踪待办事项,无广告,无弹窗。

33. The Great Suspender

The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡,在可配置的时间之后未查看的选项卡将在后台自动挂起,从而释放该选项卡消耗的内存和 CPU。

34. Session Buddy

Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复,从而达到节省内存的作用。

Github

35. Octotree

Octotree 旨在让 GitHub 体验更好。通常,为了检查 Github 中的子文件夹,需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构,这有助于更好地理解文件夹结构。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。

网页测试

37. axe DevTools

ax DevTools 是一个快速、轻量级但功能强大的测试工具,由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。

38. OctoLinker

OctoLinker 可以将特定语言的语句(如 include、require 或 import)转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时,只需将鼠标悬停在链接的文件上并单击即可打开。

39. Web Developer Checklist

此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。

40. Check My Links

Check My Links 是一个链接检查器,它可以抓取网页并查找损坏的链接。

41. Checkbot

Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告,该报告汇总了引起某种警告或错误的所有链接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。

隐私广告

44. Ghostery

Ghostery 是强大的隐私保护扩展程序。其主要有以下功能:

  • 拦截广告:Ghostery 内置的广告拦截工具可以移除网页上的广告,防止网页杂乱无章,让你专注于想看的内容。
  • 保护隐私:利用 Ghostery 可以查看和拦截所浏览的网站上的跟踪器,控制收集数据的跟踪器。增强反跟踪功能还能将数据匿名化,进一步保护隐私。
  • 提高浏览速度:Ghostery 的智能拦截功能可以自动拦截和取消拦截跟踪器来满足网页质量标准,提高网页加载速度,优化网页性能。

45. AdBlock

AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。

效率工具

46. Marinara

番茄工作法(Pomodoro®)时间管理助理。• 长短两种休息时间 • 带有倒计时显示的工具栏图标 • 追踪Pomodoro历史和统计讯息 • 可配置的长休间隔 • 可配置的定时器时长 • 桌面与新标签页通知 • 超过20种音效可选的声音通知 • 计时器秒针走动音效

47. Loom

Loom 可以用来快速录制视频,并且能够将录制的视频上传到指定的网页中,Loom还支持在用户点击启动插件时,立即捕捉屏幕图像,同时开始视频录制操作,还可以将录制好的视频复制到粘贴板中存储。

48. GoFullPage

GoFullPage 是一款全屏截图插件(整个网页截图),完整捕获您当前页面的屏幕,进行滚动截图,而无需任何额外的权限。单击扩展程序图标,然后将其传输到屏幕快照的新标签页中,可以在其中将其下载为图像或PDF,甚至只需拖动即可,保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的图像查看体验,旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时,只需在页面右键点击图片,选择“在新标签页中打开图片”即可。

50. svg-grabber

svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。

/小钳

本文涉及到的应用(无利益相关)

  1. 简悦 :: 一个有着无限可能的chrome辅助阅读插件,然而它的功能早就远远超出了传统意义上的阅读模式
  2. Obsidian :: 最好用的笔记app(我要我觉得),基于本地markdown,治好了我多年的印象笔记还能苟强迫症,我不仅拿它写专栏文章,同时正在用它写大小论文
  3. Syncthing :: 开源多端同步工具,我不仅用它来在PC和移动设备之间同步文章,代码,还用来在不同工作站之间同步计算过程文件,局域网同步性能堪称逆天
  4. Cryptomator :: 开源加密工具,极速解密&如同windows原生文件操作的丝滑体验
  5. Logseq :: 以大纲笔记为特点的笔记app,基于本地markdown功能强大且处于积极开发中,对大纲笔记爱好者来说,简直比Obsidian还出色
  6. AnyTXT :: 可以用来搜索整个硬盘上所有的包含有文字的文档,偶尔搜一下,可能会发现一些你未曾想到过的文档之间的关联

众所周知,这是一个信息泛滥以至于过剩的时代。每天在被铺天盖地的信息洪流淹没的时候,相信诸位都会对自己并不那么可靠的大脑感到或多或少有些不满[1]。我们需要做的不是锻炼自己的大脑肌肉来使得自己的大脑更强韧,我们更需要的是一套可靠的外部工作流,来分担我们大脑的工作,从而使自己的大脑能够聚焦到思考人生这件重要的事情上来处理那些真正需要发挥创造性思维的事项上去。

所以,如果你也对互联网信息资料有收集/加工处理和输出有需求的话,那么本文所介绍的工作流或许对你会有所帮助。

▲ 基于Logseq 的大纲笔记是整理思路的最佳选择


1st - 前处理 >> 简悦

我以前一直都在用印象笔记剪藏网页,这也是我一直认为自己无法放弃印象笔记的唯一原因,直到简悦优雅的导出功能出现在我眼前... ....

Chrome 浏览器本身无疑是非常出色的一款浏览器, 但是其的阅读体验却一直都很糟糕, 虽然阅读模式 并不能说是浏览器的必备功能, 但是如果你体验过Safari 或者Firefox 的阅读模式之后, 再回头来在Chrome 上阅读信息, 应该会有那么一点糟心的感觉.

当然, 如果你用过基于Chromium 内核的Edge 浏览器的阅读模式的话, 想必你一定会对原生Chrome 的阅读模式感到痛苦的, 毕竟Edge 的阅读模式实在是太出色了(可惜功能完全没法和简悦比)... ...

无论如何, 我就这么踏上了寻找一种好用的阅读模式的插件之旅, 期间接触过很多阅读模式的方法, 零零散散的插件也用过很多, 抱歉的是对于那些插件我现在几乎都记不得名字了, 也许他们也有其特点, 但是对我而言, 还不够好用!

有相当长一段时间, 我甚至与依赖印象笔记 的剪藏插件附带的功能来进行部分网页的阅读, 虽然那个排版的美感让人难以恭维, 但是好歹在页面清爽度和可读性上达到了及格效果, 网站适配度也还可以, 阅读完了, 如果觉得有用(大概就是可以在此基础上进行信息的萃取和二次创作这样子), 那么顺手还可以剪藏到印象笔记中, 作为当时的过渡方案, 总的来说, 对于提高我当时的工作效率和生产力还是有所裨益的.

后来, 简悦 悄悄出现了.

第一次用简悦的时候, 我就被他整洁的排版, 精心打磨的深色模式和绝大部分网站的完美适配所吸引, 所以即便是在它的后台有这一大堆看着就让人胸闷心慌眼花缭乱的设置选项, 我还是毫不犹豫地奔向了这个插件的怀抱, 到后来简约升级2.0 付费版, 我也是毫不犹豫付了钱(当然价格真的是低到我都不敢相信—而且还是满断制, 在各种性价比不符的订阅制应用中真的是一股清流—应该是立刻购买的重要原因吧).

▲ 在简悦阅读模式下阅读我的专栏文章

简悦到底好在哪里?

  • 极其全面的网站适配, 可以说, 只要一个网页看起来像是值得阅读的, 那么简悦都是适配的, 退一万步说, 即便网页源真的没有适配, 开发者也给出了手动适配的保姆级教学
  • 精心打磨且高度可定制的阅读模式界面, 无论是字距/行距/版面宽度, 还是浅色/深色 都是可以定制的, 如果你懂css, 我觉得可定制度应该可以更大(虽然我不懂), 不过, 在作者提供的详细教学引导下, 我还是通过开放的google fonts 给我的阅读模式设置了专属字体.
  • 野心勃勃的插件系统给简悦提供了无数可能, 让其完全超越阅读模式而成为了一种真正的知识管理工具, 下面我要讲的基于简悦的网络信息资料搜集就有赖于这个插件系统

网络上有大量的信息资源, 其中不乏学术资料, 我下面的例子就是关于学术资料搜集的.

首先当然是泛读 , 当我对某一个主题感兴趣的时候, 我会到互联网上进行大量的检索, 其结果会包括各种各样的链接: 博客文章/新闻资讯/学术论文(html版)等等, 在泛读这一步, 简悦完美做好了自己的本职工作 -> 清爽的阅读模式给我带来的良好阅读体验, 无论是从心理层面还是实际操作层面, 都提升了我的阅读效率.

▲ 原网页(左)/简悦处理之后(右)

对于基础的网页阅读, 简悦的插件系统提供了字数统计 / 英文辅助阅读增强 / 代码段增强 / 划词翻译 等出色的功能, 一切都与简悦的阅读模式原生结合, 有着丝滑的体验, 对于泛读而言, 这些功能已经足够了.

到了精读的层次, 简悦的Live Editor 插件就要派上用场了, 顾名思义, 该插件能够在简悦阅读模式下的网页上直接进行编辑, 所见即所得. 用Live Editor , 你可以对页面任何的文本内容进行修改, 就好像在文字处理工具中改文章一样方便

▲ 用Live Editor 处理前后对比

我始终觉得, 对于一篇需要精读的文章, 圈圈改改是很有价值的, 这也就是我推崇Live Editor 的原因---不需要离开浏览器就可以实现直接圈圈改改, 非常适合信息获取的初级阶段. 最重要的是, 所有的圈圈改改, 都可以方便地通过简悦强大的导出功能, 以丰富的格式导出到本地, 以后进一步的进行信息整理/萃取和再利用.

对于我而言, 这一步是导出为Markdown , 在这之后, 重量级笔记应用Obsidian 将闪亮登场.

※ 除了Live Editor 之后, 简悦有着更为强大的标注系统和与之深度集成的稍后读 系统, 该系统配合本地版本的简悦同步助手(Win+Mac), 可以实现很多自动化的信息获取和管理功能, 在简悦的GitHub主页上, 开发者提供了相当详细且完善的教学. 不过如果你和我一样主力机器是Linux 那就别折腾这些啦, 老老实实用Live Editor 吧.

※ 除了导出Markdown 之外, 简悦还能导出各种各样的格式, 除了导出到本地, 还能导出到各种各样的云文档云服务, 具体你可以去选项页瞅瞅, 我用不到就不多说了.


2nd - 求解器 >> Obsidian

如果你品尝过印象笔记编辑的卡顿,Word的臃肿或者代码的繁琐,又不想自己的数据完全被基于云端的Notion、语雀或者飞书文档之类所“挟持”,那么基于本地markdown的Obsidian应该是你的白月光... ...

虽然我很想用更大的篇幅来吹一波Obsidian , 但是很抱歉, 这篇文章是吹简悦的, 所以从现在开始我要长话短说了!

虽然通过简悦同步助手和稍后读, 简悦可以和Obsidian有着更为紧密且丝滑的集成(包括自动化的双链等, 具体参见简悦Github主页的教程), 但我目前还不需要那些我用不到的功能, 就不多说了. 我的这套工作流, 逻辑很简单很清晰, 按照以下步骤走:

  1. 建立一个本地的Inbox文件夹;
  2. Chrome设置自动保存文件, 默认保存位置就是Inbox;
  3. 认为需要通过简悦精读的文章, 就会用Live Editor 圈圈改改并打上标签, 随后点击简悦的导出 -> Markdown, 于是一篇完整的markdown资料就进入到了我的Inbox库中;
  4. 在完成初步的信息搜集之后(查完了一圈信息, 泛读了不少文章, 精读导出了一些到Inbox中), 回到Obsidian, 通过标签查找等手段来查阅那些需要精读的文章, 对其进行进一步加工处理;
  5. (有必要的话) 通过Obsidian出色的导出功能, 导出为排版精美的PDF文件以便进行分享;
  6. 通过Syncthing 这个开源同步神器, 实现多端之间的高效同步, 而Obsidian在移动端和PC端几乎毫无差别的笔记编辑体验确保了多端同步之后的工作效率;
  7. (有必要的话) 通过Cryptomator 这个开源文件加密应用, 进一步保护你的笔记安全.

▲ 这是通过Live Editor 圈圈改改编辑过的页面

▲ 简单三步走, 将一篇需要精读的资料导入到了Obsidan的库中

▲通过简悦导出到Obsidian库中的markdown文件,可通过Obsidian内置导出模块生成优雅的pdf文件


3rd - 后处理 >> AnyTXT

好吧,我承认这个所谓的后处理这一章节是我硬凑出来的,毕竟前处理和求解器都有了,虽然大部分后处理工作实际上仍然应该是Obsidian的活儿,但是AnyTXT仍然有其妙处... ...

AnyTXT 几乎能够所检索你硬盘内存储的所有文本类内容, 使用的学习成本为0, 所以操作方面就不多说了. 值得一提的是, 当你的本地笔记积累到一定数量的时候, 你用AnyTXT进行本地关键词检索之时, 时不时还会发现知识点之间的奇妙联系, 比如说对于我来说, 我在检索vortex methods的时候, 就发现了一段以前为飞机涡格法编写的代码(早已被大脑遗忘), 尽管此次我搜索涡方法目的是为了编写直升机涡尾迹流场计算代码, 但是那一段飞机涡格代码却给我带来了不少的参考和灵感, 这大概也算是某种小惊喜了吧.


  1. 我用过十几种笔记App,最后只推荐这个新来的:flomo/浮墨笔记食用点评

端数据可视化插件大盘点 图表/图谱/地图/关系图全有

在大数据时代,很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展,从传统只能依靠于flash、IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas、svg为代表的html5技术,表现点、线、面要素的技术已经越来越规范成熟。我把前端数据可视化分为了五种:

1.图表

2.图谱

3.地图

4.关系图

5.立体图

我将按照顺序介绍62款前端可视化插件,下面就分享下34款图表插件:

1.amcharts

url: http://www.amcharts.com/

browser:IE6+、chrome、safari、firefox、opear

resume:amCharts是一种先进的图表库,将适合任何数据可视化的需要。图表解决方案包括柱、栏、线、区域,一步,一步没有冒口,平滑线,烛台,OHLC,馅饼/甜甜圈,雷达/极地,XY /分散/泡沫,子弹,漏斗/金字塔图以及指标。

2.awesomechartjs

url:http://cyberpython.github.io/AwesomeChartJS/

github:https://github.com/cyberpython/AwesomeChartJS

browser:现代浏览器

resume:AwesomeChartJS是一个简单的Javascript库,可用于创建图表基于HTML 5画布元素。

3.axiis

url:http://www.axiis.org/

browser:官方未说明

resume:Axiis框架是一个开源的数据可视化为初学者和专家开发人员设计的。

4.bonsaijs

url:http://bonsaijs.org/

github:https://github.com/uxebu/bonsai

browser:IE9+、chrome20+、safari5+、firefox18+、opear12+

resume:用于创建图形和动画的js库

5.canvasjs

url:http://canvasjs.com

browser:官方未说明

resume:一个使用HTML5、JavaScript创建图表在画布上,图表包括几个好看的主题和10倍的速度比传统的基于Flash / SVG库——导致轻量级的,美丽的和响应指示板。收费

6.canvasxpress

url:http://canvasxpress.org/

browser:Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+

resume:CanvasXpress是一个独立的Javascript编写的图形库,支持所有主流浏览器中计算机和移动设备。

7.chartist

url:http://gionkunz.github.io/chartist-js/

github:https://github.com/gionkunz/chartist-js

browser:Firefox, Chrome, Safari, Opera, IE9+

resume:绘制多种图形的库

8.chartjs

url:http://www.chartjs.org/

github:https://github.com/nnnick/Chart.js

browser:IE9+、chrome、safari、firefox、opear、部分支持IE7/8

resume:chartjs是一个可以绘制多种图表的库,使用了html5的canvas技术

9.chartkick

url:http://ankane.github.io/chartkick/

github:https://github.com/ankane/chartkick

browser:IE6+、chrome、safari、firefox、opear

resume:chartkick是一个依赖于ruby的绘制图表的js库,在Python中也可以使用

10.DataWrapper

url:https://datawrapper.de/

github:https://github.com/datawrapper/datawrapper

browser:支持大部分浏览器

resume:Datawrapper完全免费,开源。您可以使用他们的免费主机服务,或者安装在您自己的服务器上。Datawrapper用PHP编写,非常易于安装、修改和拓展。可以绘制。但是DataWrapper是生成图表后嵌入到站点的。

11.dataset

url:http://misoproject.com/dataset/

github:https://github.com/misoproject/dataset

browser:官方未说明

resume:dataset是一个JavaScript客户端数据转换和管理库。数据集管理客户端数据简单处理加载、解析、排序、查询和操纵来自各种数据源的数据。

12.dc

url:http://dc-js.github.io/dc.js/

github:https://github.com/dc-js/dc.js

browser:官方未说明

resume:专门为探索大型、多维数据集而进行优化的库

13.dygraphs

url:http://dygraphs.com/

browser:IE8+、chrome、safari、firefox、opear

resume:dygraphs是一种快速、灵活的开源JavaScript库图表。

14.echart

url:http://echarts.baidu.com/index.html

github:https://github.com/ecomfe/echarts

browser:IE9+、chrome、safari、firefox、opear

resume:基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

15.flotr2

url:http://www.humblesoftware.com/flotr2/

github:https://github.com/HumbleSoftware/Flotr2

browser:FF, Chrome, IE6+, Android, iOS

resume:Flotr2是HTML5画图表和图形库。可以绘制线图、条图、蜡状图、饼图、气泡图

16.Flot

url:http://www.flotcharts.org/

browser:Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+

resume:一个基于jQuery的绘图库,可以绘制折线、散点、条形、饼状图

17.fusioncharts

url:http://www.fusioncharts.com/

browser:IE6+、chrome、safari、firefox、opear

resume:一个专门用来绘制图表的库,可以绘制90多种图表,但是收费

18.graphael

url:http://g.raphaeljs.com/

browser:Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+

resume:可以绘制各种图表的插件,而且非常简单灵活

19.highchart

url:http://www.highcharts.com/

github:https://github.com/highslide-software/highcharts.com/

browser:支持各种设备,ie6+

resume:在高版本浏览器中使用SVG,而在旧版本IE(包括IE6及更新版本)中使用后备的VML。有自己的团队负责,但是只对非商业用途免费,可以绘制 line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types

20.humble Finance

url:http://www.humblesoftware.com/finance/index

browser:FireFox, Safari, Chromium, or IE6+

resume:HumbleFinance是一个HTML5数据可视化工具类似于Flash工具,完全是用JavaScript编写的工具使用原型和Flotr库。

21.ichartjs

url:http://www.ichartjs.com/

github:https://github.com/wanghetommy/ichartjs

browser:IE9+、chrome、safari、firefox、opear

resume:ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。

22.icharts

url:http://www.icharts.net/

browser:官方未说明

resume:iCharts免费版本提供了一些基本的交互式图表样式,如果更使用高级的样式,则需要购买高级版本。

23.JavaScript InfoVis Toolkit

url:http://philogb.github.io/jit/

github:https://github.com/philogb/jit

browser:官方未给出具体版本

resume:JavaScript InfoVis Toolkit可以动态绘制各种图形,提供了一些预设的样式可用于展示不同的数据

24.jqplot

url:http://www.jqplot.com/

browser:IE 7+, Firefox, Safari, and Opera

resume:基于jQuery的绘图插件,可以绘制折线、条形、散点、饼状图

25.jscharts

url:http://www.jscharts.com/

browser:Firefox 1.5 +,Chrome 10 +,Internet Explorer 8 +,Safari 3.1 +,Opera 9 +

resume:jscharts是一个基于JavaScript的图表生成器,需要很少或根本没有编码。jscharts绘制图表是一个简单和容易的任务,因为您只需要使用客户端脚本(即由web浏览器)。不需要额外的插件或服务器模块。就包括我们的脚本,准备你的图表数据XML、JSON或JavaScript数组和你的表已经准备好了!允许您创建图柱状图,饼图或简单的线条图。收费但是有免费版本。

26.kendo-ui

url:http://www.telerik.com/kendo-ui

github:https://github.com/telerik/kendo-ui-core

browser:现代浏览器

resume:http://www.cnblogs.com/xiyangbaixue/p/3951297.html

27.nvd3

url:http://nvd3.org/

github:https://github.com/novus/nvd3

browser:Chrome,Firefox, Opera, Safari and Internet Explorer 10

resume:d3图表库

28.pizza-pie-charts

url:http://zurb.com/playground/pizza-pie-charts

github:https://github.com/zurb/pizza

browser:官方未说明

resume:主要用来生成饼状图的库

29.protovis

url:http://mbostock.github.io/protovis/

github:https://github.com/mbostock/protovis

browser:现代浏览器

resume:Protovis组成自定义视图的数据用简单的标志如酒吧和点。与低级图形库,迅速成为可视化乏味,Protovis定义是通过编码数据的动态属性,允许继承,尺度和layoutsto简化施工。

30.Peity

url:http://benpickles.github.io/peity/

browser:Chrome, Firefox, IE9+, Opera, Safari

resume:可以绘制多种图形,但是都是很小的图形,与jQuery Sparklines相似

31.rgraph

url:http://www.rgraph.net/

browser:现代浏览器

resume:RGraph是一个基于HTML5的开放web图表和图表库。RGraph创建这些图表在web浏览器使用JavaScript,这意味着更快的页面和web服务器负载,导致较小的页面大小和更快的网站。

32.webfx

url:http://webfx.eae.net/

browser:Firefox 1.5, Opera 9 and Internet Explorer 6

resume:支持多种图表的库

33.xcharts

url:http://tenxer.github.io/xcharts/

github:https://github.com/tenXer/xcharts/

browser:现代浏览器

resume:xCharts美丽是一个JavaScript库,用于构建和自定义数据驱动的web使用D3.js图表可视化。使用HTML、CSS和SVG,xCharts被设计成动态、流体、集成和定制。

34.zingchart

url:http://www.zingchart.com/

browser:官方未声明

resume:ZingChart创造惊人的可视化提供了灵活性和资源。提供超过100个图表类型,独特的特性,如缩放和交互式。

小结:

每款插件各有千秋,根据项目需求挑选不同插件。其中比较广泛使用的如echart(百度产品)、highchart等,下面我将分享图谱插件。

9款图谱插件:

1.crossfilter

url:http://square.github.io/crossfilter/

github:https://github.com/square/crossfilter

browser:官方未说明

resume:一个可以操作大型、多元数据集的库,帮助数据分析。

2.d3js

url:http://d3js.org/

github:https://github.com/mbostock/d3

browser:Firefox, Chrome, Safari, Opera, IE9+

resume:D3.js是一个JavaScript库,基于数据操作文档。D3可以帮助你把数据使用HTML、SVG和CSS。D3强调web标准给你完整的现代浏览器的功能没有把自己和一个专有的框架,结合强大的可视化组件和DOM操作的数据驱动的方法。

3.envisionjs

url:http://www.humblesoftware.com/envision/index

github:https://github.com/HumbleSoftware/envisionjs

browser:IE6+、chrome、safari、firefox、opear

resume:envisionjs是一个库来创建快速、动态和交互式可视化的图表

4.jsxgraph

url:http://jsxgraph.uni-bayreuth.de/wp/

github:https://github.com/jsxgraph/jsxgraph

browser:现代浏览器

resume:JSXGraph交互式几何是一个跨浏览器的库,函数绘图,图表和数据可视化在web浏览器中。它完全实现在JavaScript中,不依赖于任何其他库,并使用SVG VML或画布上。

5.paperjs

url:http://paperjs.org/

github:https://github.com/paperjs/paper.js

browser:IE9+,chrome,firefox

resume:paperjs是一款不可多得的js插件,可以绘制各种动态图形效果

6.processingjs

url:http://processingjs.org/

github:https://github.com/processing-js/processing-js/

browser:现代浏览器

resume:processingjs是用Java编写的,所以图形在网页上显示要靠Java程序,使用canvas技术

7.Raphaël

url:http://raphaeljs.com/

github:

browser:Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

resume:Raphaël是一款绘制矢量图的插件,支持低版本的浏览器

8.sparklines

url:http://omnipotent.net/jquery.sparkline/#s-about

github:

browser:Firefox 2+, Safari 3+, Opera 9, Chrome and Internet Explorer 6+,ios和andriod设备

resume:使用内嵌在HTML中的数据或通过javascript直接生成微线图(小内联图表),最主要的特点是可以生成波形图。

9.tangle

url:http://worrydream.com/Tangle/

github:

browser:

resume:Tangle是一个JavaScript库,用于创建活性文档。读者可以交互式地探索可能性,玩参数,并立即看到文档更新。Tangle是超级简单,容易学习。

小结:后面将分享6款地图插件。

6款地图插件:

1.Kartograph

url:http://kartograph.org/

github:https://github.com/kartograph/kartograph.py

browser:Internet Explorer 7+,chrome,Firefox

resume:Gregor Aisch开发的一个基于JavaScript和Python的非常炫的、完全使用矢量的库。

2.leafletjs

url:http://leafletjs.com/

github:https://github.com/Leaflet/Leaflet

browser:Chrome,Firefox,Safari 5+,Opera 12+,IE 7–11

resume:leafletjs是一个开源的支持移动端的地图插件,js文件仅仅有33kb,

3.Modest Maps

url:http://modestmaps.com/

github:https://github.com/modestmaps/modestmaps-js

browser:Firefox, Chrome, Opera, iOS, Android, and Internet Explorer 7-9.

resume:Modest Maps支持各种设备,也有很多版本。虽然是一款老的地图插件,但是非常小、可扩展而且免费

4.polymaps

url:http://polymaps.org/

github:https://github.com/simplegeo/polymaps

browser:现代浏览器

resume:Polymaps依赖于SVG,因此在较新的浏览器中表现很好。

5.imagemapster

url:http://www.outsharked.com/imagemapster/

browser:Firefox, Chrome, Safari, Opera, IE6+

resume:ImageMapster是一个jQuery插件,它使你的HTML图片像Flash一样炫

6.datavlab

url:http://datavlab.org/

github:https://github.com/TBEDP/datavjs

browser:IE6+、chrome、safari、firefox、opear

resume:datav.js是为了降低日常对于可视化方法使用的成本,用数据可视化的方法帮助到更多的人。

现在来分享9款关系图插件:

1.arborjs

url:http://arborjs.org/halfviz/#/a-new-hope

github:https://github.com/samizdatco/arbor

browser:IE6+,chrome,firefox

resume:基于jQuery的图谱可视化库,对于高版本的浏览器这个库使用了HTML的canvas元素

2.cubism

url:http://square.github.io/cubism/

github:https://github.com/square/cubism

browser:官方未说明

resume:时间序列数据可视化的D3插件

3.gantti

url:http://bastianallgeier.com/gantti/

github:https://github.com/bastianallgeier/gantti

browser:IE7+、chrome、safari、firefox、opear

resume:是一款PHP的前端数据展示插件

4.getspringy

url:http://getspringy.com/

github:https://github.com/dhotson/springy/

browser:官方未说明

resume:Springy是一个使用JavaScirpt实现的有向图布局算法,使用了真实世界中的一些物理原理,你可以随意拖动图表中的元素。

5.graphdracula

url:http://www.graphdracula.net/

github:https://github.com/strathausen/dracula

browser:官方未说明

resume:graphdracula是一组工具来显示和布局互动图表,以及各种相关算法。

6.sigamajs

url:http://sigmajs.org/

github:https://github.com/jacomyal/sigma.js

browser:IE9+,chrome,firefox

resume:一个非常轻量级的图谱可视化库。Sigma.js很漂亮,速度也快。

7.smoothiecharts

url:http://smoothiecharts.org/

github:https://github.com/joewalnes/smoothie/

browser:IE7+、chrome、safari、firefox、opear

resume:smoothiecharts是一个非常小的图表库为实时流媒体数据而设计的

8.timeplot

url:http://www.simile-widgets.org/timeplot/

github:

browser:官方未说明

resume:Timeplot是基于dhtml AJAXy部件绘图时间序列和覆盖基于时间的事件

9.visjs

url:http://visjs.org/

github:https://github.com/almende/vis/

browser:Chrome, Firefox, Opera, Safari, IE9+

resume:Vis.js是一个动态的、基于浏览器可视化库。库被设计成易于使用,处理大量的动态数据,使操作和交互的数据。时间表,包括组件库数据集网络、Graph2d,Graph3d。

End. 作者:夕阳白雪 via:36大数据 感谢!