Salut,
Je me demandais s'il existait en JS des librairies permettant de tracer des courbes (dans un canvas ou autre) avec des fonctionnalités comme le zoom box, auto calibrage, curseur... Un peu comme certaines calculatrices graphiques...
Version imprimable
Salut,
Je me demandais s'il existait en JS des librairies permettant de tracer des courbes (dans un canvas ou autre) avec des fonctionnalités comme le zoom box, auto calibrage, curseur... Un peu comme certaines calculatrices graphiques...
oui, quelques milliers https://github.com/search?q=javascript+graph
Sinon une petit création de notre ami Andry en php https://andry.developpez.com/tutorie...-geometriques/
Bonjour,
Une solution basée sur canvas :
http://eleydet.free.fr/BTS/applicati...aceur_exp.html
Et une version basée sur SVG qui fonctionne mais doit être améliorée :
http://eleydet.free.fr/tmp/
Merci à tous les trois...
Ok je vais regarder vos liens...
Re-Salut,
Bon j'ai regardé les liens et j'en ai cherché d'autres et souvent ce sont des outils pour tracer des histogrammes (charts) et mêmes des courbes mais par contre on n'a pas forcément les fonctionnalités comme le zoom box, auto calibrage, curseur...
En plus j'aimerais pour faire des tracés en temps réels (genre comme un oscilloscope qui "trace" la tension en fonction du temps)...
Je pense que je vais essayer de l'écrire...
As-tu pensé à ajouter d'autres fonctionnalités ?Citation:
Envoyé par eleydet
Il me semble qu'un des points les plus difficiles c'est la graduation, en faire une avec des nombres qui tombent juste n'est pas évident...
Salut,
Qu'est-ce qui est le mieux entre canvas et svg ? Notamment pour un tracé en temps réel ?
Bonjour,
Beginner écrit :
A mon avis SVG est le mieux. Il permet de faire des zooms sans dégrader l'image.Citation:
Qu'est-ce qui est le mieux entre canvas et svg ?
Grafana est une solution très classique.Citation:
En plus j'aimerais pour faire des tracés en temps réels
Je n'ai pas besoin de fonctionnalités supplémentaires. Mon but est double :Citation:
As-tu pensé à ajouter d'autres fonctionnalités ?
- Inclure simplement des graphiques au sein de pages HTML (je l'utilise déjà pour cela, mais je compte améliorer la bibliothèque).
- Mettre à jour mes traceurs de courbes en abandonnant canvas pour passer à SVG (pas encore fait).
Ok merci.
J'ai commencé à regarder ton code...Citation:
Envoyé par eleydet
Je vois que c'est à nous de fixer les deltas (x et y)... C'est un des points difficiles car lorsqu'on fait des zoom box il faut pouvoir calculer automatiquement ces deltas et bien sûr si on veut des graduations qui tombe juste (des chiffres ronds) cela se complique encore plus...
Je veux dire par "des graduations qui tombe juste" des graduations dont le pas est l'un des chiffres suivants : 0.25, 0.50, 1 multiplié par 10^n où n peut être positif ou négatif...
En plus le pas doit tenir compte d'un autre problème : les graduations ne doivent pas se chevaucher ce qui fait qu'on doit parfois limiter le nombres de chiffres, pour cela certains ajoutent une puissance de 10 sur les axes...
Il y a du boulot...
Bonsoir,
C'est vrai que je pourrais mettre en place un système de graduation automatique. Je n'y avais pas pensé.
Sinon, le code http://eleydet.free.fr/tmp/JSgrapheur.js me semble plus intéressant.
C'est un point difficile, peut-être le plus difficile (graduations qui "tombent justes" et qui ne se chevauchent pas)...Citation:
Envoyé par eleydet
Est-ce que tu as une démo avec ce code ?Citation:
Envoyé par eleydet
Y a-t-il beaucoup de différence avec le code de la démo dont tu as donné le lien ?
Salut,
Il se pourrait bien que SVG soit plus lent (gestion du DOM) que Canvas...
Pour le tracé en temps réel il faut pouvoir tracer les points au fur et à mesure, je me demande si avec le SVG on trace à chaque fois(à chaque nouveau point) toute la courbe ou bien si on peut la tracer point par point...
Bonsoir,
J'ai commencé à travailler sur cette idée de graduations automatiques. Je n'ai fait que l'axe horizontal.
http://eleydet.free.fr/tmp2/
L'idée est de définir un nombre de graduations selon :
- la largeur en pixels du graphique,
- la hauteur des caractères indiquant les valeurs des graduations.
Exemple :
Puis de calculer la valeur d'une graduation :Code:nb_graduation = Math.round( largeur_pixels_graphique / 50 );
Code:graduation = ( (valeur_maxi - valeur_mini) / nb_graduation ).toPrecision(1);
Je ne sais pas.Citation:
Il se pourrait bien que SVG soit plus lent (gestion du DOM) que Canvas...
Au premier abord, je déplacerais les points sur la courbe plutôt que de dessiner une courbe par dessus l'autre.Citation:
Pour le tracé en temps réel il faut pouvoir tracer les points au fur et à mesure,
Bonjour,
pas lu tout le fil mais je rebondie sur
c'est indéniable.Citation:
Envoyé par Beginner.
Au passage, la bibliothèque Chart.js(*) gère ses graphiques sur base de <canvas>, si cela vous dit d'y jeter un oeil.
(*) il doit y en avoir d'autre mais j'ai celui-ci en réserve ;)
Ah je vois que tu affiches les graduations des abscisses verticalement... C'est en effet une astuce permettant d'en afficher le plus possible tout en évitant les chevauchements.Citation:
Envoyé par eleydet
PS : Tu voulais écrire "valeur_maxi - valeur_mini" je suppose...
@NoSmoking Ah je viens de lier ton message, merci pour la réponse...
Bonsoir,
C'est corrigé, merci!Citation:
PS : Tu voulais écrire "valeur_maxi - valeur_mini" je suppose...
Ok donc SVG est à priori moins rapide...
Mais un avantage peut-être c'est que l'on a accès à chaque élément (DOM) du coup on peut ajouter des gestionnaires d'événements, par exemple on pourra traiter le clique sur la courbe...
On peut aussi ajouter un style CSS...
Il me semble qu'il n'y a rien pour faire de telles choses avec canvas, non ? Il nous faut faire tout nous même ? Par exemple pour savoir si on clique sur la courbe il faudra récupérer les coordonnées de la souris et vérifier par calcule si elles correspondent à la courbe...
Si on veut faire un glisser/déposer d'une figure cela doit être plus difficile avec canvas ? J'ai vu que cela était possible ici : http://fabricjs.com/events cela doit exiger beaucoup de calculs...
Bonjour,
Nouvelle version avec les couleurs inspirées de Grafana et... les graduations automatiques!
http://eleydet.free.fr/tmp/
Salut,
Jolie apparence en effet...
Je regarde et teste le code...
Salut,
Bon j'ai fait quelques testes pour voir ce que cela donne si on effectuait des "zoom box"...
Voici un exemple :
Pièce jointe 548159
On peut voir qu'il y a quelques soucis sur les graduations, certaines se répètent à l'identique... Cela semble assez difficile d'avoir des graduations qui tombent justes et qui varient selon un pas constant : 0.25, 0.50, 1 multiplié par 10^n où n peut être positif ou négatif...
Et plus les intervalles (pas entre deux graduations) sont grands ou petits plus c'est compliqué car là il faudra par exemple utiliser des puissances de 10 pour éviter que les nombres prennent trop de place à l'affichage et qu'il soit plus facile à lire...
Salut,
J'ai aussi testé ce code : https://blog.niap3d.com/fr/4,10,news...avascript.html
Il est intéressant (on peut choisir canvas ou SVG), le code me semble plutôt clair...
Mais on a le même problème que celui que j'évoque dans mon précédent message...
Exemple :
Pièce jointe 548278
Cela confirme que cela n'est pas une fonctionnalité simple, elle nécessite un code plus évolué...
Bonjour,
J'ai changé la précision de 3 par une précision de 9.Citation:
On peut voir qu'il y a quelques soucis sur les graduations, certaines se répètent à l'identique
C'est fait pour les nombres supérieurs à 1000 ou inférieurs à 0,001. En fait, il s'agit de la fonction af(), située à la ligne 64 du fichier "JSgrapheur.js".Citation:
il faudra par exemple utiliser des puissances de 10
Bon j'ai testé et effectivement cela fonctionne mieux...
Bonjour,
Danse avec une courbe :
http://eleydet.free.fr/tmp2/
Certes le code doit être amélioré. C'est un premier essai...
Merci.
Intéressant mais chez moi ça consomme pas mal de cpu...
Bonjour,
Beginner écrivait :C'est normal, le code devait être amélioré. Avec cette nouvelle version, la consommation de CPU est nettement diminuée. Elle se trouve toujours la même adresse :Citation:
chez moi ça consomme pas mal de cpu.
http://eleydet.free.fr/tmp2/
Chez moi il n'y a rien dans la page...
Bonsoir,
Quel navigateur utilises-tu?
Pour ma part, c'est FireFox...
Salut,
Ah j'ai testé avec Chrome et ça marche bien !
Sur FF j'ai rien pour l'instant, le problème vient peut-être de chez moi...
Salut
Pour information, moi le code fonctionne sous FF, Edge, Chrome et Opera, mais pas sous Explorer.
@eleydet
au moment où j’écris (31 mars, 11h) le code sur ton site utilise un setTimeout. Je te conseille d’utiliser requestAnimationFrame qui est plus adapté pour les animations, comme son nom l’indique ;)
sauf qu'avec requestAnimationFrame on est limiter a utiliser 60 animation par seconde un point c'est tous on peut pas définir une durée précise.
60 ou 120, ou autre, ça dépend de la technologie d’affichage du client en fait (c’est indiqué dans la doc). On est censés utiliser le paramètre timestamp passé à notre fonction de rappel pour calculer la prochaine frame d’animation, et donc dans cette logique on n’a pas besoin d’une grande précision sur le délai. D’ailleurs, JavaScript ne nous donne aucune garantie sur ce délai quand on utilise setTimeout ou setInterval, ce qu’on spécifie est simplement le minimum de temps à attendre.
Le principal avantage de la fonction requestAnimationFrame est qu’elle permet au navigateur d’ajuster l’utilisation du processeur en fonction de la situation, par exemple si l’onglet est en arrière-plan ou si le processeur est peu disponible. C’est pour ça qu’elle est recommandée quand on fait des animations.
Je vois plutôt un setInterval(modif,20), erreur de frappe ?Citation:
Envoyé par Watilin
Quoiqu'il arrive requestAnimationFrame est effectivement plus adapté, au pire setTimeout, car un soucis majeur à l'utilisation de setInterval et le temps que dure l'animation par rapport au délai placé en paramètre de la méthode.
Exemple, si l'animation dure 100ms et que le délai donné à setInterval est 50ms il y a empilement de la fonction de rappel ce qui va conduire à la saturation du navigateur.
En faisant du ménage, je suis retombé sur : https://www.desmos.com/calculator
Merci.
J'étais tombé sur ce site aussi mais entre temps je l'ai perdu de vu...
Il est intéressant, il y a plusieurs fonctionnalités...
Bonjour,
Une documentation se trouve à l'adresse :
https://www.desmos.com/api/v1.4/docs/index.html
Le graphique, basé sur CANVAS, est le même que celui de GeoGebra.
https://www.geogebra.org/classic?lang=fr
Les graduations automatiques suivent la progression 1 - 2 - 5 - 10 - 20 - 50 - 100 etc...
Salut,
Ah oui le deuxième est meilleur, il y a notamment le fameux zoom-box...
Oui, exact il y a trois pas apparemment : 1 - 2 - 5 (x 10^n où n peut être positif ou négatif).Citation:
Envoyé par eleydet
J'avais fait un code en C++ où il y avait trois pas : 1 - 2,5 - 5 (x 10^n où n peut être positif ou négatif).
C'était il y a longtemps, je m'étais pris la tête à l'époque sur ce point...
Il faudrait que j’essaie de le traduire en JS et en python...
