文章出處

一、雷達圖

使用雷達圖顯示多維數據。

如果你有多維的數據要展示，那么雷達圖就是一種非常有效的可視化方法。

由于雷達圖不常用，比較陌生，所以向用戶解釋的時候有一些難度。注意使用雷達圖會增加用戶認知負擔。

當你的數據具備以下特征的時候，雷達圖就是一種比較有效的表現形式：

（1）沒有過多的數據點要顯示。6個數據點是雷達圖能容納的最大限度了。

（2）數據點有多個維度。如果你的數據只有2、 3個維度，那么使用更傳統的圖表類型會更合適。雷達圖更適合展現4個或更多的維度。

（3）每個數據維度都是一個至少可以排名的量化標準（換句話說就是從好到壞）。

 

雷達圖的一個典型用法是在一個程序員在開發方面各項技能的狀態。在例子中我們使用他們自我評價。只有5個數據點（5個程序員）。有多個維度—html、css、js，nodeJS，angularJS，每一個維度都是一個自然數值。

人員 html css js nodeJS angularJS
張三 17.2 7.9 1.6 0.8 0.8
李四 5.4 2.6 1.2 1.0 0.5
王五 28.0 8.4 6.1 1.9 0.8
程六 22.3 5.0 4.5 1.7 1.3
谷七 10.2 2.9 3.6 1.4 0.2
合計 98.2 41.3 19.3 8.5 5.3

 

1、定義數據

用一個數組對象來對應每一個面試人人，然后設置另外一個變量來表示這一天的面試者。

var players = [
    { player: "張三",html: 17.2, css: 7.9, js: 1.6, nodeJS: 0.8, angularJS: 0.8 }, 
    { player: "李四", html: 5.4, css: 2.6, js: 1.2,nodeJS: 1.0, angularJS: 0.5 }, 
    { player: "王五", html: 28.0, css: 8.4, js: 6.1,nodeJS: 1.9,angularJS: 0.8 },
    { player: "程六",html: 22.3, css: 5.0, js: 4.5, nodeJS: 1.7, angularJS: 1.3 },
    { player: "谷七", html: 10.2, css: 2.9, js: 3.6, nodeJS: 1.4, angularJS: 0.2 } 
]; 
var team = {
    html: 98.2,
    css: 41.3,
    js: 19.3,
    nodeJS: 8.5,
    angularJS: 5.3,
};

我們使用這兩個函數轉換未加工的統計數據到圖表的對象中。

第1個函數返回單個面試者的統計對象。這個函數通過在的players數組中尋找面試者的姓名來進行簡單的搜索。

第2個函數逐個的從team對象中獲取對應姓名的各個統計，并標準化這些值。這個返回對象除了有一個等于面試者姓名的label的屬性外，還有一個相應面試者標準化統計數據的數組。

var get_player = function(name) {
   for (var i=0; i<players.length; i++) {
       if (players[i].player === name) return players[i];
   } 
} 
var player_data = function(name) { 
    var obj = {}, i = 0;
    obj.label = name; 
    obj.data = []; 
    for (var key in team) {
        obj.data.push([i, 100*get_player(name)[key]/team[key]]); 
        i++; 
    };
    return obj; 
};

我們使用了一個從0到4的計數器。接下來我們來看如何將這些數值和有意義的文字匹配起來。

這個叫player_data("王五")的函數，返回下面這個對象。

{
   label: "王五", 
   data: [
             [0,28.513238289205702], 
             [1,20.33898305084746],
             [2,31.60621761658031],
             [3,22.352941176470587],
             [4,15.09433962264151]
         ] 
}

在代碼的最后，我們使用一個簡單數組來匹配我們圖表中的標注。這個順序必須和player_data()的返回相對應。

var labels = [
    [0, "html"],
    [1, "css"],
    [2, "js"],
    [3, "nodeJS"],
    [4, "angularJS"] 
];

2、創建圖表

單獨調用Flotr2的draw()方法來創建我們的圖表，

（1）我們需要指明將圖表放到哪個HTML元素中，

（2）還需要傳遞圖表用到的數據。

（3）數據就通過我們前面展現的get_player()函數獲取。

window.onload = function(){
                Flotr.draw(
                    document.getElementById("chart"), 
                    [
                        player_data("張三"),
                        player_data("李四"),
                        player_data("王五"),
                        player_data("程六"),
                        player_data("谷七"),
                    ],{
                        title:"測試",
                        radar:{show:true},
                        grid:{circular:true},
                        xaxis:{ticks:labels},
                        yaxis:{showLabels:false,min:0,max:33,}
                    }
                )
            }

radar選項告訴Flotr2我們先要什么樣的圖表類型。使用雷達圖，我們需要明確指定一個圓形網格（和矩形相反），所以，我們要在代碼處設置grid選項。最后兩個選項是x軸和y軸的詳情。對于x軸，我們使用labels變量數組來給每個統計點命名，對于y軸，我們完全放棄標注，明確指出最大和最小值。

雷達圖全部代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="chart" style="width: 600px;height: 400px;"></div>
        <script src="js/flotr2.js"></script>
        <script>
            var players = [
                { player: "張三",html: 17.2, css: 7.9, js: 1.6, nodeJS: 0.8, angularJS: 0.8 }, 
                { player: "李四", html: 5.4, css: 2.6, js: 1.2,nodeJS: 1.0, angularJS: 0.5 }, 
                { player: "王五", html: 28.0, css: 8.4, js: 6.1,nodeJS: 1.9,angularJS: 0.8 },
                { player: "程六",html: 22.3, css: 5.0, js: 4.5, nodeJS: 1.7, angularJS: 1.3 },
                { player: "谷七", html: 10.2, css: 2.9, js: 3.6, nodeJS: 1.4, angularJS: 0.2 } 
            ]; 
            var team = {
                html: 98.2,
                css: 41.3,
                js: 19.3,
                nodeJS: 8.5,
                angularJS: 5.3,
            };
            var labels = [
                [0, "html"],
                [1, "css"],
                [2, "js"],
                [3, "nodeJS"],
                [4, "angularJS"] 
            ];
            var get_player = function(name) {
                   for (var i=0; i<players.length; i++) {
                       if (players[i].player === name) return players[i];
                   } 
            } 
            var player_data = function(name) { 
                var obj = {}, i = 0;
                obj.label = name; 
                obj.data = []; 
                for (var key in team) {
                    obj.data.push([i, 100*get_player(name)[key]/team[key]]); 
                    i++; 
                };
                return obj; 
            };
            window.onload = function(){
                Flotr.draw(
                    document.getElementById("chart"), 
                    [
                        player_data("張三"),
                        player_data("李四"),
                        player_data("王五"),
                        player_data("程六"),
                        player_data("谷七"),
                    ],{
                        title:"測試",
                        radar:{show:true},
                        grid:{circular:true,},
                        xaxis:{ticks:labels,},
                        yaxis:{showLabels:false,min:0,max:33,},
                    }
                )
            }
        </script>
    </body>
</html>

這個圖表清楚地證明了“王五”對于這一天面試者中的優勢最大，他在5個統計分類中， 4項領先，盡管這對于面試官來說比較很好的比較。

雖然雷達圖只能在一些專門的情境下應用，但當有適當數量的變量，且每個都很容易量化時，那么使用雷達圖就很有效果。每個面試者在圖表中通過所有變量鏈接起來的區域大致對應他總的貢獻。紅色區域和其他顏色區域對比，一下就顯示出了王五對針對洽談面試者的總能力非常全面，非常強。


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