JavaScript數據可視化編程學習（二）Flotr2，雷達圖 - chengxs－IT工程師數位筆記本

文章出處

一、雷達圖

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

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

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

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

（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>