《JavaScript数据可视化编程》——1.6 使用雷达图显示多维数据-阿里云开发者社区

《JavaScript数据可视化编程》——1.6 使用雷达图显示多维数据

2017-05-02 2650

简介：

+关注继续查看

本节书摘来自异步社区《JavaScript数据可视化编程》一书中的第1章第1.6节作者【美】Stephen A.Thomas 译者翟东方 , 张超 , 刘畅责编陈冀康更多章节内容可以访问云栖社区“异步社区”公众号查看。

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

如果你有多维的数据要展示那么选择雷达图是最有效的可视化方法。然而雷达图和其他图表不一样由于它们不常用比较陌生所以向用户解释的时候有一些难度。所以如果你想要使用雷达图要小心不要给用户增加认知负担。

当你的数据具备以下几个特性的时候那么雷达图是有效的表现形式

没有过多的数据点要显示。6个数据点是雷达图能容纳的最大限度了。

数据点有多个维度。如果你的数据只有2、 3个维度那么使用更传统的图表类型会更合适。雷达图更适合展现4个或更多的维度。

每个数据维度都是一个至少可以排名的量化标准换句话说就是从好到坏。雷达图不能仅仅表示某一个任意分类例如政党或国籍。

雷达图的一个典型用法是在一个球队中分析队员的竞技状态。在例子中我们使用NBA迈阿密热火队在2012年的先发阵容。只有5个数据点5个队员。有多个维度—得分、助攻、篮板和抢断等每一个维度都是一个自然数值。

表1-1显示了2011-2012赛季球员的场均数据和球队的数据总和包括替补队员的数据。

screenshot

和1.1.1小节中一样我们需要在网页中添加Flotr2类库然后放置一个包含我们将要创建图表的div元素。

1.6.1　第1步　定义数据
我们用一个JavaScript表达式来表示球队的统计。在这个例子中我们用一个数组对象来对应每一个先发队员然后另外设置一个变量来表示整个球队。

var players = [
    { player: "Chris Bosh", points: 17.2, rebounds: 7.9, assists: 1.6,
      steals: 0.8, blocks: 0.8 }, 
    { player: "Shane Battier", points: 5.4, rebounds: 2.6, assists: 1.2,
      steals: 1.0, blocks: 0.5 }, 
    { player: "LeBron James", points: 28.0, rebounds: 8.4, assists: 6.1, 
      steals: 1.9, blocks: 0.8 },
    { player: "Dwyane Wade", points: 22.3, rebounds: 5.0, assists: 4.5, 
      steals: 1.7, blocks: 1.3 },
    { player: "Mario Chalmers", points: 10.2, rebounds: 2.9, assists: 3.6, 
      steals: 1.4, blocks: 0.2 } 
]; 
var team = {
    points: 98.2,
    rebounds: 41.3,
    assists: 19.3,
    steals: 8.5,
    blocks: 5.3 
};

对于一个有效的雷达图我们需要按比例将所有的值标准化。在这个例子中我们将这些未加工的统计转换成球队的百分比。比如勒布朗·詹姆斯的得分是28.0分我们显示为29%28.0/98.2。

下面有两个函数我们使用这两个函数转换未加工的统计数据到图表的对象中。第一个函数返回单个队员的统计对象。这个函数通过在的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("LeBron James")的函数返回下面这个对象。

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

因为Flotr2不依赖于jQuery所以在前面的代码中我们也没有使用jQuery封装好的简便函数。我们也没有充分利用JavaScript标准的函数包括像.each()方法因为IE9以前的浏览器不支持这些方法。如果因为其他原因你在页面中使用了jQuery或者你不需要支持老旧版本的IE浏览器那么你的代码会简单一些。

在代码的最后我们使用一个简单数组来匹配我们图表中的标注。这个顺序必须和player_data()的返回相对应。

var labels = [
    [0, "Points"],
    [1, "Rebounds"],
    [2, "Assists"],
    [3, "Steals"],
    [4, "Blocks"] 
];

1.6.2　第2步　创建图表
单独调用Flotr2的draw()方法来创建我们的图表我们需要指明将图表放到哪个HTML元素中还需要传递图表用到的数据。数据就通过我们前面展现的get_player()函数获取。

Flotr.draw(document.getElementById("chart"),
　    [
　        player_data("Chris Bosh"), 
　        player_data("Shane Battier"),
　        player_data("LeBron James"), 
　        player_data("Dwyane Wade"), 
　        player_data("Mario Chalmers")
　    ],{ 
1        title: 
　             "2011/12 Miami Heat Starting Lineup - Contribution to Team Total", 
        radar: { show: true }, 
2       grid:  { circular: true, }, 
　        xaxis: { ticks: labels, }, 
　        yaxis: { showLabels: false, min:0, max: 33, }
　     } 
);

这段代码还包含了一些选项。在代码1处的title选项提供了一个图表的完整标题在代码2处的radar选项告诉Flotr2我们先要什么样的图表类型。使用雷达图我们需要明确指定一个圆形网格和矩形相反所以我们要在代码处设置grid选项。最后两个选项是x轴和y轴的详情。对于x轴我们使用labels变量数组来给每个统计点命名对于y轴我们完全放弃标注明确指出最大和最小值。

我们需要保证包含图表的HTML容器足够大能够显示下图表和图例因为FLotr2并不擅于计算合适的大小。对于像这样的静态图表反复试验是最简单的方法就像在图1-26中呈现给我们的图表一样。

2011/12赛季迈阿密热火先发阵容对全队的贡献。

screenshot