我返回一个图表图像(带有轴x和y)到浏览器中创建了我的matplotlit。 现在我想显示鼠标悬停事件时的轴值。在图表图像中显示鼠标悬停事件的轴值
1
A
回答
2
当我最近做了这样的事情时,我从matplotlib返回了一个PNG到浏览器。然后,我使用与绘制的点对应的像素值将图像映射应用于PNG。我使用了一个onmouseover事件来弹出一个包含关于该点的元数据的'tooltip'(实际上只是一个绝对定位的div)。
这个article为我的努力提供了基础,但我记得他的实现中存在一定的问题(主要是由于matplotlib api的变化)。如果这个问题在周一还在徘徊,我会用我的实现中的特定代码更新这个答案(我目前没有访问我的工作机器)。
编辑:正如所承诺的示例代码
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)
你会看到我写的图像为PNG文件,然后返回JSON。我使用JavaScript来更新新的img和图像映射的DIV。
2
下面是使用jQuery的解决方案:
$('#myChart').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// Do something with x and y;
});
相关问题
- 1. 如何在鼠标悬停在图像中时显示图像?
- 2. 鼠标悬停 - 使图像显示
- 3. 将鼠标悬停在另一图像上时显示图像
- 4. 鼠标悬停在图像上时可点击图标显示
- 5. 将鼠标悬停在列表图像
- 6. 图像悬停 - 鼠标显示为文本图标?
- 7. 在windows窗体中的鼠标悬停上显示图像?
- 8. 悬停图像? (鼠标)
- 9. 显示在鼠标悬停
- 10. 在其他图像的鼠标悬停上显示特定位置的图像
- 11. 如何在鼠标悬停上显示多个图像php
- 12. 将鼠标悬停在文本上时显示图像
- 13. 在鼠标悬停上显示隐藏图像
- 14. 将鼠标悬停在图像上时显示文字
- 15. 当鼠标悬停在图像上时显示按钮(rails image_tag)
- 16. 在鼠标悬停时显示大图像与自动位置
- 17. Core-Plot Mac:在图中的鼠标悬停点显示标签
- 18. Javascript。将鼠标悬停在右侧显示图像的图像上。
- 19. 更改鼠标悬停和鼠标悬停在CSS中的图像
- 20. FusionCharts XT - 仅在鼠标悬停时显示数值(MSLine2D图形)
- 21. jQuery的:试图显示框鼠标悬停在图片
- 22. 试图创建jQuery的鼠标悬停和鼠标事件
- 23. 如何在AmCharts中的鼠标悬停图例上显示图形值?
- 24. 没有在鼠标悬停/鼠标悬停定义jQuery事件
- 25. 在PHP中缩略图鼠标悬停动态显示全尺寸图像
- 26. 与悬停事件或鼠标悬停
- 27. 在WPF中的鼠标悬停事件?
- 28. 鼠标悬停的图像发光?
- 29. 鼠标悬停上的其他图像
- 30. 图像上的鼠标悬停操作