數(shù)據(jù)在我們周?chē)允牵⑶宜鼈兊囊曈X(jué)化方案已成為我們生活的1部份。圖標(biāo)，信息圖，地圖和儀表盤(pán)由于它們以1個(gè)能比較容易轉(zhuǎn)換的方式展現(xiàn)信息，在今天有大量的需求。

好事是做圖表不需要從開(kāi)發(fā)者，設(shè)計(jì)者或任何其他人那獲得大量的技能或特殊的知識(shí)。在這篇文章中，我們會(huì)展現(xiàn)1些最基本的并解釋如何用javascript和html5輕松地處理交互數(shù)據(jù)視覺(jué)化。

我們將會(huì)以1個(gè)單項(xiàng)目條形圖表開(kāi)始所以你可以快速制作多項(xiàng)目和堆疊條形圖表的方法。條形圖表是1個(gè)現(xiàn)在展現(xiàn)數(shù)據(jù)的流行方法，并且所用到的開(kāi)發(fā)邏輯可以輕松地轉(zhuǎn)換成其他圖表類(lèi)型。

終究的圖表會(huì)是1個(gè)百分比堆疊的圖形圖表：

當(dāng)今有很多javascript的圖表庫(kù)；有1些是完全免費(fèi)的，比如D3和Google圖表，但是其他的1些需要針對(duì)商業(yè)用處收費(fèi)。我認(rèn)為，它們中最綜合，強(qiáng)悍的是amCharts,AnyChart,Highcharts。

我們這次的教程中，我已決定用AnyChart。但是，流程對(duì)每一個(gè)庫(kù)來(lái)講都是10分類(lèi)似的，特別是如果你正在做1些簡(jiǎn)單的東西。AnyChart有大量的文檔和API指引并且支持非常多種類(lèi)的圖表類(lèi)型并且有大量的可以馬上使用的demo，所以這對(duì)初學(xué)者來(lái)講是1個(gè)很好的選擇。

為了方便起見(jiàn)，這個(gè)教程里的所有例子在這個(gè)CodePen的集合中可以取得，并且可以在這馬上用或?qū)SS/HTML/JavaScript的demo文件輸出成緊縮文件。

JS圖表制作的3個(gè)簡(jiǎn)單步驟

為你的網(wǎng)站或app制作1個(gè)基本JavaScript的圖表的步驟包括以下3步：

準(zhǔn)備你的數(shù)據(jù)；

連接庫(kù)；

寫(xiě)1些簡(jiǎn)單的代碼。

1.準(zhǔn)備數(shù)據(jù)

就像1個(gè)大船需要深水每個(gè)簡(jiǎn)單的圖表需要簡(jiǎn)單的數(shù)據(jù)。固然，如果你有大量的數(shù)據(jù)或它的結(jié)構(gòu)不是很明顯，你需要先準(zhǔn)備1下。

當(dāng)我們制作大部份的圖表類(lèi)型時(shí)，我們只需要X和Y變量。但是，條形圖表它常常只需要用到Y(jié)變量，和1個(gè)索引或1個(gè)被用作X項(xiàng)目數(shù)字。以下是1個(gè)當(dāng)我們用到JavaScript數(shù)據(jù)矩陣的例子：

如果你用JSON/XML來(lái)轉(zhuǎn)化數(shù)據(jù)，然后你的數(shù)據(jù)可以像下面那樣。

大致上來(lái)講，有許多處理軟件開(kāi)發(fā)者在所有或大部份文檔中描寫(xiě)的數(shù)據(jù)和視覺(jué)化的的方法。記住，我推薦檢查1些你的圖表庫(kù)文檔的相干章節(jié)。

2.獲得1個(gè)圖表庫(kù)

你所使用的庫(kù)很明顯是1個(gè)關(guān)鍵元素。如果你將在本地使用圖表，去下載1個(gè)2進(jìn)制的包并使它們就在手邊。

