隨著發(fā)展贺氓，現(xiàn)代 Web 設(shè)計在改善體驗和功能的同時，對于美觀的追求也越來越高床蜘，可視化辙培、交互式、動態(tài)等元素和效果似乎已成為標(biāo)配邢锯。

以下是為開發(fā)者推薦的 10 款開源 Javascript 圖表庫扬蕊，可以幫助實現(xiàn)各種漂亮的功能。話不多說丹擎，直接開始吧尾抑！

ECharts

ECharts 由百度前端技術(shù)部開發(fā)的，是一個純 Javascript 的圖表庫蒂培，可以流暢的運行在 PC 和移動設(shè)備上再愈，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11、Chrome护戳、Firefox翎冲、Safari等），底層依賴輕量級的 Canvas 類庫 ZRender媳荒，提供直觀抗悍，生動，可交互钳枕，可高度個性化定制的數(shù)據(jù)可視化圖表缴渊。

ECharts 有良好的自適應(yīng)效果，ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果鱼炒，并且對移動端做了深度的優(yōu)化疟暖。

image

image

Chart.js

Chart.js 是一個簡單、面向?qū)ο蟆樵O(shè)計者和開發(fā)者準(zhǔn)備的 Javascript 圖表繪制工具庫俐巴，基于 HTML5 canvas 技術(shù)骨望，支持所有現(xiàn)代瀏覽器，并且針對 IE7/8 提供了降級替代方案欣舵。

Chart.js 不依賴任何外部工具庫擎鸠，輕量級（壓縮之后僅有4.5k），并且提供了加載外部參數(shù)的方法缘圈。能用多種不同的方式讓數(shù)據(jù)變得可視化劣光。

image

image

jqPlot

jqPlot 是一個非常強大的基于 jquery 類庫的 Javascript 圖表工具，可在網(wǎng)頁中繪制線狀糟把、柱狀绢涡、餅狀等多種樣式圖表。

jqPlot 強大之處在于將內(nèi)容呈現(xiàn)為動態(tài)嵌入的靜態(tài)圖像遣疯，這意味著圖表數(shù)據(jù)可以通過 Ajax 更新雄可，甚至不需要刷新頁面。 某些圖表類型甚至具有懸停選項缠犀，可在懸停時顯示相關(guān)數(shù)據(jù)数苫。

image

image

Chartist.js

Chartist.js 是一個使用 SVG 構(gòu)建的簡單的響應(yīng)式圖表庫，可以作為前端圖表生成器辨液。同樣兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11虐急、Chrome、Firefox滔迈、Safari等）止吁。

Chartist.js 每個圖表從大小到配色方案都是完全響應(yīng)和高度可定制的，依靠 SVG 將圖形作為圖像動態(tài)地呈現(xiàn)到頁面上燎悍。完全使用 SASS 構(gòu)建敬惦，并且支持自定義。

image

image

xCharts

xCharts 是一個使用 D3.js 來構(gòu)建漂亮的可定制的數(shù)據(jù)驅(qū)動的 JavaScript 圖表庫间涵，使用 HTML仁热、CSS榜揖、SVG 實現(xiàn)圖表勾哩，適用于熟悉數(shù)據(jù)可視化的用戶。

通過 xCharts 渲染的所有內(nèi)容都有很強的適應(yīng)性举哟，在與數(shù)據(jù)交互時添加自己的動畫或緩動函數(shù)也較為容易思劳。

image

C3.js

C3.js 也是一個基于 D3.js 的可重用的開源 JavaScript 圖表庫。這意味著將數(shù)據(jù)圖表繪制到 HTML 頁面上的過程得到簡化妨猩，不需要大量的自定義 D3 圖表代碼潜叛，也相對容易上手。

C3.js 所有的數(shù)據(jù)是完全動態(tài)的，從工具到圖形顏色威兜。它使用非常舒服销斟，有充分的可定制性和控制性，支持多種圖表類型椒舵。

image

Pizza Pie Charts

Pizza Pie Charts 是由 ZURB 開發(fā)的一個知名的 JavaScript 庫蚂踊，用于渲染基于 SVG 的餅圖。

Pizza Pie Charts 所有的顯示設(shè)置和選項都可以直接在 CSS 或 JavaScript中 修改笔宿。它專注于以最好的方式將數(shù)據(jù)呈現(xiàn)到餅圖犁钟。如果是其他圖表樣式，還是建議使用其它的幾個庫泼橘。

image

Protovis

Protovis 使用簡單的標(biāo)記（例如條形和點）組成數(shù)據(jù)的自定義視圖涝动。 與一些低級圖形庫不同，Protovis 通過對數(shù)據(jù)進行編碼的動態(tài)屬性來定義標(biāo)記炬灭，允許繼承醋粟、縮放和布局來簡化構(gòu)建。

Protovis 有能力渲染非常獨特的圖表樣式担败，它使用 JavaScript 和 SVG 進行 Web 本地可視化昔穴，無需插件（除了需要一個瀏覽器）。

image

Flot

Flot 是 jQuery 的純 JavaScript 圖表庫提前，專注于使用簡單吗货，外觀漂亮和強互動功能。它是特定的 jQuery 庫狈网，這意味著你需要使用它需要熟悉基礎(chǔ)的 jQuery宙搬。但是從另一方面來說，這意味著你可以全面控制呈現(xiàn)拓哺，動作和用戶交互勇垛。

使用 Flot 的主要好處是能夠創(chuàng)建動畫繪制圖，可以以此展現(xiàn)大量的結(jié)果數(shù)據(jù)士鸥。它兼容大多數(shù)現(xiàn)代瀏覽器闲孤，向下兼容到 IE6 和 Firefox2。

image

Dygraphs

Dygraphs 也是一個基于 HTML5 canvas 的 JavaScript 圖表庫烤礁，可以生成一個可交互式的讼积，可縮放的的曲線表，可以用來顯示大密度的數(shù)據(jù)集（比如股票脚仔、氣溫等等）勤众，并且可以讓用戶來瀏覽和解釋這個曲線圖。

Dygraphs 在移動設(shè)備上還可以通過縮放顯示效果來支持交互鲤脏。如果你想用 JavaScript 繪制數(shù)據(jù)们颜，那么 Dygraphs 是一個不錯的選擇吕朵。

image