Discussion :

[Javalad]

Bonjour,

En pleine création de mon site perso, j'ai acheté une template pas très cher sur internet, à ma surprise il y a un peu de javascript, langage que je ne maîtrise pas !
Voici le code en PJ, c'est la partie "competences" de mon site internet. J'essaye désespérément d'afficher les valeurs que je souhaite dans les différents cercles.
Lorsque je modifie les valeurs dans "this._percentage" et "this._number" dans le code javascript, les valeurs sont modifiés dans tous les cercles (j'ai essayé comme vous pouvez le voir pour "circles-3"). Je souhaiterai savoir si je peux changer individuellement la valeur de chaque cercle ?

Merci d'avance de votre réponse.

[Kennel sébastien]

Bonjour,

En fait il vous faut modifier votre fichier HTML.

Il y a une variable « var colors » vous faite la même chose, vous créez une variable « let percentages »…

Remarque : aujourd'hui « var » et à remplacer par « let » dans la majorité des cas, c'est lié à la portée…

[NoSmoking]

Bonjour,
si on parle du code issu de https://github.com/lugolabs/circles, je ne trouve pas l'approche judicieuse !
Je partirais sur une déclaration des propriétés dans des attributs data-xxx ce qui présenterais l'avantage de séparer le JS du HTML et de se passer des ID nutile.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="circle" data-value="50" data-color="#D3B6C6"></div>

et en récupérant les éléments comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var oCircles = document.querySelectorAll('.circle');
var i, nb = oCircles.length;
for( i=0; i < nb; i +=1){
  // création des circles en récupérant les valeurs
}

PS : merci de mettre le code sous format texte et non image.

[Javalad]

Bonjour,

Merci pour vos réponses,

Concernant la "var elId = " dans le code javascript, que dois-je écrire en valeur ?

Cordialement

[Loralina]

Bonjour,
Pour la méthode avec les ID :
Dans le deuxième code, il n'est pas utile de faire un "getElementById" avec pour unique objectif de récupérer l'ID puisque vous l'avez déjà (c'est le paramètre de la fonction).
Ensuite, pour le nommage, vous pouvez être plus précis ("circle_WebDesign"...) et libre (ne dépendant pas de l'ordre).
Pour la correspondance niveau js et la boucle, par exemple, avec les noms actuels :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var ar_st_colo=["#ced7df","#76b852"];
var ob_ob_propCirc={
	"circles-1":{nb_perc:10,ar_st_colo:ar_st_colo},
	"circles-2":{nb_perc:20,ar_st_colo:ar_st_colo},
	"circles-3":{nb_perc:30,ar_st_colo:ar_st_colo},
	"circles-4":{nb_perc:40,ar_st_colo:ar_st_colo}};
/*//variante (boucle à adapter)
var ar_ob_propCirc=[
	{st_id:"circles-1",nb_perc:10,ar_st_colo:ar_st_colo},
	...];*/
for(var i in ob_ob_propCirc)
	{
	var ob_propCirc=ob_ob_propCirc[i];
	Circles.create({
		id:i,
		percentage:ob_propCirc.nb_perc,
		...
		colors:ob_propCirc.ar_st_colo});
	}

Concernant la "var elId = " dans le code javascript, que dois-je écrire en valeur ?

options.id

[NoSmoking]

La première chose à dire est qu'il est déconseillé de modifier le constructeur d'un objet d'une librairie sans en connaitre les parfaites implications.

La solution de Loralina en bouclant sur un objet est également une solution.

Je développe mon approche, en partant du code HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="canvas">
    <div class="circle" data-pourcent ="31.42" data-color="#D3B6C6,#4B253A"></div>
    <div class="circle" data-pourcent ="51.1"  data-color="#FCE6A4,#EFB917"></div>
    <div class="circle" data-pourcent ="60.94" data-color="#BEE3F7,#45AEEA"></div>
    <div class="circle" data-pourcent ="70.78" data-color="#F8F9B6,#D2D558"></div>
    <div class="circle" data-pourcent ="50.2"  data-color="#F4BCBF,#D43A43" data-width="20"></div>
</div>

on pourrait appliquer le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var oElems = document.querySelectorAll('.circle');
var i;
var nb = oElems.length;
var oElem;
var color;
var oCircles = [];
 
for (i = 0; i < nb; i += 1) {
  oElem = oElems[i];
  oElem.id = 'circle-' + i; // visiblement on a besoin d'avoir une ID
  // get les couleurs
  color = oElem.dataset.color;
  // création des jauges
  oCircles.push(Circles.create({
    id: oElem.id,
    value: oElem.dataset.pourcent || 0,
    radius: oElem.dataset.radius || 60,
    width: oElem.dataset.width || 10,
    colors: color ? color.split(',') : ['#CCC', '#888']
  }));
}

Il faut bien sûr adapter les valeurs suivant le besoin.

Nota : le script a besoin d'une ID, mais celle ci peut être dynamique.

[Javalad]

Bonjour,

Merci pour vos réponses mais je ne suis pas parvenu à changer les valeurs, j'ai essayé les deux approches :
Dois-je modifier mon code javascript ou juste le code HTML ?

Cordialement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
(function() {
var Circles = window.Circles = function(options) {
    var elId = options.id;
    this._el = document.getElementById(elId);
 
    this._radius         = options.radius;
    this._percentage     = 100;
    this._text           = options.text; // #3
    this._number         = 100 || this._percentage;
    this._strokeWidth    = options.width  || 10;
    this._colors         = options.colors || ['#EEE', '#F00'];
    this._interval       = 16;
    this._textWrpClass   = 'circles-text-wrp';
    this._textClass      = 'circles-text';
    this._numberClass    = 'circles-number';
 
    this._confirmAnimation(options.duration);
 
    var endAngleRad      = Math.PI / 180 * 270;
    this._start          = -Math.PI / 180 * 90;
    this._startPrecise   = this._precise(this._start);
    this._circ           = endAngleRad - this._start;
 
    this.generate();
 
    if (this._canAnimate) this._animate();
  };
 
  Circles.prototype = {
    VERSION: '0.0.4',
 
    generate: function(radius) {
      if (radius) {
        this._radius = radius;
        this._canAnimate = false;
      }
      this._svgSize        = this._radius * 2;
      this._radiusAdjusted = this._radius - (this._strokeWidth / 2);
      this._el.innerHTML   = this._wrap(this._generateSvg() + this._generateText());
    },
 
    _confirmAnimation: function(duration) {
      if (duration === null) {
        this._canAnimate = false;
        return;
      }
 
      duration = duration || 500;
 
      var step     = duration / this._interval,
        pathFactor = this._percentage / step,
        numberFactor = this._number / step;
 
      if (this._percentage <= (1 + pathFactor)) {
        this._canAnimate = false;
      } else {
        this._canAnimate   = true;
        this._pathFactor   = pathFactor;
        this._numberFactor = numberFactor;
      }
    },
 
    _animate: function() {
      var i      = 1,
        self     = this,
        path     = this._el.getElementsByTagName('path')[1],
        numberEl = this._getNumberElement(),
 
        isInt    = this._number % 1 === 0,
 
        requestAnimFrame = window.requestAnimationFrame       ||
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame    ||
                           window.oRequestAnimationFrame      ||
                           window.msRequestAnimationFrame     ||
                           function (callback) {
                               setTimeout(callback, self._interval);
                           },
 
        animate = function() {
          var percentage   = self._pathFactor * i,
            nextPercentage = self._pathFactor * (i + 1),
            number         = self._numberFactor * i,
            canContinue    = true;
          if (isInt) {
            number = Math.round(number);
          }
          if (nextPercentage > self._percentage) {
            percentage  = self._percentage;
            number      = self._number;
            canContinue = false;
          }
          if (percentage > self._percentage) return;
          path.setAttribute('d', self._calculatePath(percentage, true));
          numberEl.innerHTML = self._calculateNumber(number);
          i++;
          if (canContinue) requestAnimFrame(animate);
        };
 
      requestAnimFrame(animate);
    },
 
    _getNumberElement: function() {
      var divs = this._el.getElementsByTagName('span');
      for (var i = 0, l = divs.length; i < l; i++) {
        if (divs[i].className === this._numberClass) return divs[i];
      }
    },
 
    _wrap: function(content) {
      return '<div class="circles-wrp" style="position:relative; display:inline-block;">' + content + '</div>';
    },
 
    _generateText: function() {
      var html =  '<div class="' + this._textWrpClass + '" style="position:absolute; top:0; left:0; text-align:center; width:100%;' +
        ' font-size:' + this._radius * .7 + 'px; height:' + this._svgSize + 'px; line-height:' + this._svgSize + 'px;">' + 
        this._calculateNumber(this._canAnimate ? 0 : this._number);
      if (this._text) {
        html += '<span class="' + this._textClass + '">' + this._text + '</span>';
      }
      html += '</div>';
      return html;
    },
 
    _calculateNumber: function(number) {
      var parts = (number + '').split('.'),
        html = '<span class="' + this._numberClass + '">' + parts[0];
      if (parts.length > 1) {
        html += '.<span style="font-size:.4em">' + parts[1].substring(0, 2) + '</span>';
      }
      return html + '</span>';
    },
 
    _generateSvg: function() {
      return '<svg width="' + this._svgSize + '" height="' + this._svgSize + '">' + 
        this._generatePath(100, false, this._colors[0]) + 
        this._generatePath(this._canAnimate ? 1 : this._percentage, true, this._colors[1]) + 
      '</svg>';
    },
 
    _generatePath: function(percentage, open, color) {
      return '<path fill="transparent" stroke="' + color + '" stroke-width="' + this._strokeWidth + '" d="' + this._calculatePath(percentage, open) + '"/>';
    },
 
    _calculatePath: function(percentage, open) {
      var end      = this._start + ((percentage / 100) * this._circ),
        endPrecise = this._precise(end);
      return this._arc(endPrecise, open);
    },
 
    _arc: function(end, open) {
      var endAdjusted = end - 0.001,
        longArc       = end - this._startPrecise < Math.PI ? 0 : 1;
 
      return [
        'M',
        this._radius + this._radiusAdjusted * Math.cos(this._startPrecise),
        this._radius + this._radiusAdjusted * Math.sin(this._startPrecise),
        'A', // arcTo
        this._radiusAdjusted, // x radius
        this._radiusAdjusted, // y radius
        0, // slanting
        longArc, // long or short arc
        1, // clockwise
        this._radius + this._radiusAdjusted * Math.cos(endAdjusted),
        this._radius + this._radiusAdjusted * Math.sin(endAdjusted),
        open ? '' : 'Z' // close
      ].join(' ');
    },
 
    _precise: function(value) {
      return Math.round(value * 1000) / 1000;
    }
  };
 
  Circles.create = function(options) {
    return new Circles(options);
  };
})();

[NoSmoking]

Pourquoi t'obstiner à modifier le plugin !?!

[Javalad]

Je n'ai modifié que le code HTLM et cela ne fonctionne pas:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
</div>
			<div id="canvas">
    <div class="circle" data-pourcent ="31.42" data-color="#D3B6C6,#4B253A"></div>
    <div class="circle" data-pourcent ="51.1"  data-color="#FCE6A4,#EFB917"></div>
    <div class="circle" data-pourcent ="60.94" data-color="#BEE3F7,#45AEEA"></div>
    <div class="circle" data-pourcent ="70.78" data-color="#F8F9B6,#D2D558"></div>
    <div class="circle" data-pourcent ="50.2"  data-color="#F4BCBF,#D43A43" data-width="20"></div>
</div>
				 <script type="text/javascript" src="js/circles.js"></script>
					         <script>
                                                                var colors = [
                                                                                ['#ced7df', '#76b852'], ['#ced7df', '#76b852'], ['#ced7df', '#76b852'], ['#ced7df', '#76b852']
                                                                        ];
                                                                for (var i = 1; i <= 5; i++) {
                                                                        vvar oElems = document.querySelectorAll('.circle');
var i;
var nb = oElems.length;
var oElem;
var color;
var oCircles = [];
 
for (i = 0; i < nb; i += 1) {
  oElem = oElems[i];
  oElem.id = 'circle-' + i;
  color = oElem.dataset.color;
  oCircles.push(Circles.create({
    id: oElem.id,
    value: oElem.dataset.pourcent || 0,
    radius: oElem.dataset.radius || 60,
    width: oElem.dataset.width || 10,
    colors: color ? color.split(',') : ['#CCC', '#888']
  }));
}
                                                
                                </script>
			</div>
		</div>	
	</div>

[NoSmoking]

Je n'ai modifié que le code HTLM et cela ne fonctionne pas

pas que mais bon, analysons ton code.

• ligne 11 la déclaration de var colors ne te sert à rien, à supprimer
• ligne 14 la boucle for te sert à quoi, d'autant qu'il te manque un } en fin ?

en conclusion, il faut faire preuve d'un peu plus de rigueur.

Nota : un petit F12 devrait faire apparaître la console de ton navigateur et les informations qu'elle donne sont toujours précieuses !