Clyune Component GalleryRadar Chart · How it works & code
Multi-series, multi-dimensional comparison with real-time polygon area calculation
Runtime logic
Visiting `/dataviz/radar`, DemoHost lazy-loads `demos/kits/kit-dataviz.js` (registry `mod: 'kit-dataviz'`) and calls `mount(host, { variant: 'radar' })`. mount resolves the variant to family `radar`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; rng — Seeded deterministic PRNG (same seed, same result); hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.beginPath() — Starts a new path; ctx.lineTo() — Adds a straight line to a point; ctx.moveTo() — Moves the pen without drawing; ctx.stroke() — Strokes the current path; ctx.bezierCurveTo() — Adds a cubic Bézier curve segment; ctx.closePath() — Closes the current sub-path; ctx.fill() — Fills the current path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.fillRect() — Fills a rectangle; ctx.arcTo() — Adds an arc using tangent lines; ctx.fillText() — Draws filled text; ctx.measureText() — Measures text width
Source code
frontend/src/demos/kits/kit-dataviz.js: FAM.radar (L118-L155)
Code walkthrough
L119-119: Control definitions (colour/speed/size/count/extras): Series Primary Color, Radar Radius, Dimension Count, Series Count, Fill Opacity, Tick Ring Count. L120-120: Preset buttons: name → parameter overrides (6). L121-129: Info-panel content: live rows(v), formula, notes, params, steps. L130-154: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `beginPath`, `lineTo`, `moveTo`, `stroke`, `bezierCurveTo`, `closePath` …; math via `Math.round`, `Math.min`, `Math.sin`, `Math.cos`, `Math.atan2`; returns readouts `n`, `ns`, `dim`, `vals`, `va`, `area`, `avg` … to the info panel.
Principles
第 k A dimension angle θₖ = 2π·k / n Point Coordinate (x, y) = Center + r · vₖ · (sin θₖ, −cos θₖ) Polygon Area A = 1⁄2 · Σ r² · vₖ · vₖ₊₁ · sin(2π / n) Radar Chart （Spider web map n 个维度平均分布在一圈上，每个维度一根轴，数值越大点离中心越远，再把这些点连成多边形。 A polygon is one"Series"（比如一名选手），几个系列叠在一起就能看出谁在哪方面强、谁更全面。多边形 Area I'm used to it"Combined Power"The visual feeling. In which direction the pointer is directed, the axis that is closest to it is highlighted, and the fractions of each series in this dimension are shown on the right.