雷达图
上一篇
带气泡的地图
下一篇
面积图
Loading...
雷达又叫戴布拉图、蜘蛛网图。传统的雷达图被认为是一种表现多维（4 维以上）数据的图表。它将多个维度的数据量映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就称为了雷达图。它可以将多维数据进行展示，但是点的相对位置和坐标轴之间的夹角是没有任何信息量的。在坐标轴设置恰当的情况下雷达图所围面积能表现出一些信息量。
每一个维度的数据都分别对应一个坐标轴，这些坐标轴具有相同的圆心，以相同的间距沿着径向排列，并且各个坐标轴的刻度相同。连接各个坐标轴的网格线通常只作为辅助元素。将各个坐标轴上的数据点用线连接起来就形成了一个多边形。坐标轴、点、线、多边形共同组成了雷达图。
着重要强调的是，虽然雷达图每个轴线都表示不同维度，但使用上为了容易理解和统一比较。使用雷达图经常会人为的将将多个坐标轴都统一成一个度量，比如：统一成分数、百分比等。这样这个图就退化成一个二维图了，事实上这种雷达图在日常生活更常见、更长用。 另外，雷达图还可以展示出数据集中各个变量的权重高低情况，非常适用于展示性能数据。
雷达图的主要缺点是：
(1) 如果雷达图上多边形过多会使可读性下降，使整体图形过于混乱。特别是有颜色填充的多边形的情况，上层会遮挡覆盖下层多边形。
(2) 如果变量过多，也会造成可读性下降，因为一个变量对应一个坐标轴，这样会使坐标轴过于密集，使图表给人感觉很复杂。所以最佳实践就是尽可能控制变量的数量使雷达图保持简单清晰。
注意：
(1) 为了使概念尽可能简单，且贴近现今的使用习惯，下面我们暂时只介绍退化为二维的雷达图。
(2) 雷达图更注重于同类图表之间的对比（即雷达图与雷达图之间的对比）
英文名：Radar Chart, Spider Chart, Web Chart, Polar Chart, Star Plots
| 图表类型 | 单组雷达图 |
|---|---|
| 适合的数据 | 一个分类字段，一个连续字段 |
| 功能 | 对比分类数据的数值大小 |
| 数据与图形的映射 | 分类字段映射到极坐标下角度标定的位置 连续字段映射到半径长度。 |
| 适合的数据条数 | 不超过 30 条 |
| 图表类型 | 多组雷达图 |
|---|---|
| 适合的数据 | 一个连续字段，两个个分类字段 |
| 功能 | 对比不同分类数据的数值大小 |
| 数据与图形的映射 | 一个分类字段映射到极坐标下角度标定的位置 另一个分类字段映射到颜色 连续字段映射到半径长度。 |
| 适合的数据条数 | 不超过 30 条 |
例子 1: 适合应用到多维数据对比的场景
下图是一个个人综合能力评估雷达图。
| ability | score（评分，满分 10 分） |
|---|---|
| 语言表达 | 8.8 |
| 逻辑思维 | 9.0 |
| 亲和力 | 7.2 |
| 运动 | 4.5 |
| 学习 | 8.3 |
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',theme: 'classic',});chart.options({type: 'area',coordinate: {type: 'polar',},autoFit: true,data: [{ ability: '语言表达', score: 8.8 },{ ability: '逻辑思维', score: 9.0 },{ ability: '亲和力', score: 7.2 },{ ability: '运动', score: 4.5 },{ ability: '学习', score: 8.3 },],encode: { x: 'ability', y: 'score' },scale: {x: { padding: 0.5, align: 0 },y: {domainMin: 0,domainMax: 10,tickCount: 5,label: false,},},style: {fillOpacity: 0.5,lineWidth: 2,},axis: {x: { grid: true },y: { tick: false, grid: true, title: false, zIndex: 1 },},interaction: {tooltip: { crosshairsLineDash: [4, 4] },},});chart.render();
说明 ：
ability 字段，映射到极坐标下角度标定的位置，用于区分不同的能力类型score 字段，映射到半径长度，表示评分高低例子 2: 适合应用到多个维度组成的能力衡量的场景
如下面展示了华为 Mate 和 中兴 Grand Memo 两款手机的综合表现雷达图，分别从易用性、功能、拍照、跑分、续航这五个维度进行考核，可以看出两款手机在这个维度方面的性能都比较平衡，同时也可逐项对比。虚构数据
| performance（综合表现） | type（手机类型） | score（评分，满分 100 分） |
|---|---|---|
| 易用性 | 华为 Mate | 80 |
| 功能 | 华为 Mate | 90 |
| 拍照 | 华为 Mate | 80 |
| 跑分 | 华为 Mate | 70 |
| 续航 | 华为 Mate | 90 |
| 易用性 | 中兴 Grand Memo | 70 |
| 功能 | 中兴 Grand Memo | 82 |
| 拍照 | 中兴 Grand Memo | 81 |
| 跑分 | 中兴 Grand Memo | 82 |
| 续航 | 中兴 Grand Memo | 78 |
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',theme: 'classic',});chart.options({type: 'line',coordinate: {type: 'polar',},autoFit: true,data: [{ performance: '易用性', type: '华为 Mate', score: 80 },{ performance: '功能', type: '华为 Mate', score: 90 },{ performance: '拍照', type: '华为 Mate', score: 80 },{ performance: '跑分', type: '华为 Mate', score: 70 },{ performance: '续航', type: '华为 Mate', score: 90 },{ performance: '易用性', type: '中兴 Grand Memo', score: 70 },{ performance: '功能', type: '中兴 Grand Memo', score: 82 },{ performance: '拍照', type: '中兴 Grand Memo', score: 81 },{ performance: '跑分', type: '中兴 Grand Memo', score: 82 },{ performance: '续航', type: '中兴 Grand Memo', score: 78 },],encode: { x: 'performance', y: 'score', color: 'type' },scale: {x: { padding: 0.5, align: 0 },y: {domainMin: 0,domainMax: 100,tickCount: 5,label: false,},},style: {fillOpacity: 0.5,lineWidth: 2,},axis: {x: { grid: true, tick: false, gridLineDash: [0, 0] },y: {tick: false,grid: true,title: false,zIndex: 1,gridLineDash: [0, 0],gridAreaFill: (dataum, index, data) => {return index % 2 === 1 ? 'rgba(0, 0, 0, 0.04)' : '';},},},interaction: {tooltip: { crosshairsLineDash: [4, 4] },},});chart.render();
说明 ：
performance 字段，映射到极坐标下角度标定的位置，用于区分综合表现类型type 字段，手机类型，用于颜色区分score 字段，映射到半径长度，表示评分高低