SVG og doughnut chart: Fra data til ring

SVG: Et stabilt koordinatsystem

SVG beskriver vektorgrafik med former og koordinater. viewBox="0 0 100 100" giver et indre koordinatsystem fra 0 til 100 i begge retninger, uanset hvor stor grafikken vises på siden.

En circle bruger cx og cy til centrum og r til radius. fill fylder formen, mens stroke tegner kanten. I løsningen sættes disse egenskaber via CSS.

Én værdi driver tre dele

data-value="57" læses i tre former på article, så delene kan arve værdierne:

article {
  --value: attr(data-value number);
  --value-string: attr(data-value);
  --value-percent: attr(data-value %);
}

Spor, bue og tal

Spor og bue deler centrum 50, 50. Radius er 50 - stroke-width / 2: ved en stregbredde på 4 bliver radius 48, så stregens yderside netop rammer koordinatsystemets kant.

pathLength="100" på den sorte cirkel normaliserer stiens længde til 100. Derfor kan en værdi som 57 bruges direkte:

.progress {
  stroke-dasharray: 100.1;
  stroke-dashoffset: calc(100 - var(--value));
  stroke-linecap: round;
}

Dash-arrayet laver en streg på cirka én omgang; offset på 43 efterlader cirka 57 synlige enheder. De ekstra 0.1 hjælper ved samlingen. Her bruges tal uden procenttegn: procent i dash-egenskaberne refererer ikke til cirklens omkreds.

SVG’en drejes -90deg, så buen starter øverst. SVG og ::before placeres i samme grid-område, stack, mens place-items: center centrerer tallet. container: stat / inline-size gør 30cqw til 30% af figurens containerbredde.

Markøren følger stien

offset-path beskriver markørens bane, og offset-distance placerer den langs banen:

.marker {
  r: 4;
  offset-path: circle(48px at 50px 50px);
  offset-distance: var(--value-percent);
}

Stien har samme centrum og radius som sporet. 57% er derfor samme sted langs omgangen som buens slutning. Markøren drejes sammen med resten af SVG’en. Den rager længere ud end stregen; overflow: visible i demoen lader den være synlig uden for SVG’ens kant.

Afprøv den samlede løsning: Skift værdien til 0, 25, 50, 75 og 100. Følger både tal, bue og markør med? Ved 0 kan runde stregender efterlade en lille prik; i en færdig komponent kan den sorte bue skjules ved nul.

Fra én figur til Astro-komponenter

Grafikken er den samme; Astro organiserer data og gentagelse:

1. stats indeholder objekter med label og value.
2. Siden sender listen til StatList, som bruger map() til at oprette en StatCard pr. statistik.
3. StatCard læser props og skriver værdien til data-value. CSS omsætter attributten til grafik og tekst.

I Astro-udgaven er radius 46 i både cirkel og markørsti, og tallet ligger i ::after. Der er altså mere luft til kanten end i SVG-demoen. Det vigtige er, at radius for spor og markørsti følges ad.

Prøv: Tilføj en fjerde statistik i datafanen. Den skal dukke op uden nye CSS-regler. Astro genererer HTML; tegningen kræver ikke klient-JavaScript.

Løsningerne fokuserer på teknikken. I en færdig komponent bør figcaption også indeholde værdien som almindelig tekst, fx label og procent, så data ikke kun findes i en attribut og et pseudo-element. Behold en tydelig beskrivelse af, hvad procenten måler.

Ekstra reference: Offset-path uden SVG

offset-path kan også lade et HTML-element følge en boks eller en form. Der behøver ikke være animation: det er nok at sætte en bestemt offset-distance.

Læs mere: MDN: pathLength, offset-path og en introduktion til SVG.