#1 2. Februar 2012 Kreisberechnungen für ein <path> Hi, letzte Frage,.. ich schwörs ^^°° Also ich muss zu guter letzt noch ein Kreisdiagramm befüllen.Hab mich im groben an diese Anleitung hier gehalten: Pie Are Square - Charting with SVG - Article - CodeStore Rausgekommen ist das Snippent hier halt : Spoiler Code: <script type="text/ecmascript"> var avg = Array(); avg[0] = <xsl:value-of select="$rh_avg_jan"/>; avg[1] = <xsl:value-of select="$rh_avg_feb"/>; avg[2] = <xsl:value-of select="$rh_avg_mae"/>; avg[3] = <xsl:value-of select="$rh_avg_apr"/>; avg[4] = <xsl:value-of select="$rh_avg_mai"/>; avg[5] = <xsl:value-of select="$rh_avg_jun"/>; avg[6] = <xsl:value-of select="$rh_avg_jul"/>; avg[7] = <xsl:value-of select="$rh_avg_aug"/>; avg[8] = <xsl:value-of select="$rh_avg_sep"/>; avg[9] = <xsl:value-of select="$rh_avg_okt"/>; avg[10] = <xsl:value-of select="$rh_avg_nov"/>; avg[11] = <xsl:value-of select="$rh_avg_dez"/>; // <![CDATA[ var avgAll = avg[0] +avg[1] +avg[2] +avg[3] +avg[4]+ avg[5]+ avg[6] +avg[7] +avg[8]+ avg[9]+ avg[10]+ avg[11]; var width = 100; var centerX = 500; var centerY = 400; var oX,oY,nX,nY; oX = width; oY = 0; var svgns = "http://www.w3.org/2000/svg"; for(var i=0;i<12;i++){ dobj = document.createElementNS(svgns, "path"); winkelXY = (avg[i]/avgAll) * 2 * Math.PI; nY = - Math.ceil(Math.sin(winkelXY) * width); nX = Math.ceil(Math.cos(winkelXY) * width - width); if(avg[i]/avgAll > 0.5) { dobj.setAttributeNS(null,"d","M "+centerX+","+centerY+" l "+oX+","+oY+" a"+width+","+width+" 0 1,0 "+nX+","+nY+" z"); } else { dobj.setAttributeNS(null,"d","M "+centerX+","+centerY+" l "+oX+","+oY+" a"+width+","+width+" 0 0,0 "+nX+","+nY+" z"); } dobj.setAttributeNS(null,"fill","red"); dobj.setAttributeNS(null,"stroke","black"); dobj.setAttributeNS(null,"stroke-width","1"); dobj.setAttributeNS(null,"stroke-linejoin","round"); document.getElementById('dia3').appendChild(dobj); oX = nX; oY = nY; } // ]]> </script> Wenn ich das richtig verstanden habe, muss ich mich bei der Angabe der Koordinaten für den dritten Punkt des Kreisausschnittes immer auf den Punkt beziehen der mit "l x,y" gekennzeichnet ist, richtig? Nun hab ich mal ein Beispiel wurde so generiert: Code: <path d="M 500,400 l 100,0 a100,100 0 1,0 -98,99 z" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round"> <path d="M 500,400 l -98,0 a100,100 0 0,0 -98,-100 z" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round"> Das zweite ist jedoch schon wieder nur fast korrekt, denn es müsste eigentlich lauten : Code: <path d="M 500,400 l 0,100 a100,100 0 0,0 100,-100 z" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round"> Weis nicht vllt liegts an der Zeit aber ich raffs einfach nicht .... ka wie ich das allgemein beschreiben kann in der schleife damits passt -.- Ihr vllt ne Idee? :-/ Gibt auch gratis Bier?! + Multi-Zitat Zitieren