Question

我将图表图像（带有轴x和y）返回到我的matplotlit创建的浏览器中。现在我想在有鼠标悬停事件时显示轴值。

Answer 1

这是使用jQuery的解决方案：

$('#myChart').mousemove(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    // Do something with x and y;
});

请参阅http://docs.jquery.com/Tutorials:Mouse_Position了解详情。

Answer 2

当我最近做了类似的事情时，我将一个PNG从matplotlib返回到浏览器。然后，我使用与绘制的点对应的像素值将图像映射应用于PNG。我使用onmouseover事件弹出一个'工具提示'（实际上只是一个绝对定位的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 个答案: