react-vis 雷达图（RadarChart）完全指南：domains 配置、样式定制与交互实战

数据可视化图表库前端【免费下载链接】react-visData Visualization Components项目地址https://gitcode.com/gh_mirrors/re/react-vis点击查看免费下载说明本文基于当前仓库中 react-vis 的官方文档 docs/radar-chart.md 展开并结合 radar-chart 组件源码、showcase 示例 与 radar-chart 测试用例 进行深化。该库本身已声明 deprecated见 DEPRECATED.md本文仅针对其雷达图组件做技术讲解。一、雷达图是什么为什么用它雷达图Radar Chart又称蛛网图、蜘蛛图是一种适合同时展示多个变量的取值的图形每个变量占据一条从中心辐射出去的轴多个数据行被绘制成一个个多边形形状越饱满代表该行在各维度上的综合表现越好。它特别适合在同一张图上快速对比多个数据行例如三款车型的六项指标横向对比作为small multiple小倍数图使用每个小图各自承载一行数据用于批量扫描。在 react-vis 中雷达图对应RadarChart组件其入口在 packages/react-vis/src/index.jsexport RadarChart from radar-chart通过import RadarChart from react-vis/radar-chart或从主入口解构引用。二、核心思路为什么必须显式声明 domains与XYPlot下的大多数 series 不同RadarChart 无法从数据对象中自动推断每个变量的取值范围。原因很简单雷达图往往只有一到两行数据如上面文档中的三款车型对比每行只有一个观测值若让库自动推断domain会得到形如[7, 7]这种零宽度的区间根本无法插值出有意义的图形各变量的量纲与合理区间需要由使用者根据业务知识指定例如内饰评分最低 1 分、最高 7 分这是雷达图表达力的一部分。因此 react-vis 要求使用者通过domains属性显式声明每个变量的绘制顺序与行为。这正是雷达图配置多一点、表达自由度高一点的代价。一个最小可用的配置对象如下来自文档原例测试用例 radar-chart.test.js 中也使用了几乎相同的结构const RADAR_PROPS { data: [{ neatExplosions: 7, wow: 10, dog: 8, sickMoves: 9, nice: 7 }], domains: [ {name: nice, domain: [0, 100]}, {name: explosions, domain: [6.9, 7.1], getValue: d d.neatExplosions}, {name: wow, domain: [0, 11]}, {name: sickMoves, domain: [0, 20]} ], height: 300, width: 400 };在上述例子中data里虽然出现了neatExplosions、wow、dog、sickMoves、nice五个字段但domains只列了4个变量因此最终只会渲染1 个多边形、4 条轴——dog字段因为没在domains中声明而被忽略。这也印证了文档中的表述domains 的顺序即轴的绘制顺序domains 的成员即参与绘制的变量集合。三、数据与渲染原理源码级解读RadarChart的渲染流程在 packages/react-vis/src/radar-chart/index.js 中拆分为四个纯函数分别生成四种图元再统一组装进一个XYPlot函数产物说明getAxes(props)一组DecorativeAxis为每个 domain 生成一条从原点出发的轴轴方向由角度决定getLabels(props)一个LabelSeries在每条轴末端放置变量名标签getPolygons(props)一组PolygonSeries每一行 data 对应一个闭合多边形getPolygonPoints(props)一组MarkSeries仅在提供onValueMouseOver时生成用于数据点级悬停3.1 轴的生成角度均匀分布每条轴的角度由(index / domains.length) * Math.PI * 2 startingAngle计算index.js即domains数组中的变量按顺序均匀分布在圆周上第一个变量落在startingAngle默认Math.PI / 2即 12 点钟方向处。getCoordinate函数index.js用一个极小量epsilon 10e-13把三角函数计算出的0.5、-0.5、0等浮点近似值规整为精确值避免因浮点误差导致轴线微偏。每条轴固定渲染 5 个刻度numberOfTicks{5}轴的取值区间即该变量的domain。3.2 多边形的生成d3-scale 线性插值getPolygonsindex.js先为每个 domain 建立一个 d3 线性比例尺scaleLinear().domain(domain).range([0, 1])将变量的原始值映射到[0, 1]的半径比例再乘以三角函数得到该点在圆周上的(x, y)坐标const radius Math.max(scalesname, 0); return { x: radius * Math.cos(angle), y: radius * Math.sin(angle), name: row.name };注意Math.max(..., 0)这行防止半径变成负数——当数据点落在 domain 之外时不会出现反向凸起而是被钳制到圆心。3.3 颜色每个多边形默认从colorRange默认是DISCRETE_COLOR_RANGE见 theme.js中按下标取色如果数据行自身带有color/stroke/fill字段则优先使用数据行字段stroke: row.color || row.stroke || colorRange[rowIndex % colorRange.length], fill: row.color || row.fill || colorRange[rowIndex % colorRange.length],colorType属性则控制颜色标尺的类型如category详见 scales-and-data.md。四、API 参考完整参数说明以下是RadarChart的完整 propTypes见 index.js与文档 docs/radar-chart.md 的参数说明汇总4.1 必填参数参数类型说明dataarrayOf(Object)数据行数组每行对应一个多边形行内字段与 domains 中的变量名对应domainsarrayOf(Object)声明每个变量的顺序与行为见下文详解widthnumber组件宽度必填heightnumber组件高度必填4.2 domains 子对象结构domains数组的每个元素形如PropTypes.shape({ name: PropTypes.string.isRequired, getValue: PropTypes.func, domain: PropTypes.arrayOf([PropTypes.number]).isRequired, tickFormat: PropTypes.func })各字段语义name必填变量名。它在数据行中作为默认取值字段同时会作为LabelSeries的标签文本显示在对应轴末端getLabels 中标签位置取半径1.2位于轴端点之外getValue可选取值访问器d 数值从当前数据行中取回该变量的值。默认实现是用name直接索引数据行getValue ? getValue(row) : row[name]见 index.js。当数据行字段名与展示名不一致时例如字段叫neatExplosions、轴名叫explosions就必须提供getValuedomain必填[min, max]数值对表示该轴的取值范围。设置正确与否直接决定图形是否可读——由于雷达图通常只有一两行数据react-vis 要求用户精确指定每个变量的 domain否则无法良好绘制tickFormat可选格式化该轴刻度标签的函数用于美化轴在 domain 之间插值出的刻度文本。4.3 可选参数参数类型默认值说明marginObject{left: 40, right: 10, top: 10, bottom: 40}图表四周留白styleObject见下方对图内各层级的样式定制详见第五节animationboolean \| Object—动画开关或动画配置参考 animation.mdhideInnerMostValuesbooleantrue是否隐藏最内圈刻度值避免刻度互相重叠。实现见 getAxes当t sortedDomain[0]即最小值刻度且开关为真时返回空字符串classNamestring追加到根节点的额外 class会与内置的rv-radar-chart合并colorTypestringcategory颜色标尺类型参考 scales-and-data.mdtickFormatfunctionformat(.2r)d3-format全局刻度格式化函数会被单个 domain 上的tickFormat覆盖见 getAxesdomain.tickFormat ? domain.tickFormat(t) : tickFormat(t)startingAnglenumberMath.PI / 2第一条轴的起始角度弧度。设为0可让第一条轴指向水平方向见 basic-radar-chart.jsrenderAxesOverPolygonsbooleanfalse默认轴在数据多边形之下设为true后轴绘制在多边形之上适合数据量大或多边形不透明度高的场景。渲染顺序见 index.jsonValueMouseOverfunction(d, {event})—数据点多边形顶点的 mouseover 回调。d包含该点的domain变量名、name数据行名、value原始值第二个参数是{event}。此回调存在时组件才会生成透明顶点层getPolygonPointsonValueMouseOutfunction(d, {event})—数据点 mouseout 回调onSeriesMouseOverfunction(d, {event})—多边形整体 mouseover 回调onSeriesMouseOutfunction(d, {event})—多边形整体 mouseout 回调4.4 childrenRadarChart接受子元素用于叠加额外组件。最典型的是CircularGridLines圆形网格线示例见 animated-radar-chart.jsRadarChart ... CircularGridLines tickValues{[...new Array(10)].map((v, i) i / 10 - 1)} / /RadarChart五、样式定制分层的 style 对象RadarChart是一个复合组件由轴、标签、多边形等多层元素组成因此style允许按层级分别定制通用约定参见 style.md。默认 styleindex.js为RadarChart data{mydata} style{{ axes: { line: {}, ticks: {}, text: {} }, labels: { fontSize: 10 }, polygons: { strokeWidth: 0.5, strokeOpacity: 1, fillOpacity: 0.1 } }}/axes轴的三部分——轴线line、刻度ticks、刻度文字text会透传给底层的DecorativeAxislabels变量名标签的样式默认fontSize: 10源码中还包含textAnchor: middlepolygons多边形样式。注意多边形的描边色与填充色由数据行字段或colorRange决定见 3.3这里的strokeWidth/fillOpacity等通过展开运算符...style.polygons合并进每个多边形的 styleindex.js。每个数据行还可通过fill、stroke、color字段单独控制该多边形的颜色例如 radar-chart-with-tooltips.js 中通过填充white/#f8f8f8叠加多个等距多边形模拟出蛛网底纹的效果。六、实战示例6.1 基础示例三车型对比完整代码见 packages/showcase/radar-chart/basic-radar-chart.js。它对比 Mercedes / Honda / Chevrolet 三款车在 mileage里程、price价格、safety安全、performance性能、interior内饰、warranty保修六个维度上的表现RadarChart data{DATA} tickFormat{t wideFormat(t)} // 全局刻度格式 startingAngle{0} // 第一条轴指向右侧 domains{[ {name: mileage, domain: [0, 10]}, { name: price, domain: [2, 16], tickFormat: t $${basicFormat(t)}, // 单轴刻度格式加美元前缀 getValue: d d.price }, {name: safety, domain: [5, 10], getValue: d d.safety}, {name: performance, domain: [0, 10], getValue: d d.performance}, {name: interior, domain: [0, 7], getValue: d d.interior}, {name: warranty, domain: [10, 2], getValue: d d.warranty} // 注意反向区间也是允许的 ]} width{400} height{300} /值得注意的细节price的 domain 是[2, 16]且设置了单独的tickFormat说明每个轴可以有独立的刻度显示格式此时getValue显式指定了取值字段warranty的 domain 是[10, 2]从大到小说明domain 不要求升序可用于控制轴的数值方向。6.2 动画示例animation属性配合随机扰动数据 更新按钮即可实现平滑的形变动画见 packages/showcase/radar-chart/animated-radar-chart.js。该示例同时展示了自定义margin、覆盖style.polygonsfillOpacity: 0, strokeWidth: 3以及传入CircularGridLines子组件。测试 radar-chart.test.js 验证了动画点击更新后轴刻度与多边形数量保持不变。6.3 四象限示例startingAngle 的实际用途four-quadrant-radar-chart.js 用 4 个 domainC / VisualBasics / Excel / Access和startingAngle{Math.PI / 7}演示了如何通过旋转起始角度来避免标签与轴重叠并追加classNameoverflow-okay horizontally-centered调整溢出显示。6.4 交互数据点级与多边形级 Tooltip雷达图提供两套 hover 事件数据点级onValueMouseOver/onValueMouseOut为每个多边形顶点生成透明MarkSeries热区getPolygonPoints回调参数d携带{domain, name, value}。完整示例见 radar-chart-with-tooltips.jsonValueMouseOver{v this.setState({hoveredCell: v})} onValueMouseOut{() this.setState({hoveredCell: false})} ... {hoveredCell hoveredCell.dataName Mercedes ( Hint value{hoveredCell} div style{tipStyle} {hoveredCell.domain}: {hoveredCell.value} /div /Hint )}该示例还演示了colorRange{[transparent]}配合数据行fill/stroke字段完全自定义配色的用法。测试用例 radar-chart.test.js 通过模拟g.rv-radar-chart-polygonPoint的 mouseOver 断言 Tooltip 文本mileage: 3正确出现。多边形级onSeriesMouseOver/onSeriesMouseOut对整个多边形触发回调第一参数即数据行。示例见 radar-chart-series-tooltips.jshover 后显示所在数据行的name如MercedesonSeriesMouseOver{data this.setState({hoveredCell: data.event[0]})} onSeriesMouseOut{() this.setState({hoveredCell: false})} ... {hoveredCell ( Hint value{{x: 0, y: 0}} div style{tipStyle}{hoveredCell.name}/div /Hint )}七、组件实现结构速览入口导出packages/react-vis/src/index.js组件实现packages/react-vis/src/radar-chart/index.js底层复用DecorativeAxisplot/axis/decorative-axis.js、PolygonSeries、LabelSeries、MarkSeries、CircularGridLinesplot/circular-grid-lines.js测试用例packages/react-vis/tests/components/radar-chart.test.js覆盖基础渲染、动画、四象限、两套 Tooltip 交互并断言了rv-radar-chart、rv-radar-chart-polygon、rv-radar-chart-polygonPoint等 class 与轴刻度数量示例代码packages/showcase/radar-chart/ 目录下共 5 个示例基础、动画、四象限、点级 Tooltip、系列级 Tooltip赞分享数据可视化图表库前端【免费下载链接】react-visData Visualization Components项目地址https://gitcode.com/gh_mirrors/re/react-vis点击查看免费下载相关推荐react-vis Sankey 组件完全指南从数据建模到交互与样式定制react vis Sankey 组件完全指南从数据建模到交互与样式定制 本库已被标记为 deprecated详见 DEPRECATED.md https:数据可视化图表库前端Android雷达图深度定制MPAndroidChart的RadarChart属性全解析Android雷达图深度定制MPAndroidChart的RadarChart属性全解析 MPAndroidChart是一个功能强大的Android图表库支图表库数据可视化react-vis ContourSeries 等值线密度图实战指南数据格式、配置参数与交互回调详解react vis ContourSeries 等值线密度图实战指南数据格式、配置参数与交互回调详解 本库已标记为 deprecated详见 DEPRECA数据可视化图表库前端上一篇vanilla-extract的迁移风险缓解策略具体措施下一篇OpenBidKit_Yibiao开发者指南如何为开源投标工具贡献代码创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考