數(shù)據(jù)時(shí)代，收集和使用數(shù)據(jù)的需求正在爆發(fā)式增長(zhǎng)，數(shù)據(jù)可視化也變得愈加重要。開(kāi)發(fā)人員在想方設(shè)法將不同數(shù)據(jù)庫(kù)中的記錄整合到儀表板和漂亮的圖表中，向人們快速直觀地展示信息。

在過(guò)去十年中數(shù)據(jù)可視化技術(shù)不斷改進(jìn)，結(jié)果涌現(xiàn)了很多高水平的圖表庫(kù)。

21 世紀(jì)初期，人們使用服務(wù)端圖像位圖來(lái)生成圖表。那時(shí)像 Silverlight 和 Flash 這樣的插件提供了豐富的交互式圖表體驗(yàn)，代價(jià)是減少電池壽命、拖慢下載速度并耗費(fèi)更多系統(tǒng)資源。

移動(dòng)設(shè)備興起之后，移動(dòng)平臺(tái)不再支持插件并開(kāi)始轉(zhuǎn)向開(kāi)放客戶端技術(shù)，這些技術(shù)可以在任何平臺(tái)上運(yùn)行，成為了開(kāi)發(fā)人員的首選。同時(shí)，觸摸手勢(shì)縮放和非常高分辨率的屏幕開(kāi)始流行，使得無(wú)關(guān)分辨率的矢量圖表廣受歡迎。

隨之而來(lái)的就是數(shù)據(jù)可視化的時(shí)代，SVG 可擴(kuò)展矢量圖像和 JavaScript 成為主角。今天的圖表技術(shù)可支持所有瀏覽器平臺(tái)，支持交互性和動(dòng)畫，并且不需要特殊的插件。這些圖表在高分辨率設(shè)備中也有很好的顯示效果。我們可以在 JS 開(kāi)發(fā)中使用許多 JavaScript 圖表庫(kù)實(shí)現(xiàn)這些目標(biāo)。

市面上有很多 JavaScript 圖表庫(kù)，本文則列出了其中的幾款佼佼者，可以用在你的新項(xiàng)目中。

以下就是 2019 年的頂級(jí) Javascript 圖表庫(kù)名單。

D3.js

D3.js 是一個(gè)圖形 JavaScript 庫(kù)，功能眾多，十分強(qiáng)大。你可以用它對(duì)文檔做數(shù)據(jù)驅(qū)動(dòng)的轉(zhuǎn)換，然后將任意數(shù)據(jù)綁定到 DOM 上。

D3 是非常優(yōu)秀的圖表庫(kù)。它有一些較小的技術(shù)模塊，如顏色、軸、輪廓、層次結(jié)構(gòu)、多邊形、緩動(dòng)等。這也意味著你需要學(xué)習(xí)很多知識(shí)才能用好它，上手并不容易。

即使用它創(chuàng)建簡(jiǎn)單的圖表也可能需要復(fù)雜的步驟。你需要明確定義包含圖表項(xiàng)和軸在內(nèi)的所有元素。它提供了一些示例，教你如何使用 CSS 來(lái)設(shè)置圖表元素的樣式。開(kāi)發(fā)者無(wú)法自動(dòng)應(yīng)用基于圖表的功能。

如果你想從零開(kāi)始設(shè)計(jì)復(fù)雜的圖表，完全按照自己的想法控制所有元素，那么這個(gè)庫(kù)就是你的首選。但如果時(shí)間緊迫，從頭開(kāi)始解決數(shù)據(jù)可視化項(xiàng)目需求可能就不是什么好主意了。

作為圖表庫(kù)來(lái)說(shuō)，D3.js 可以充當(dāng)構(gòu)建塊。開(kāi)發(fā)者可以用 D3 與 NVD3 一類的方案配合工作。這個(gè)圖表庫(kù)完全免費(fèi)并開(kāi)源。

Highcharts

Highcharts 是市面流行的 JavaScript 圖表庫(kù)之一，并被許多大公司采用。為了提供對(duì) IE6 到 IE8 的兼容性，它先使用 SVG 然后轉(zhuǎn)向 VML 來(lái)生成圖表。它的示例圖表帶有一些很棒的功能，但看起來(lái)不怎么吸引人。它的文檔里有很多 API 文檔教程和相關(guān)主題。

