Progressbar.js

Bonsoir,

Est ce que certain d'entre vous connaissent le site http://kimmobrunfeldt.github.io/progressbar.js/ ?

Après plusieurs heure à comprendre comment cela fonctionne, j'arrive enfin a faire fonctionner toutes leurs barres de progression en local Bon d'accord il suffisait de télécharger le fichier progressebar.js ...^^

Bref, maintenant que les barres fonctionnent correctement, j'ai voulu les mettre sur mon super site internet...qui ne contient qu'un index... comme on dit, c'est un début ^^

Donc la barre fonctionne impeccable SAUF...oui il faut forcement un problème ^^ sauf si je veux mettre 2 barres de progression... seulement 1 sur les 2 s'affiche....

Une idée? J'ai bien essayé de modifier les noms de variables et des ID en rajoutant des numéros mais..


Bonne soirée !!
Modifié par none61 (25 Oct 2016 - 00:02)

Bonjour,

none61 a écrit :
si je veux mettre 2 barres de progression... seulement 1 sur les 2 s'affiche....

Il suffit de mettre 2 container avec des ID différents et d'initialiser chacune des barres avec le code Js en prenant soin de bien mettre les bon id : https://jsfiddle.net/k5v2d0rr/801/

Sur quoi tu bloque ?

Mdr !! j'ai pas critiqué le faite de ne pas avoir de réponse !!

J'ai constaté que vu le nombre de personne qui l'on lus, si personne n'a répondu c'est que ce que je demande n'est surement pas réalisable...

Faut pas tout mélanger....

none61 a écrit :
J'ai constaté que vu le nombre de personne qui l'on lus, si personne n'a répondu c'est que ce que je demande n'est surement pas réalisable...

Non ya pas de difficulté là c'est juste qu'il faut toujours prendre le café de début de journée entre la lecture du post et la réponse

_laurent a écrit :
Bonjour,



Il suffit de mettre 2 container avec des ID différents et d'initialiser chacune des barres avec le code Js en prenant soin de bien mettre les bon id : https://jsfiddle.net/k5v2d0rr/801/

Sur quoi tu bloque ?

Merci pro ta réponse

j'ai donc bien créé mes deux ID avec des noms différents et renommé mes barres dans la partie javascript => container et container2

mais just un seul sur les deux s'affiche...

_laurent a écrit :
Tu as regardé mon exemple ?
Si tu compare, qu'est-ce qui diffère entre ton code et mon code ?
Si tu pouvais nous montrer ton code ça serait utile.

oui je viens de regarder ton exemple, puré ça marche !!! j'ai essayé jusqu'a tard hier soir grrrr !!! ^^

A la différence de toi, j'avais créé 2 balise script et je n'avais pas renommé la variable bar.animate...

Je vais m'appuyer sur ton code pour modier le mien

J'utilise des progressera en cercle mais c'est a peu prés pareil

Sinon, penses tu qu'il serait possible qu'une progressera Line s'affiche a la vertical?

En tout cas merci pour ta réponse, ça me débloque !!!!

j'ai réussi pour les progressbar en cercle

var barall = new ProgressBar.Circle(progressbarall, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: {color: '#FFEA82', a:0},
  to: {color: '#ED6A5A', a:1},
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
barall.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
barall.text.style.fontSize = '2rem';

var barone = new ProgressBar.Circle(progressbarone, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: {color: '#FFEA82', a:0},
  to: {color: '#ED6A5A', a:1},
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
barone.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
barone.text.style.fontSize = '2rem';


barall.animate(1.0);  // Number from 0.0 to 1.0

barone.animate(1.0);  // Number from 0.0 to 1.0

Modifié par none61 (25 Oct 2016 - 11:31)

_laurent a écrit :


Bah il n'y a pas de "line-vertical" toute prête mais vu qu'il y a un mode custom tu peux tracer n'importe quel path SVG (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)... donc s'ils tracent un cœur tu devrais arriver à faire une ligne verticale sans trop de soucis...

https://jsfiddle.net/dnLLgm5o/961/

Bonne journée

Encore merci a toi !!