JavaScript数据可视化编程学习（二）Flotr2，雷达图

最新推荐文章于 2024-08-25 08:10:40 发布

weixin_30915951

最新推荐文章于 2024-08-25 08:10:40 发布

阅读量189

点赞数

文章标签： javascript 面试 ViewUI

原文链接：http://www.cnblogs.com/chengxs/p/7857481.html

版权

一、雷达图

使用雷达图显示多维数据。

如果你有多维的数据要展示，那么雷达图就是一种非常有效的可视化方法。

由于雷达图不常用，比较陌生，所以向用户解释的时候有一些难度。注意使用雷达图会增加用户认知负担。

当你的数据具备以下特征的时候，雷达图就是一种比较有效的表现形式：

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