一、雷达图

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

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

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

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

（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项领先，尽管这对于面试官来说比较很好的比较。

虽然雷达图只能在一些专门的情境下应用，但当有适当数量的变量，且每个都很容易量化时，那么使用雷达图就很有效果。每个面试者在图表中通过所有变量链接起来的区域大致对应他总的贡献。红色区域和其他颜色区域对比，一下就显示出了王五对针对洽谈面试者的总能力非常全面，非常强。

JavaScript数据可视化编程学习（二）Flotr2，雷达图的更多相关文章

  1. JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图

    一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...

  2. JavaScript数据可视化编程书籍上面的例子(flotr2)

    先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. Python数据可视化编程实战pdf

    Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...

  4. python数据可视化编程实战PDF高清电子书

    点击获取提取码:3l5m 内容简介 <Python数据可视化编程实战>是一本使用Python实现数据可视化编程的实战指南,介绍了如何使用Python最流行的库,通过60余种方法创建美观的数 ...

  5. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  6. APICloud可视化编程（二）

    上一期我们为大家讲解低代码在国内市场的当前现状以及APICloud可视化开发工具的组件类型和特点.相信大家对可视化编程有了一个整体的了解,那么今天带大家更进一步的使用组件. 下载开发工具 登录APIC ...

  7. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  8. JavaScript—数据可视化（ECharts）

    Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...

  9. Python数据可视化编程实战——导入数据

    1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...

随机推荐

  1. 安装Extended WPF Toolkit

    Extended WPF Toolkit 可以说是WPF Toolkit 的一个补充,也包含了许多WPF 控件供开发者使用.本篇将介绍Extended WPF Toolkit 1.4.0 中新增的一些 ...

  2. Echarts数据可视化全解注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. NSOperation与GCD的如何选择？

    iOS开发的多线程实现方式,大概包括C的原始方式.NSThread方式.GCD.NSOperation的方式. 其中用的最多的应该是GCD和NSOperation的方式,很多第三方库都是使用了这两种方 ...

  4. kubeernetes节点资源限制

    实际应用中发现,部分节点性能不足,某些较大的服务如果跑在这些机器上.会很快消耗该机器的内存和cpu资源,如果用uptime看一下的就会发现负载特别高(合理的范围这个值应该等于cpu个数),高到一定值就 ...

  5. NopCommerce 3. Controller 分析

    1. 继承关系,3个abstract类 System.Web.Mvc.Controller Nop.Web.Framework.Controllers.BaseController Nop.Admin ...

  6. python基于万象优图识别图片中的中文

    最近一直在研究光学字符识别,即OCR.最开始在谷爹那里了解到了开源的Tesseract,可以拿来识别简单的英文和数字.但是识别中文的准确率并不高. 然后从Tesseract到Tesseract.js, ...

  7. 【NOIP2015提高组】Day1 t1神奇的幻方

    一大淼题,直接瞎搞即可,不过一定要仔细看题目给定的条件. #include<iostream> #include<cstdio> #include<cstring> ...

  8. USACO2004 Open提交作业（区间DP）

    Description 贝西在哞哞大学选修了C门课,她要把这些课的作业交给老师,然后去车站和同学们一 起回家.老师们在办公室里,办公室要等他们下课后才开,第i门课的办公室在Ti时刻后开放. 所有的办公 ...

  9. typeof、constructor和instance

    在JavaScript中,我们经常使用typeof来判断一个变量的类型,使用格式为:typeof(data)或typeof data.typeof返回的数据类型有六种:number.string.bo ...

  10. LeetCode 624. Maximum Distance in Arrays （在数组中的最大距离）$

    Given m arrays, and each array is sorted in ascending order. Now you can pick up two integers from t ...