tech - 用Javascript制作你的第1個圖表
數(shù)據(jù)在我們周圍皆是，并且它們的視覺化方案已成為我們生活的1部份。圖標，信息圖，地圖和儀表盤由于它們以1個能比較容易轉(zhuǎn)換的方式展現(xiàn)信息，在今天有大量的需求。
好事是做圖表不需要從開發(fā)者，設計者或任何其他人那獲得大量的技能或特殊的知識。在這篇文章中，我們會展現(xiàn)1些最基本的并解釋如何用javascript和html5輕松地處理交互數(shù)據(jù)視覺化。
我們將會以1個單項目條形圖表開始所以你可以快速制作多項目和堆疊條形圖表的方法。條形圖表是1個現(xiàn)在展現(xiàn)數(shù)據(jù)的流行方法，并且所用到的開發(fā)邏輯可以輕松地轉(zhuǎn)換成其他圖表類型。
終究的圖表會是1個百分比堆疊的圖形圖表：
當今有很多javascript的圖表庫；有1些是完全免費的，比如D3和Google圖表，但是其他的1些需要針對商業(yè)用處收費。我認為，它們中最綜合，強悍的是amCharts,AnyChart,Highcharts。
我們這次的教程中，我已決定用AnyChart。但是，流程對每一個庫來講都是10分類似的，特別是如果你正在做1些簡單的東西。AnyChart有大量的文檔和API指引并且支持非常多種類的圖表類型并且有大量的可以馬上使用的demo，所以這對初學者來講是1個很好的選擇。
為了方便起見，這個教程里的所有例子在這個CodePen的集合中可以取得，并且可以在這馬上用或?qū)SS/HTML/JavaScript的demo文件輸出成緊縮文件。
JS圖表制作的3個簡單步驟
為你的網(wǎng)站或app制作1個基本JavaScript的圖表的步驟包括以下3步：
準備你的數(shù)據(jù)；
連接庫；
寫1些簡單的代碼。
1.準備數(shù)據(jù)
就像1個大船需要深水每個簡單的圖表需要簡單的數(shù)據(jù)。固然，如果你有大量的數(shù)據(jù)或它的結(jié)構(gòu)不是很明顯，你需要先準備1下。
當我們制作大部份的圖表類型時，我們只需要X和Y變量。但是，條形圖表它常常只需要用到Y(jié)變量，和1個索引或1個被用作X項目數(shù)字。以下是1個當我們用到JavaScript數(shù)據(jù)矩陣的例子：
如果你用JSON/XML來轉(zhuǎn)化數(shù)據(jù)，然后你的數(shù)據(jù)可以像下面那樣。
大致上來講，有許多處理軟件開發(fā)者在所有或大部份文檔中描寫的數(shù)據(jù)和視覺化的的方法。記住，我推薦檢查1些你的圖表庫文檔的相干章節(jié)。
2.獲得1個圖表庫
你所使用的庫很明顯是1個關鍵元素。如果你將在本地使用圖表，去下載1個2進制的包并使它們就在手邊。
但是，如果你需要為1個網(wǎng)頁app或1個網(wǎng)站的頁面制作圖表，CDN應當會是1個更好的選擇。它會從最近的服務器上為你的客戶端加載文件，給予你1個更快的頁面加載速度和更好的表現(xiàn)。
3.編寫簡單的HTML/JAVASCRIPT代碼
當我們的數(shù)據(jù)和庫都準備好了，我們可以開始編寫終究可以畫出圖表的代碼了。
a）首先，我們需要1個頁面的容器。最好的方法是用<div>元素并設置他的ID：
b）然后，讓我們加入數(shù)據(jù)：
c）再者，我們聲明我們想要的圖表類型，通過調(diào)用相干構(gòu)造函數(shù)：
d）為了使它們對讀者更加清楚，我想給圖表1個標題：
e）現(xiàn)在，讓我們開始加上1個項目：
f）我們的圖表必須放在1個容器里面，所以我們聲明1下我們剛剛編寫的容器：
g）所有進展順利，所以我們可以畫出我們的圖表了
這是我們的結(jié)果：
方便起見，下面是你的所有代碼：
看上去非常直白，不是嗎？現(xiàn)在我們可以方便地比較各個種別的總銷售額。
制作多項目可堆疊的條形圖標
既然我們已學到了用JavaScript制作圖表基本的方法，我們可以進1步構(gòu)建1個略微復雜1點的可以展現(xiàn)更多信息的圖表。如我之前所說，我會展現(xiàn)給你們看1個快速簡單的制作多項目條形圖標，并有堆疊效果的方法。
基本上來講，流程是非常類似的。1如平常，以數(shù)據(jù)開始。
1個表格的數(shù)據(jù)
在上面的條形圖標中，我們有1個變量（產(chǎn)品銷數(shù)額數(shù)據(jù)項）并且有1些分類（產(chǎn)品的種類）。為了額外地展現(xiàn)每一個數(shù)值的組成，這是可堆疊條形圖標的基本，我們需要更多具體的數(shù)據(jù)。
在這，我們可以用到已展現(xiàn)在頁面上的數(shù)據(jù)。比如，如果你已有1個HTML表格，你可以輕松地在它的基礎上構(gòu)建。如果你使用AnyChart的數(shù)據(jù)轉(zhuǎn)換模型，你所需要的就是聲明那個表格就是數(shù)據(jù)源。
1）獲得數(shù)據(jù)轉(zhuǎn)換器：
2）為表格準備好數(shù)據(jù)
3）制作1個圖表并聲明數(shù)據(jù)源：
馬上就會看到1個多項目的條形圖標，可使我們快速地在每一個獨立的種別里比較每一個產(chǎn)品的表現(xiàn)。
改變項目的種別
所有必須的細節(jié)，包括數(shù)據(jù)，都已聲明了。現(xiàn)在我們可以改變項目的種別并且得到1個堆疊的條形圖標，在之前那個傳統(tǒng)的多項目表格的基礎上。這其實不難，由于你只需要加上1行代碼：
我們剛剛1下子制作好了1個堆疊的條形圖表，并沒有改變多項目圖表的構(gòu)造。作為結(jié)果，我們不單單可以馬上比較各種別的總銷售額，我們還可以辨別那個產(chǎn)品是1個種別整體比其他種別更多或更少。
由于我們在1開始就設定我們的終究目標是1個百分比堆疊的條形項目，讓我們改變模型來到達目的：
現(xiàn)在他是1個百分比堆疊的條形圖標，它使你可以突出部份整體的關系并且評估每一個產(chǎn)品對每一個種別的貢獻值。
設計個性方案
設計對數(shù)據(jù)可視化，吸引注意，提升清晰度和保持和你的網(wǎng)站項目的視覺整體性非常重要。這個圖表庫非常有幫助的生產(chǎn)區(qū)工作服、工鞋管理規(guī)程是，個性化非常簡單
添加文字
為了更高的清晰度，你可以提供你的視覺化方案額外的文字。比如，我將給豎軸1個標題繽紛加上1個臨時的圖表標簽：
色彩設置
你可以加上色彩，通過1個色盤 (chart.palette())并改變在其他東西中的背景設置(chart.background()) 。或你可使用1個主題：
然后你需要在圖表設置中聲明：
圖表互動
使1個JavaScript圖表有1些互動其實不是甚么大事。
可能最基本的方法在于使在數(shù)據(jù)點上的懸浮狀態(tài)改變色彩或加上或改變標記。被選擇的狀態(tài)決定了每一個節(jié)點在被點擊后看上去是怎樣樣的。
1些簡單的基于懸浮和選擇的互動是默許有的，所以現(xiàn)在我們不會在之前例子上加任何東西。請返回之前的例子來探索基本的互動，如果你想的話。
談論tooltip元素是值得的，它可以漂浮當1個節(jié)點是懸停狀態(tài)時。我常常試著利用好tooltip，通過使它們展現(xiàn)1些關于這個節(jié)點屬于哪一個項目，展現(xiàn)的甚么數(shù)值，諸如此類的有用信息。你可以輕松地調(diào)劑你的tooltip來展現(xiàn)任何事。我們將介紹tooltip并且聲明將要展現(xiàn)的東西：
下面是結(jié)果：
這只是1個簡單的關于個性化方案的基本，深入下去可以寫1大篇文章?，F(xiàn)在，我建議你去讀讀文檔的交互部份以獲得更多信息。
結(jié)論
正如你說看到的，用JavaScript構(gòu)建圖表其實不難。而且，你可以在我的CodePen合集中找到所有教程的例子并且輕松地在你的工作中應用。只要復制下代碼，改變數(shù)據(jù)，你的項目就能夠快速運作了。請記得隨時檢查文檔或API 指引并且注意你正在使用的庫的demo，例如AnyChart的庫。通常來講，找到有和你需要的相近的例子其實不困難，找到最符合的例子，做些修改，就能夠如你所需要的那樣使用了。
文章來源：WebDesigner Depot
原作者：Ruslan Borovikov