Canvas reconnait-il les graphiques?

Par Weezy, il y a 9 ans

Les bases HTML/CSS

Bonjour,
J'ai affiché un graphique à l'aide d'un canvas et maintenant je voudrais savoir s'il y a possibilité de récupérer les coordonnées d'un point du graphique en cliquant sur celui-ci en prenant en compte les axes du graphique affiché et non pas ceux du canvas.

Voici mon code :

<script> window.onload = function () { RGraph.AJAX.getJSON('getJson.php', drawGraph); }; function drawGraph (json) { // Now draw the chart line = new RGraph.Line({ id: 'line', data: [json.a, json.b, json.c], options: { key: ['a','b', 'c'], labels: json.nom, title: 'Exemple courbe', gutterBottom: 35, gutterTop: 35, tickmarks: 'circle', cursor:{zoom:true}, numxticks: 0 } }).trace(); } //fonction permettant de récupérer les coordonnées du pointeur function getCoords(el,event) { var ox = el.scrollLeft - el.offsetLeft, oy = el.scrollTop - el.offsetTop; while(el=el.offsetParent){ ox += el.scrollLeft - el.offsetLeft; oy += el.scrollTop - el.offsetTop; } return {x:event.clientX + ox , y:event.clientY + oy}; } // Exemple d'utilisation : line.onclick = function(e) { var coords = getCoords(this,e); alert("Clic -> X:"+coords.x+" : Y:"+coords.y); }; </script> <canvas id="line" width="600" height="250">[No canvas support]</canvas><br/>

J'obtiens un graphique contenant trois courbes.
La fonction getCoords() permet d'afficher les coordonnées du pointeur en prenant en compte les axes qui définissent le canvas. Je voudrais moi prendre en compte les axes du graphique que j'ai affiché et non ceux du canvas.
Comment pourais-je procéder?

Merci.

2 réponses

Weezy, il y a 9 ans

Merci Huggy pour ta réponse, mais cette méthode ne marche que sur un seul type de graphique.