但是，如果你需要為1個(gè)網(wǎng)頁(yè)app或1個(gè)網(wǎng)站的頁(yè)面制作圖表，CDN應(yīng)當(dāng)會(huì)是1個(gè)更好的選擇。它會(huì)從最近的服務(wù)器上為你的客戶(hù)端加載文件，給予你1個(gè)更快的頁(yè)面加載速度和更好的表現(xiàn)。

3.編寫(xiě)簡(jiǎn)單的HTML/JAVASCRIPT代碼

當(dāng)我們的數(shù)據(jù)和庫(kù)都準(zhǔn)備好了，我們可以開(kāi)始編寫(xiě)終究可以畫(huà)出圖表的代碼了。

a）首先，我們需要1個(gè)頁(yè)面的容器。最好的方法是用<div>元素并設(shè)置他的ID：

b）然后，讓我們加入數(shù)據(jù)：

c）再者，我們聲明我們想要的圖表類(lèi)型，通過(guò)調(diào)用相干構(gòu)造函數(shù)：

d）為了使它們對(duì)讀者更加清楚，我想給圖表1個(gè)標(biāo)題：

e）現(xiàn)在，讓我們開(kāi)始加上1個(gè)項(xiàng)目：

f）我們的圖表必須放在1個(gè)容器里面，所以我們聲明1下我們剛剛編寫(xiě)的容器：

g）所有進(jìn)展順利，所以我們可以畫(huà)出我們的圖表了

這是我們的結(jié)果：

方便起見(jiàn)，下面是你的所有代碼：

看上去非常直白，不是嗎？現(xiàn)在我們可以方便地比較各個(gè)種別的總銷(xiāo)售額。

制作多項(xiàng)目可堆疊的條形圖標(biāo)

既然我們已學(xué)到了用JavaScript制作圖表基本的方法，我們可以進(jìn)1步構(gòu)建1個(gè)略微復(fù)雜1點(diǎn)的可以展現(xiàn)更多信息的圖表。如我之前所說(shuō)，我會(huì)展現(xiàn)給你們看1個(gè)快速簡(jiǎn)單的制作多項(xiàng)目條形圖標(biāo)，并有堆疊效果的方法。

基本上來(lái)講，流程是非常類(lèi)似的。1如平常，以數(shù)據(jù)開(kāi)始。

1個(gè)表格的數(shù)據(jù)

在上面的條形圖標(biāo)中，我們有1個(gè)變量（產(chǎn)品銷(xiāo)數(shù)額數(shù)據(jù)項(xiàng)）并且有1些分類(lèi)（產(chǎn)品的種類(lèi)）。為了額外地展現(xiàn)每一個(gè)數(shù)值的組成，這是可堆疊條形圖標(biāo)的基本，我們需要更多具體的數(shù)據(jù)。

在這，我們可以用到已展現(xiàn)在頁(yè)面上的數(shù)據(jù)。比如，如果你已有1個(gè)HTML表格，你可以輕松地在它的基礎(chǔ)上構(gòu)建。如果你使用AnyChart的數(shù)據(jù)轉(zhuǎn)換模型，你所需要的就是聲明那個(gè)表格就是數(shù)據(jù)源。

1）獲得數(shù)據(jù)轉(zhuǎn)換器：

2）為表格準(zhǔn)備好數(shù)據(jù)

3）制作1個(gè)圖表并聲明數(shù)據(jù)源：

馬上就會(huì)看到1個(gè)多項(xiàng)目的條形圖標(biāo)，可使我們快速地在每一個(gè)獨(dú)立的種別里比較每一個(gè)產(chǎn)品的表現(xiàn)。

改變項(xiàng)目的種別

所有必須的細(xì)節(jié)，包括數(shù)據(jù)，都已聲明了。現(xiàn)在我們可以改變項(xiàng)目的種別并且得到1個(gè)堆疊的條形圖標(biāo)，在之前那個(gè)傳統(tǒng)的多項(xiàng)目表格的基礎(chǔ)上。這其實(shí)不難，由于你只需要加上1行代碼：