JavaScript数据可视化编程学习（二）Flotr2，雷达图
一、雷达图
使用雷达图显示多维数据。
如果你有多维的数据要展示，那么雷达图就是一种非常有效的可视化方法。
由于雷达图不常用，比较陌生，所以向用户解释的时候有一些难度。注意使用雷达图会增加用户认知负担。
当你的数据具备以下特征的时候，雷达图就是一种比较有效的表现形式：
（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，雷达图的更多相关文章
- JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
- JavaScript数据可视化编程书籍上面的例子(flotr2)
先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Python数据可视化编程实战pdf
Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...
- python数据可视化编程实战PDF高清电子书
点击获取提取码:3l5m 内容简介 <Python数据可视化编程实战>是一本使用Python实现数据可视化编程的实战指南,介绍了如何使用Python最流行的库,通过60余种方法创建美观的数 ...
- 2018年最佳JavaScript数据可视化和图表库
现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...
- APICloud可视化编程（二）
上一期我们为大家讲解低代码在国内市场的当前现状以及APICloud可视化开发工具的组件类型和特点.相信大家对可视化编程有了一个整体的了解,那么今天带大家更进一步的使用组件. 下载开发工具 登录APIC ...
- HTML5大数据可视化效果（二）可交互地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...
- JavaScript—数据可视化（ECharts）
Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...
- Python数据可视化编程实战——导入数据
1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...
随机推荐
- JavaWeb之response响应中文乱码问题
response向页面响应中文乱码问题 字节流 * 有可能乱码,与中文转换成字节数组.浏览器打开的默认字符编码有关 * 解决方式:将中文转成字节数组的时候和浏览器默认打开的时候采用的字符集一致 re ...
- linux RPM软件包管理
linux RPM软件包管理 目录 1.软件包的介绍 2.rpm包管理 3.rpm包管理前端工具 1.软件包的介绍 在我们在对软件包管理前,先对软件包有个很好的了解,这样更方便我们来对其进行管理. 软 ...
- scala PartialFunction
1.orElse和andThen的区别 源码如下,区别很明显,orElse是并列的关系,而andThen是调用者的结果作为k的输入. trait PartialFunction[-A, +B] ext ...
- iOS音频格式PCM转G711u(或G711a-law)
请尊重作者劳动成果,如需转载本博客文章请注明出处!谢谢合作! inputData是PCM的实时数据,可以通过转码,获取到最后导出的G711u数据(sendData) NSUInteger datal ...
- Windows系统下使用Jenkins 自动发布 .NET core到Linux平台下Docker
准备工作(安装过程可以百度,已安装的可以跳过) a) 安装Jenkins,安装包下载地址:http://mirrors.tuna.tsinghua.edu.cn/jenkins/windows ...
- MySQL存储过程/存储过程与自定义函数的区别
语法: 创建存储过程: CREATE [definer = {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parame ...
- 浅谈javascript继承体系
最近做web项目,接触了jquery等框架,虽然使用方便,但是还是想学习下Javascript,今天分享下最近对js原型继承的理解,不足之处欢迎指正. 一.构造器的原型属性与原型对象 刚接触js时通常 ...
- wordpress 显示数学公式 (MathJax-LaTeX)
blog 不放一堆数学公式怎么能显得高大上,所以 MathJax-LaTeX 也是必装的插件之一了. 一.安装 MathJax-LaTex 插件 直接在 wordpress 插件中,搜索并安装 Mat ...
- .NET采集数据，放入数据库总结
第一次做采集Json的还简单一些但是XML的简直了......... JSON //采集数据 public string GetBetRecordToRepository()//随便你返回什么 { t ...
- Java基础-Random类(05)
随机数(Random) 作用:用于产生一个随机数 使用步骤(和Scanner类似) 导包import java.util.Random; 创建对象Random r = new Random(); 获取 ...