它的 API 易于使用，開(kāi)發(fā)者可以使用配置選項(xiàng)來(lái)開(kāi)發(fā)圖表。對(duì)于個(gè)人和非商業(yè)用途，Highcharts 可免費(fèi)使用；證券行業(yè)等用途需要商業(yè)許可，而甘特圖和地圖圖表則需要單獨(dú)的許可證。

Chart.js

Chart.js 是一個(gè)開(kāi)源 JavaScript 庫(kù)，支持 8 種類型的圖表。它只有 60kb，是一個(gè)非常小的 JS 庫(kù)。它支持的圖表類型包括雷達(dá)、內(nèi)聯(lián)圖表、餅圖、條形圖、散點(diǎn)圖、面積圖、氣泡和混合等。它還支持時(shí)間序列。在呈現(xiàn)層面，它使用 canvas 元素并能響應(yīng)窗口大小調(diào)整縮放比率。它對(duì) IE9 向后兼容。要兼容 IE7 的話也可以使用 Polyfills。

初次使用它的示例時(shí)還能看到現(xiàn)代感的初始動(dòng)畫。實(shí)時(shí)添加數(shù)據(jù)點(diǎn)或序列時(shí)有平滑的動(dòng)畫效果。你可以調(diào)用 update() 函數(shù)來(lái)修改圖表選項(xiàng)并重繪圖表。

在它的網(wǎng)站中沒(méi)有展示示例源代碼，但可以在 GitHub 倉(cāng)庫(kù)中找到。它的 API 簡(jiǎn)潔直觀。用戶使用配置選項(xiàng)來(lái)創(chuàng)建和修改圖表。它的文檔內(nèi)容翔實(shí)，附帶代碼片段和屬性 API 的教程。

這個(gè)庫(kù)可免費(fèi)用于商業(yè)和個(gè)人用途。它是開(kāi)源項(xiàng)目。但對(duì)于更高級(jí)別的需求來(lái)說(shuō)，它提供的圖表類型可能有點(diǎn)少。

......

點(diǎn)擊“了解更多”，查看全文

介

html2canvas庫(kù)允許您直接在用戶瀏覽器上截取網(wǎng)頁(yè)或部分網(wǎng)頁(yè)的“屏幕截圖”。屏幕截圖基于DOM，因此它可能不是真實(shí)表示的100％準(zhǔn)確，因?yàn)樗鼪](méi)有制作實(shí)際的屏幕截圖，而是根據(jù)頁(yè)面上可用的信息構(gòu)建屏幕截圖。目前Github star 17.5K+,可以說(shuō)非常熱門，最新版本1.0.0-rc.3。以上是官網(wǎng)截圖：

點(diǎn)擊capture按鈕效果截圖：

工作原理

html2canvas庫(kù)通過(guò)讀取DOM以及應(yīng)用于元素的不同樣式，將當(dāng)前頁(yè)面呈現(xiàn)為畫布圖像。它不需要來(lái)自服務(wù)器的任何渲染，因?yàn)檎麄€(gè)圖像是在客戶端的瀏覽器上創(chuàng)建的。但是，由于它嚴(yán)重依賴于瀏覽器，因此該庫(kù)不適合在nodejs中使用。它也不會(huì)主動(dòng)地規(guī)避任何瀏覽器內(nèi)容策略限制，因此對(duì)應(yīng)呈現(xiàn)跨源內(nèi)容將需要代理來(lái)將內(nèi)容提供給相同的源。

瀏覽器兼容性

該庫(kù)應(yīng)該可以在以下瀏覽器上正常工作（使用Promisepolyfill）：

• Firefox 3.5+
• 谷歌瀏覽器
• 歌劇院12+
• IE9 +
• Safari 6+

由于該庫(kù)需要手動(dòng)構(gòu)建每個(gè)CSS屬性以支持，因此還有一些尚不支持的屬性。

目前不支持這些CSS屬性:

• background-blend-mode
• border-image
• box-decoration-break
• box-shadow
• filter
• font-variant-ligatures
• mix-blend-mode
• object-fit
• repeating-linear-gradient()
• writing-mode
• zoom

快速上手

安裝

npm install html2canvas
import html2canvas from 'html2canvas';

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
 <h4 style="color: #000; ">Hello world!</h4>
</div>

JavaScript

html2canvas(document.querySelector("#capture")).then(canvas=> {
 document.body.appendChild(canvas)
});

Tips:

html2canvas(element, options), 具體的option如何配置請(qǐng)?jiān)敿?xì)閱讀官方文檔。