Ciao a tutti, sto creando una diagramma a torta con javascript e svg ma ho un piccolo problema: il numero massimo di valori da visualizzare è 5: se sono tutti maggiori di 0 il diagramma esce bene ma se almeno uno è zero, il diagramma non è una circonferenza perfetta. Qualcuno puo darmi una mano? Questo è il codice della funzione che crea il diagramma:
function torta_draw(x, a1, ta1, a2, ta2, a3, ta3, a4, ta4, a5, ta5)
{
pulisci2();
var root = document.getElementById('grafo2');
var g = document.createElementNS(svgns, "g");
g.setAttributeNS(null,"id","nuovoG2");
var totali = new Array(ta1, ta2, ta3, ta4, ta5);
var nomi = new Array(a1, a2, a3, a4, a5);
var i;
new_g2=1;
if(ta1==0 & ta2==0 & ta3==0 & ta4==0 & ta5==0)
{
var tex2 = document.createElementNS(svgns, "text");
tex2.setAttributeNS(null, "x", 200);
tex2.setAttributeNS(null, "y", 200);
tex2.setAttributeNS(null, "style", "fill:red;font-size:20px;");
var contenuto2 = document.createTextNode("Nessun piatto ordinato!");
tex2.appendChild(contenuto2);
g.appendChild(tex2);
root.appendChild(g);
}
else
{
var h,l;
h=document.getElementById('torta').getAttribute("h eight")*1;
l=document.getElementById('torta').getAttribute("w idth")*1;
r=h<l ?h:l;
cx=r/2;
cy=r/2;
r=r*0.3;
tot=(ta1*1)+(ta2*1)+(ta3*1)+(ta4*1)+(ta5*1);
alfa=0;
s=2*Math.PI/tot;
for(i=0;i<=4;i++)
{
valore=totali[i]*1;
arco="M"+cx+" "+cy+" ";
px=cx+r*Math.cos(alfa);
py=cy-r*Math.sin(alfa);
arco=arco+"L "+px+" "+py+"A "+r+" "+r +" 0 0 0 ";
alfai=s*valore;
alfa+=alfai;
px=cx+r*Math.cos(alfa);
py=cy-r*Math.sin(alfa);
arco=arco+" "+ px+ " "+ py + "z";
var arc =document.createElementNS(svgns, "path");
arc.setAttribute("d",arco);
arc.setAttribute("style","fill:"+colori[i]+"");
px=cx+r*0.6*Math.cos(alfa-alfai/2);
py=cy-r*0.6*Math.sin(alfa-alfai/2);
g.appendChild(arc);
var text =document.createElementNS(svgns, "text");
text.setAttribute("class","valore");
text.setAttribute("y",py);
text.setAttribute("x",px);
perc=parseInt(valore/tot*1000)/10; // 1 cifra decimale
testo=document.createTextNode(valore+"("+perc+"%)" );
text.appendChild(testo);
g.appendChild(text);
root.appendChild(g);
}
}//fine else
}

Rispondi quotando