本節書摘來自異步社群《javascript資料可視化程式設計》一書中的第1章第1.6節作者 【美】stephen a.thomas 譯者 翟東方 , 張超 , 劉暢 責編 陳冀康更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
如果你有多元的資料要展示那麼選擇雷達圖是最有效的可視化方法。然而雷達圖和其他圖表不一樣由于它們不常用比較陌生是以向使用者解釋的時候有一些難度。是以如果你想要使用雷達圖要小心不要給使用者增加認知負擔。
當你的資料具備以下幾個特性的時候那麼雷達圖是有效的表現形式
沒有過多的資料點要顯示。6個資料點是雷達圖能容納的最大限度了。
資料點有多個次元。如果你的資料隻有2、 3個次元那麼使用更傳統的圖表類型會更合适。雷達圖更适合展現4個或更多的次元。
每個資料次元都是一個至少可以排名的量化标準換句話說就是從好到壞。雷達圖不能僅僅表示某一個任意分類例如政黨或國籍。
雷達圖的一個典型用法是在一個球隊中分析隊員的競技狀态。在例子中我們使用nba邁阿密熱火隊在2012年的先發陣容。隻有5個資料點5個隊員。有多個次元—得分、助攻、籃闆和搶斷等每一個次元都是一個自然數值。
表1-1顯示了2011-2012賽季球員的場均資料和球隊的資料總和包括替補隊員的資料。
和1.1.1小節中一樣我們需要在網頁中添加flotr2類庫然後放置一個包含我們将要建立圖表的div元素。
1.6.1 第1步 定義資料
我們用一個javascript表達式來表示球隊的統計。在這個例子中我們用一個數組對象來對應每一個先發隊員然後另外設定一個變量來表示整個球隊。
對于一個有效的雷達圖我們需要按比例将所有的值标準化。在這個例子中我們将這些未加工的統計轉換成球隊的百分比。比如勒布朗·詹姆斯的得分是28.0分我們顯示為29%28.0/98.2。
下面有兩個函數我們使用這兩個函數轉換未加工的統計資料到圖表的對象中。第一個函數傳回單個隊員的統計對象。這個函數通過在的players數組中尋找隊員的姓名來進行簡單的搜尋。第2個函數逐個的從team對象中擷取對應姓名隊員的各個統計并标準化這些值。這個傳回對象除了有一個等于隊員姓名的label的屬性外還有一個相應隊員标準化統計資料的數組。
在這個統計中我們使用了一個從0到4的計數器。接下來我們來看如何将這些數值和有意義的文字比對起來。
例如這個叫player_data("lebron james")的函數傳回下面這個對象。
因為flotr2不依賴于jquery是以在前面的代碼中我們也沒有使用jquery封裝好的簡便函數。我們也沒有充分利用javascript标準的函數包括像.each()方法因為ie9以前的浏覽器不支援這些方法。如果因為其他原因你在頁面中使用了jquery或者你不需要支援老舊版本的ie浏覽器那麼你的代碼會簡單一些。
在代碼的最後我們使用一個簡單數組來比對我們圖表中的标注。這個順序必須和player_data()的傳回相對應。
1.6.2 第2步 建立圖表
單獨調用flotr2的draw()方法來建立我們的圖表我們需要指明将圖表放到哪個html元素中還需要傳遞圖表用到的資料。資料就通過我們前面展現的get_player()函數擷取。
這段代碼還包含了一些選項。在代碼1處的title選項提供了一個圖表的完整标題在代碼2處的radar選項告訴flotr2我們先要什麼樣的圖表類型。使用雷達圖我們需要明确指定一個圓形網格和矩形相反是以我們要在代碼處設定grid選項。最後兩個選項是x軸和y軸的詳情。對于x軸我們使用labels變量數組來給每個統計點命名對于y軸我們完全放棄标注明确指出最大和最小值。
我們需要保證包含圖表的html容器足夠大能夠顯示下圖表和圖例因為flotr2并不擅于計算合适的大小。對于像這樣的靜态圖表反複試驗是最簡單的方法就像在圖1-26中呈現給我們的圖表一樣。
2011/12賽季 邁阿密熱火先發陣容對全隊的貢獻。
這個圖表清楚地證明了勒布朗·詹姆斯對于球隊的價值他在5個統計分類中 4項領先盡管這對于nba的粉絲來說并不是什麼新鮮事。
雖然雷達圖隻能在一些專門的情境下應用但當有适當數量的變量且每個都很容易量化時那麼使用雷達圖就很有效果。在圖1-26中每個隊員在圖表中通過所有變量連結起來的區域大緻對應他總的貢獻。紅色區域和其他顔色區域對比一下就顯示出了詹姆斯對全隊的總貢獻非常突出。
1.6.3 第3步 flotr2 “bugs”的應急預案
請參考本書1.1.9小節中關于建立基本柱狀圖表中是如何解決flotr2類庫的一些“bug”的。