Je renvoie une image de graphique (avec les axes x et y) au navigateur créé mon matplotlit. Maintenant, je veux montrer les valeurs de l'axe quand il y a un événement mouseover.Affichage des valeurs d'axe pour un événement mouseover dans une image de graphique
Lorsque j'ai fait quelque chose comme ça récemment, j'ai retourné un PNG de matplotlib au navigateur. J'ai ensuite appliqué une image-carte au PNG en utilisant les valeurs de pixels qui correspondent aux points tracés. J'ai utilisé un événement onmouseover pour faire apparaître une 'info-bulle' (en fait juste un div positionné en absolu) qui contenait des méta-données sur le point.
Cette article a fourni la base de mes efforts mais je me souviens qu'il y avait certains hoquet dans sa mise en œuvre (principalement en raison de changements dans l'API de matplotlib). Si cette question persiste lundi, je mettrai à jour cette réponse avec le code spécifique de ma mise en œuvre (je n'ai pas accès à mes machines de travail pour le moment).
EDIT: Comme exemple de code promise
import matplotlib.pyplot as plt
dpi = 96
fig = plt.figure(figsize=(8,8),dpi=dpi)
imgWidth = fig.get_figwidth() * dpi ## this is the actual pixel size of the plot
imgHeight = fig.get_figheight() * dpi ## this is the actual pixel size
my_lines = []
my_lines.append(plt.plot(Xs,Ys,marker='o')[0]) # add a line object to plot
mapHTML = '<MAP name="curveMap">'
for lineObj in my_lines:
## convert the points to pixel locations, for pop-ups
lineObj._transform_path()
path, affine = lineObj._transformed_path.get_transformed_points_and_affine()
path = affine.transform_path(path)
for real,pixel in zip(lineObj.get_xydata(),path.vertices):
mapHTML+='''<AREA shape=\"circle\" coords=\"%i,%i,5\" href=\"javascript: void(0);\" onmouseout=\"outFly();\" onmouseover=\"javascript: popFly\(event,\\'%s\\',%i,%i\)\" />''' % (pixel[0],imgHeight-pixel[1],lineName,real[0],real[1])
mapHTML += '</MAP>'
fig.savefig(file(plot_file,"w"),format='png',dpi=dpi)
plt.close(fig)
plotHTML = '''<img src="/getPlot?uniq=%f" width="%i" height="%i" ismap usemap="#curveMap" onload="imageLoadCallback();" id="curPlot" />''' % (time.time(),imgWidth,imgHeight)
return "({'plotHTML':'%s','mapHTML':'%s'})" % (plotHTML,mapHTML)
Vous verrez que j'écris l'image dans un fichier .png puis retour JSON. J'utilise javascript pour mettre à jour un DIV avec le nouveau img et la carte d'image.
Voici une solution en utilisant jQuery:
$('#myChart').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// Do something with x and y;
});
Voir http://docs.jquery.com/Tutorials:Mouse_Position pour en savoir plus.