Meter (ringen)

Composition

"Hoe ver is elk van deze, op dezelfde schaal?" De meter beantwoordt het met concentrische ringen, van buiten naar binnen: elke ring bestrijkt value / max van een volledige cirkel, met de klok mee vanaf 12 uur, over een achtergrondspoor. Een ring aanwijzen activeert hem (nadruk + de ingebouwde centrale aflezing); defaultActive kiest de rustring, en een ring met waarde null toont alleen zijn spoor - "geen data" zonder de meter te verbergen.

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

Vrijwel alles is configureerbaar: ringdikte en tussenruimte, spoorkleuren en -dekking per ring, beginhoek, afgeronde uiteinden, arcdekking per ring (voor één-kleur-ontwerpen), en de centrale aflezing - vervang die met centerContent, of schakel hem uit met showCenterLabel: false en stuur je eigen overlay aan via onHighlightItem:

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

Ringen delen één schaal (max, standaard 100). Normaliseer eerst bij verschillende schalen - of kies een vergelijkende staafgrafiek, die absolute waarden preciezer weergeeft.

Halve meter en verlopen

sweepAngle verkleint de meter van een volledige cirkel tot een boog, met de klok mee vanaf startAngle; gradient vervangt de effen kleur van een ring door een meerkleurig lineair verloop. De klassieke halve meter is startAngle: -90, sweepAngle: 180:

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

Twee dingen die je bij een eerste lezing makkelijk verkeerd begrijpt:

• Het spoor volgt ook de boogbreedte. Het achtergrondspoor van een halve meter is een halve cirkel, geen volledige - sweepAngle verkort spoor en waardeboog samen, dus er is geen "verborgen" andere helft die erdoorheen schemert.
• Het verloop is verankerd aan de volledige boogbreedte, niet aan het getekende deel. Eenzelfde kleur staat altijd op dezelfde waarde, niet op dezelfde positie langs de daadwerkelijk getekende boog - een halfvolle meter toont dus de eerste helft van het verloop, niet het hele verloop samengeperst in de helft. Het eigen gradient van een ring wint van het verloop op grafiekniveau.

Positie binnen een bereik

Een meter kan ook antwoorden op "waar zit deze waarde tussen een minimum en een maximum?": min verschuift het begin van de boog weg van nul, valueMarker zet de waarde van elke ring vast op de boog, ticks voegt referentiestreepjes toe met een bijschrift en een waarde, endLabels benoemt de twee uiteinden van een gedeeltelijke boog, en sweepFit past een halve meter in zijn vak in plaats van een volledige cirkel te centreren:

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

De consumer bezit elke tekst: geef label en valueLabel mee op een streepje of uiteinde, al vertaald en opgemaakt; alleen een ontbrekend valueLabel valt terug op valueFormatter. Drie details om te weten:

• De schaal is [min, max]. Een ringwaarde of streepje erbuiten wordt naar het dichtstbijzijnde uiteinde geklemd (met een datawaarschuwing), zodat een leverancier die goedkoper is dan elke referentie zichtbaar blijft, vastgezet aan het begin.
• Streepjes en uiteinden beschrijven de schaal, markers beschrijven ringen. Een meter met meerdere ringen tekent de streepjes één keer, op de buitenste ring, en één marker per ring met data; een null-ring houdt de streepjes en verliest zijn marker.
• sweepFit reserveert een band van 36 px aan elke kant zolang er streepjes of uiteinden zijn, en verankert de centrale aflezing (centerContent) in het midden van het bestreken vak. Op een volledige ring van 360° geldt alleen de reservering voor streepjes.

Alle drie de renderers tonen dezelfde annotaties: in canvas- en WebGPU-modus staan ze in een overlay boven de geschilderde bogen, dus consumer-CSS op .mv-gauge-tick-label, .mv-gauge-tick-value en .mv-gauge-marker werkt overal.

Referentiewaarden bij hover

De labels op de boog zijn bewust kort. annotationTooltipFormatter geeft elke annotatie — de waardemarker, een referentiestreepje, elk van beide uiteinden — een eigen aflezing, zodat het precieze cijfer één hover ver is zonder de grafiek vol te zetten:

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

De formatter krijgt welke annotatie onder de aanwijzer ligt (kind, plus end voor een uiteinde), de positie op de schaal, de label en valueLabel zoals getekend, en de ring waar een marker bij hoort (null voor streepjes en uiteinden, die de schaal beschrijven en niet één ring). Geef null of "" terug om voor die annotatie niets te tonen.

Twee gevolgen van deze opzet:

• Een annotatie hoveren verandert niet welke ring actief is. De centrale aflezing blijft staan terwijl een referentiewaarde wordt bekeken — de twee aflezingen beantwoorden verschillende vragen.
• Het werkt in elke renderer. De getekende annotaties nemen geen pointer events aan (een marker die dat wel deed zou mouseleave afvuren op de ringcel eronder en zowel de nadruk als de centrale aflezing laten vallen), dus de hover wordt op hostniveau uit de geometrie afgeleid in plaats van uit de DOM.

Een ring zonder waarde heeft geen marker om te hoveren, maar de streepjes en uiteinden van zijn schaal blijven hoverbaar — het bereik is nog steeds echt, ook als één reeks leeg is.

Wanneer te gebruiken

• Geneste marktaandelen. Het aandeel van één product in geneste scopes (wereld, regio, markt) in één compacte figuur.
• Voortgangs- / KPI-ringen. Activity-tracker-stijl: één tint met dekkingstappen per ring, roundedCaps, en een aangepaste centrale aflezing.

Renderers

renderer: "svg" (standaard), "canvas" (dezelfde ringen op een 2D-canvas; consumer-CSS bereikt de bogen nog steeds via de kleurprobe), of "webgpu" Experimenteel (annulusbanden op de GPU; valt terug op canvas tot het apparaat gereed is).