Objectiu

Dibuixar un diagrama de sectors o ciclograma mitjançant Scalable Vector Graphics a partir d'una relació percentual.

Procediment

Per dibuixar cada sector del diagrama s'han d'emprar els arcs d'SVG. És a dir:

<path d="M xa,ya l xb,yb ara,rb 0 f1,f2 xc,yc z"/>

On

• (x_a,y_a) és el punt inicial que correspondrà al centre de la circumferència.
• (x_b,y_b) és el punt final de la primera recta i alhora primer punt de l'arc.
• r_a és el valor del radi de la primera el·lipse de la que s'obtindrà l'arc.
• r_b és el valor del radi de la segona el·lipse de la que s'obtindrà l'arc.
• f₁ i f₂ permeten decidir quin dels quatre arcs possibles s'agafa de la intersecció de les el·lipses a i b.
• (x_c,y_c) és el darrer punt de la secció que enllaçarà amb el punt (x_a,y_a) tancant el triangle i alhora fa de punt final de l'arc.

Els arcs SVG estan pensats per aconseguir un arc qualsevol. En el cas d'una secció d'un diagrama la formula es simplifica ja que es treballa sobre una circumferència. Per tant es pot dir que:

(x_a,y_a) és el centre de la circumferència mentre que (x_b,y_b) és el punt que toca la circumferència.

Per tant la distància de la recta A-B és el radi de la circumferència.

Com que només s'empren arcs basats en una circumferència es pot dir que (r_a) = (r_b) i alhora serà igual a la distància entre A i B.

Treballant amb punts relatius (l i a i no L i A) podem simplificar la formula del path a:

<path d="M r,r l r,0 ar,r 0 f1,f2 xc,yc z"/>

f₁ i f₂ poden prendre el valor de 0 o de 1 de manera que es poden obtenir quatre arcs diferents.

L'explicació del W3C és prou extensa i comprensible. És aclaridor el gràfic:

Gràfic original de l'especificació d'SVG del W3C.

Per treballar amb valors positius cal treballar sobre el quart quadrant de la circumferència ja que el punt (0,0) del pla és a l'extrem superior esquerra. En aquest escenari només caldrà contemplar si l'angle és inferior o igual a 180ª per decidir f₁ ja que f₂ sempre serà 1.

Per tant, si l'angle és inferior o igual a 180º la formula queda en:

<path d="M r,r l r,0 ar,r 0 0,1 xc,yc z"/>

i si l'angle és superior a 180º:

<path d="M r,r l r,0 ar,r 0 1,1 xc,yc z"/>

Ara només queda determinar el tercer punt. Per calcular-lo necessitem saber l'angle per tant amb:

angle = ( percentatge / 100 ) * 360

Sabent l'angle només caldrà aplicar trigonometria per saber la x_c i la y_c, és a dir:

xc = cos(angle) * r
yc = sin(angle) * r

Aplicant les regles anteriors s'aconsegueix fer un sector. La manera més còmode de fer tot el diagrama és fer tots els sectors així i rotar-les a la posició que els toqui.

Per rotar un sector només cal aplicar:

<g transform="rotate(angleAcumulat,r,r)">
   <path d="M r,r l r,0 ar,r 0 f1,f2 xc,yc z"/>
</g>

L'angle acumulat serà doncs la suma dels angles anteriors. Per tant pel primer sector angleAcumulat = 0 el que vol dir que no cal aplicar una rotació al primer element.

Exemple de diagrama de sectors en SVG funcionant amb aquest mètode (necessita d'un navegador que suporti SVG).

Recursos relacionats

• The elliptical arc curve commands (W3C)
• Making a Pie Chart
• Pie Chart (Wikipedia)