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, };

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxysw.html