跳到正文
册页

图表

RadarChart - 雷达图

若干个具名维度上的一张侧写。

用法

什么时候用它

识别一个轮廓。雷达图围出的面积取决于辐条恰好排成什么顺序，所以它不适合用来比较量级。

来自@misoto22/folio/charts

TSX
import { RadarChart } from '@misoto22/folio/charts'

说明

若干个具名维度上的一张侧写——用来回答“这个东西强在哪、弱在哪”。

它读的是一个形状，不是一组数值：雷达图围出的面积取决于辐条恰好排成什么顺序，所以它不适合比较量级，适合识别轮廓。最多两三条序列。

结构

RadarChart anatomy
部件说明
图框必填ChartFigure 的那个 <figure>，极坐标绘图区装在一个 ChartContainer 里。
多边形必填<RadarChart.Radar>。variant="filled" 是默认值，按 --chart-fill 的 2.2 倍上色，因为雷达图的填充本身就是那个标记、而不是线条底下的一层淡底，两块叠在一起时它还得撑得住自己的形状。
辐条标签<RadarChart.PolarAngleAxis>，围着外圈的那些名字。轮廓上的一个角究竟量的是什么，只有它们说得出来。
径向刻度<RadarChart.PolarRadiusAxis>，而且要自己选择加上。不加，各道环上就一个数字都没有：读者手里有一个形状，却不知道一道环值多少。
网格<RadarChart.PolarGrid>，默认是多边形而不是圆形，这样各道环才和数据画在它们上面的那个多边形对得齐。
图例<RadarChart.Legend>。两条在灰阶梯度上相隔两级、又互相重叠的轮廓线，什么名字都没有，而这里也没有一根坐标轴能替它们命名。

实践建议

推荐

  • 把辐条的顺序定下来，并让页面上每一张雷达图都用同一个顺序。一个多边形围出的面积，是各维度恰好排在什么位置的函数，所以重排辐条会在一个数字都没变的情况下改变轮廓。
  • 先把每个维度换算到可比的刻度上——一个百分位、一个十分制的评分、一个指数。所有辐条共用同一根半径，所以一根以毫秒计的辐条挨着一根以百分比计的，画出来的尖峰毫无意义。
  • 超过两条序列就换成 variant="lines"。填充的多边形会互相重叠，而透过两层半透明去判断面积，恰恰是这种图形最不擅长的事。

避免

  • 不要从它身上读量级。雷达图是用来识别轮廓的——同一份侧写的前后对比——而“两者哪个更大”是 BarChart 回答的问题，这张图只是看上去像在回答。
  • 不要略过 <RadarChart.PolarRadiusAxis> 就当这张图做完了。图会渲染，环也会渲染，可屏幕上没有任何东西说得出最外那道环是 100 还是 1,000；数字仍然在那张 sr-only 表格里，看得见的读者却拿不到。

示例

默认

一份画像，横跨六个具名维度：雷达图提供的是一个可供辨认的轮廓，而不是可供比较的量级。有两个后果直接来自几何、而且都不是口味问题——把每个值都翻一倍，多边形围出的面积会变成四倍，所以那层填充夸大了它看起来所展示的差别；而重排那些辐条，会把同样六个数字画成另一个形状，这让轴的顺序成了一个图表自己没法标注出来的选择。dot 用 border 变体标出每个顶点，而值真正所在的正是那些顶点；它们之间的边是插值，不是数据。

Team profile
Team profile
skillCurrent
Design86
Research64
Writing72
Delivery91
Review58
Support77

样式与网格

网上多出第二条序列，以及决定这一对能不能被分开的那两个属性。填充的多边形会重叠，而透过两层半透明去判断面积，恰恰是雷达图最不擅长的一件事——lines 放弃填充、保住轮廓，而形状本来就是靠轮廓承载的。gridType 用 circle 把多边形的网换成同心圆，于是网格读起来是一把刻度，而不是作为第二个形状去跟标记打架。点击一条序列或它的图例条目，会把另一条降到五分之一的不透明度，而那正是回到「一次只看一个轮廓」的路。

Team profile
Team profile
skillCurrentTarget
Design8695
Research6480
Writing7278
Delivery9188
Review5875
Support7770

加载中

骨架。雷达图没有一根笔直的轴供一道行进的高光跑过去，所以它的动画是在形状之间变形——六根辐条每 1.5 秒重掷一次，由 Recharts 自己的过渡来承载这次变化；在 prefers-reduced-motion 下动画关闭，形状就那么停着。辐条的值来自一个确定性函数、而不是 Math.random，因为一份和客户端对不上的服务端渲染骨架，就是一次水合不匹配。isLoading 设着的时候，把那些部件继续组合在那儿：网格照样画出来，Radar 本身什么都不渲染，而数据到达时两者都会以本来面目回来。

Team profile
Loading

类型

TSX
export type RadarVariant = 'filled' | 'lines'

无障碍

  • title 必填；数据行同样会渲染成一份视觉隐藏的表格。
  • 最多两三条序列：填充多边形会互相重叠，而透过两层半透明去判断面积正是雷达图最不擅长的事。再多就用 variant="lines"。

相关组件

LineChartPieChart