tech - 用Javascript制作你的第1個(gè)圖表
數(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行代碼:
我們剛剛1下子制作好了1個(gè)堆疊的條形圖表,并沒(méi)有改變多項(xiàng)目圖表的構(gòu)造。作為結(jié)果,我們不單單可以馬上比較各種別的總銷(xiāo)售額,我們還可以辨別那個(gè)產(chǎn)品是1個(gè)種別整體比其他種別更多或更少。
由于我們?cè)?開(kāi)始就設(shè)定我們的終究目標(biāo)是1個(gè)百分比堆疊的條形項(xiàng)目,讓我們改變模型來(lái)到達(dá)目的:
現(xiàn)在他是1個(gè)百分比堆疊的條形圖標(biāo),它使你可以突出部份整體的關(guān)系并且評(píng)估每一個(gè)產(chǎn)品對(duì)每一個(gè)種別的貢獻(xiàn)值。
設(shè)計(jì)個(gè)性方案
設(shè)計(jì)對(duì)數(shù)據(jù)可視化,吸引注意,提升清晰度和保持和你的網(wǎng)站項(xiàng)目的視覺(jué)整體性非常重要。這個(gè)圖表庫(kù)非常有幫助的生產(chǎn)區(qū)工作服、工鞋管理規(guī)程是,個(gè)性化非常簡(jiǎn)單
添加文字
為了更高的清晰度,你可以提供你的視覺(jué)化方案額外的文字。比如,我將給豎軸1個(gè)標(biāo)題繽紛加上1個(gè)臨時(shí)的圖表標(biāo)簽:
色彩設(shè)置
你可以加上色彩,通過(guò)1個(gè)色盤(pán) (chart.palette())并改變?cè)谄渌麞|西中的背景設(shè)置(chart.background()) 。或你可使用1個(gè)主題:
然后你需要在圖表設(shè)置中聲明:
圖表互動(dòng)
使1個(gè)JavaScript圖表有1些互動(dòng)其實(shí)不是甚么大事。
可能最基本的方法在于使在數(shù)據(jù)點(diǎn)上的懸浮狀態(tài)改變色彩或加上或改變標(biāo)記。被選擇的狀態(tài)決定了每一個(gè)節(jié)點(diǎn)在被點(diǎn)擊后看上去是怎樣樣的。
1些簡(jiǎn)單的基于懸浮和選擇的互動(dòng)是默許有的,所以現(xiàn)在我們不會(huì)在之前例子上加任何東西。請(qǐng)返回之前的例子來(lái)探索基本的互動(dòng),如果你想的話。
談?wù)搕ooltip元素是值得的,它可以漂浮當(dāng)1個(gè)節(jié)點(diǎn)是懸停狀態(tài)時(shí)。我常常試著利用好tooltip,通過(guò)使它們展現(xiàn)1些關(guān)于這個(gè)節(jié)點(diǎn)屬于哪一個(gè)項(xiàng)目,展現(xiàn)的甚么數(shù)值,諸如此類(lèi)的有用信息。你可以輕松地調(diào)劑你的tooltip來(lái)展現(xiàn)任何事。我們將介紹tooltip并且聲明將要展現(xiàn)的東西:
下面是結(jié)果:
這只是1個(gè)簡(jiǎn)單的關(guān)于個(gè)性化方案的基本,深入下去可以寫(xiě)1大篇文章?,F(xiàn)在,我建議你去讀讀文檔的交互部份以獲得更多信息。
結(jié)論
正如你說(shuō)看到的,用JavaScript構(gòu)建圖表其實(shí)不難。而且,你可以在我的CodePen合集中找到所有教程的例子并且輕松地在你的工作中應(yīng)用。只要復(fù)制下代碼,改變數(shù)據(jù),你的項(xiàng)目就能夠快速運(yùn)作了。請(qǐng)記得隨時(shí)檢查文檔或API 指引并且注意你正在使用的庫(kù)的demo,例如AnyChart的庫(kù)。通常來(lái)講,找到有和你需要的相近的例子其實(shí)不困難,找到最符合的例子,做些修改,就能夠如你所需要的那樣使用了。
文章來(lái)源:WebDesigner Depot
原作者:Ruslan Borovikov