1630 sujets

Formats, encodage, internationalisation, XML

[XML - SVG] diagramme circulaire dynamique

Bonjour,

je poste ici car je dois réaliser un diagramme circulaire à partir d'un arbre XML rempli de statistiques, mais je suis complètement bloqué. En effet, j'ai comme donné la mesure des angles de chaque statistiques, mais <gras>je ne sais pas comment utiliser la fonction svg path</gras> afin de dessiner les parts du diagramme.

Voici mes codes :

l'arbre xml

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="camembert.xsl" type="text/xsl"?>
<body>
  <stats>
	<id>1</id>
    <cle>type 1</cle>
    <valeur>400</valeur>
  </stats>
  <stats>
	<id>2</id>
    <cle>type 2</cle>
    <valeur>300</valeur>
  </stats>
  <stats>
	<id>3</id>
    <cle>type 3</cle>
    <valeur>400</valeur>
  </stats>
  <stats>
	<id>4</id>
    <cle>type 4</cle>
    <valeur>500</valeur>
  </stats>
  <stats>
	<id>5</id>
    <cle>type 5</cle>
    <valeur>600</valeur>
  </stats>
  <stats>
	<id>6</id>
    <cle>type 6</cle>
    <valeur>200</valeur>
  </stats>
  <stats>
	<id>7</id>
    <cle>type 7</cle>
    <valeur>700</valeur>
  </stats>
</body>


la page de traitement

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<?xml-stylesheet href="script.js" type="text/javascript" title="style" charset="utf-8"?>
  <xsl:template match="/">
    <svg width="800" height="600">
      <xsl:variable name="somme" select="sum(//stats/valeur)" /><!--somme des valeurs de l'arbre pour calculer les pourcentages-->	
      <xsl:for-each select="body/stats"> 
	<g id="circu_{id}" onload="aff_legende('{id}')">
	  <xsl:variable name="pourcent" select="(valeur div $somme)*100" /> <!--pourcentage de chaque part sur le total-->
	  <xsl:variable name="degre" select="(360 div 100) * $pourcent" /> <!--mesure de l'angle (sur 360 °)-->
	  <path d="M200,300 v-125 a{125*$degre},{125*$degre} 0 0,0 {(-122 div $pourcent)},{(100 div $pourcent)} z" class="dynamique" id="part_{id}"/>
	</g>
      </xsl:for-each>
      <!-- <path d="M400,300 v-125 a125,125 0 0,0 -48,10 z" class="dynamique" id="part_{id}"/>-->
      <!--je coince sur la ligne du dessus qui résume tout le programme-->
    </svg>	
  </xsl:template>
</xsl:stylesheet>


Merci d'avance de votre aide
Salut,

merci de ton aide, mais de tout façon, mais données sont sorties de la base de données et j'ai réussi à le faire en utilisant un peu de C Sharp
Sujet clos
Aller à