整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：
Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。
Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。
使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。
Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。
Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。
Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。
HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。
Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。
Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。
此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。
CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。
Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。
ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。
當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。
/小鉗
本文涉及到的應用（無利益相關）
眾所周知，這是一個信息泛濫以至于過剩的時代。每天在被鋪天蓋地的信息洪流淹沒的時候，相信諸位都會對自己并不那么可靠的大腦感到或多或少有些不滿[1]。我們需要做的不是鍛煉自己的大腦肌肉來使得自己的大腦更強韌，我們更需要的是一套可靠的外部工作流，來分擔我們大腦的工作，從而使自己的大腦能夠聚焦到思考人生這件重要的事情上來處理那些真正需要發揮創造性思維的事項上去。
所以，如果你也對互聯網信息資料有收集/加工處理和輸出有需求的話，那么本文所介紹的工作流或許對你會有所幫助。
▲ 基于Logseq 的大綱筆記是整理思路的最佳選擇
我以前一直都在用印象筆記剪藏網頁，這也是我一直認為自己無法放棄印象筆記的唯一原因，直到簡悅優雅的導出功能出現在我眼前... ....
Chrome 瀏覽器本身無疑是非常出色的一款瀏覽器, 但是其的閱讀體驗卻一直都很糟糕, 雖然閱讀模式 并不能說是瀏覽器的必備功能, 但是如果你體驗過Safari 或者Firefox 的閱讀模式之后, 再回頭來在Chrome 上閱讀信息, 應該會有那么一點糟心的感覺.
當然, 如果你用過基于Chromium 內核的Edge 瀏覽器的閱讀模式的話, 想必你一定會對原生Chrome 的閱讀模式感到痛苦的, 畢竟Edge 的閱讀模式實在是太出色了(可惜功能完全沒法和簡悅比)... ...
無論如何, 我就這么踏上了尋找一種好用的閱讀模式的插件之旅, 期間接觸過很多閱讀模式的方法, 零零散散的插件也用過很多, 抱歉的是對于那些插件我現在幾乎都記不得名字了, 也許他們也有其特點, 但是對我而言, 還不夠好用!
有相當長一段時間, 我甚至與依賴印象筆記 的剪藏插件附帶的功能來進行部分網頁的閱讀, 雖然那個排版的美感讓人難以恭維, 但是好歹在頁面清爽度和可讀性上達到了及格效果, 網站適配度也還可以, 閱讀完了, 如果覺得有用(大概就是可以在此基礎上進行信息的萃取和二次創作這樣子), 那么順手還可以剪藏到印象筆記中, 作為當時的過渡方案, 總的來說, 對于提高我當時的工作效率和生產力還是有所裨益的.
后來, 簡悅 悄悄出現了.
第一次用簡悅的時候, 我就被他整潔的排版, 精心打磨的深色模式和絕大部分網站的完美適配所吸引, 所以即便是在它的后臺有這一大堆看著就讓人胸悶心慌眼花繚亂的設置選項, 我還是毫不猶豫地奔向了這個插件的懷抱, 到后來簡約升級2.0 付費版, 我也是毫不猶豫付了錢(當然價格真的是低到我都不敢相信—而且還是滿斷制, 在各種性價比不符的訂閱制應用中真的是一股清流—應該是立刻購買的重要原因吧).
▲ 在簡悅閱讀模式下閱讀我的專欄文章
簡悅到底好在哪里?
網絡上有大量的信息資源, 其中不乏學術資料, 我下面的例子就是關于學術資料搜集的.
首先當然是泛讀 , 當我對某一個主題感興趣的時候, 我會到互聯網上進行大量的檢索, 其結果會包括各種各樣的鏈接: 博客文章/新聞資訊/學術論文(html版)等等, 在泛讀這一步, 簡悅完美做好了自己的本職工作 -> 清爽的閱讀模式給我帶來的良好閱讀體驗, 無論是從心理層面還是實際操作層面, 都提升了我的閱讀效率.
▲ 原網頁(左)/簡悅處理之后(右)
對于基礎的網頁閱讀, 簡悅的插件系統提供了字數統計 / 英文輔助閱讀增強 / 代碼段增強 / 劃詞翻譯 等出色的功能, 一切都與簡悅的閱讀模式原生結合, 有著絲滑的體驗, 對于泛讀而言, 這些功能已經足夠了.
到了精讀的層次, 簡悅的Live Editor 插件就要派上用場了, 顧名思義, 該插件能夠在簡悅閱讀模式下的網頁上直接進行編輯, 所見即所得. 用Live Editor , 你可以對頁面任何的文本內容進行修改, 就好像在文字處理工具中改文章一樣方便
▲ 用Live Editor 處理前后對比
我始終覺得, 對于一篇需要精讀的文章, 圈圈改改是很有價值的, 這也就是我推崇Live Editor 的原因---不需要離開瀏覽器就可以實現直接圈圈改改, 非常適合信息獲取的初級階段. 最重要的是, 所有的圈圈改改, 都可以方便地通過簡悅強大的導出功能, 以豐富的格式導出到本地, 以后進一步的進行信息整理/萃取和再利用.
對于我而言, 這一步是導出為Markdown , 在這之后, 重量級筆記應用Obsidian 將閃亮登場.
※ 除了Live Editor 之后, 簡悅有著更為強大的標注系統和與之深度集成的稍后讀 系統, 該系統配合本地版本的簡悅同步助手(Win+Mac), 可以實現很多自動化的信息獲取和管理功能, 在簡悅的GitHub主頁上, 開發者提供了相當詳細且完善的教學. 不過如果你和我一樣主力機器是Linux 那就別折騰這些啦, 老老實實用Live Editor 吧.
※ 除了導出Markdown 之外, 簡悅還能導出各種各樣的格式, 除了導出到本地, 還能導出到各種各樣的云文檔云服務, 具體你可以去選項頁瞅瞅, 我用不到就不多說了.
如果你品嘗過印象筆記編輯的卡頓，Word的臃腫或者代碼的繁瑣，又不想自己的數據完全被基于云端的Notion、語雀或者飛書文檔之類所“挾持”，那么基于本地markdown的Obsidian應該是你的白月光... ...
雖然我很想用更大的篇幅來吹一波Obsidian , 但是很抱歉, 這篇文章是吹簡悅的, 所以從現在開始我要長話短說了!
雖然通過簡悅同步助手和稍后讀, 簡悅可以和Obsidian有著更為緊密且絲滑的集成(包括自動化的雙鏈等, 具體參見簡悅Github主頁的教程), 但我目前還不需要那些我用不到的功能, 就不多說了. 我的這套工作流, 邏輯很簡單很清晰, 按照以下步驟走:
▲ 這是通過Live Editor 圈圈改改編輯過的頁面
▲ 簡單三步走, 將一篇需要精讀的資料導入到了Obsidan的庫中
▲通過簡悅導出到Obsidian庫中的markdown文件，可通過Obsidian內置導出模塊生成優雅的pdf文件
好吧，我承認這個所謂的后處理這一章節是我硬湊出來的，畢竟前處理和求解器都有了，雖然大部分后處理工作實際上仍然應該是Obsidian的活兒，但是AnyTXT仍然有其妙處... ...
AnyTXT 幾乎能夠所檢索你硬盤內存儲的所有文本類內容, 使用的學習成本為0, 所以操作方面就不多說了. 值得一提的是, 當你的本地筆記積累到一定數量的時候, 你用AnyTXT進行本地關鍵詞檢索之時, 時不時還會發現知識點之間的奇妙聯系, 比如說對于我來說, 我在檢索vortex methods的時候, 就發現了一段以前為飛機渦格法編寫的代碼(早已被大腦遺忘), 盡管此次我搜索渦方法目的是為了編寫直升機渦尾跡流場計算代碼, 但是那一段飛機渦格代碼卻給我帶來了不少的參考和靈感, 這大概也算是某種小驚喜了吧.
端數據可視化插件大盤點 圖表/圖譜/地圖/關系圖全有
在大數據時代，很多時候我們需要在網頁中顯示數據統計報表，從而能很直觀地了解數據的走向，開發人員很多時候需要使用圖表來表現一些數據。隨著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大數據 感謝！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
