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.
Je ne sais pas si ça correspond à ce que tu veux mais dans cet exemple il y a transposition des coordonnées de la souris en coordonnées du graphique
http://www.rgraph.net/docs/howto-get-the-x-y-value-from-a-scatter-chart.html
Merci Huggy pour ta réponse, mais cette méthode ne marche que sur un seul type de graphique.