雷达图

雷达图

《Web 2.0界面设计模式》第4章数据呈现的设计模式，本章着重于数据呈现这一方面，结合实际的例子分别介绍了信息提示、表格、按需加载和图表等数据呈现模式，以及针对这些呈现模式的Dojo源代码实现。本节为大家介绍雷达图。

AD：

4.4.5 雷达图（1）

1．模式简介

雷达图也称为蜘蛛图、蛛网图、星状图、极区图，是一种以二维形式展示多维数据的图形。雷达图从中心点出发辐射出多条坐标轴（至少大于三条），每一份多维数据在每一维度上的数值都占用一条坐标轴，并和相邻坐标轴上的数据点连接起来，形成一个不规则多边形。如果将相邻坐标轴上的刻度点也连接起来以便于读取数值，整个图形形似蜘蛛网，或雷达仪表盘，因此得名。

2．应用场景

雷达图的一个典型应用是显示对象在各种指标上的强弱。由于其天生具有多条坐标轴，因此能轻易地处理不同维度单位不同的情况。另外，即使在每个维度单位、范围相同的情况下，雷达图也比传统的条形图具有更强的视觉冲击力，能给枯燥单调的数据增色不少，如图4-39所示。

雷达图特别适合于展示在某个属性上特别突出的对象，也可以突出在所有属性上数值都较大的对象。但一般而言，雷达图不太适合比较不同属性的值，这是因为人眼对于成角度的线段长度差异并不敏感。例如图4-40中"音效"和"支持格式"属性在数值上有差异，但不容易直观地从图形上看出来。

3．解决方案

在雷达图中，我们把拥有一组属性的对象称为环，为了更清楚地分辨叠加在一起的环上的各项数值，每一环一般都有悬停高亮的功能，如图4-41所示。

另外，当一个雷达图中包含多个环而难以分辨时，通过可交互的图例来开关雷达图中的环是被广泛应用的解决方案。如图4-42所示，通过点击图例中的Series 1图标可关闭雷达图中代表Series 1的蓝色环对象，使得留下的Series 2环对象更清楚。

4.4.5 雷达图（2）

4．应用实例

在雷达图中，每个环对象都作为一个数据列表，包含了各项属性值。下面是使用dojox.charting绘制雷达图的实例：

dojo.require("dojox.charting.Chart");

dojo.require("dojox.charting.plot2d.Spider");

dojo.require("dojox.charting.themes.PlotKit.blue");

dojo.require("dojox.charting.widget.SelectableLegend");

dojo.ready(function(){

varchart=newdojox.charting.Chart("chartNode");

chart.setTheme(dojox.charting.themes.PlotKit.blue);

chart.addPlot("default",{

type:"Spider",

divisions:7//标尺上的刻度数量

});

//除了为环对象设置对应的数据对象(data)外，还要设置颜色（fill）

chart.addSeries("China",

{data:{"GDP":2,"area":6,"population":2000,"inflation":15,"growth":

12}},

{fill:"blue"});

chart.addSeries("France",

{data:{"GDP":6,"area":15,"population":500,"inflation":5,"growth":6}},

{fill:"red"});

chart.addSeries("USA",

{data:{"GDP":3,"area":20,"population":1500,"inflation":10,"growth":3}},

{fill:"green"});

chart.addSeries("Japan",

{data:{"GDP":4,"area":2,"population":1000,"inflation":20,"growth":

2}},

{fill:"yellow"});

chart.addSeries("Korean",

{data:{"GDP":10,"area":10,"population":800,"inflation":2,"growth":

18}},

{fill:"orange"});

chart.addSeries("Canada",

{data:{"GDP":1,"area":18,"population":300,"inflation":3,"growth":15}},

{fill:"purple"});

chart.render();

//SelectableLegend是dojox.charing中的可交互图例控件

varlegend=newdojox.charting.widget.SelectableLegend({chart:chart1,horizontal:false},"legendNode");

});

图4-43是dojox.charting绘制的雷达图，可以点击图例中的勾选框开启或关闭雷达图中对应的环。

4.5 小结

本章着重于数据呈现这一方面，结合实际的例子分别介绍了信息提示、表格、按需加载和图表等数据呈现模式，以及针对这些呈现模式的Dojo源代码实现。好的数据呈现模式能将繁杂的数据以清晰高效的方式展现出来，使用户迅速准确地捕捉到自己想要的信息，极大程度地提升用户体验。数据呈现的设计直接关系到用户是否能在最短的时间内正确并且全面地理解网站的数据内容，读者可结合之前介绍的各种数据呈现模式的特点选取适合自己的模式并使用相应的实现方案。