我将图表图像(带有 x 轴和 y 轴)返回到创建我的 matplotlit 的浏览器。现在我想在有鼠标悬停事件时显示轴值。
问问题
612 次
2 回答
2
这是使用 jQuery 的解决方案:
$('#myChart').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// Do something with x and y;
});
于 2010-01-16T01:22:47.180 回答
2
当我最近做这样的事情时,我从 matplotlib 返回了一个 PNG 到浏览器。然后,我使用与绘制的点相对应的像素值将图像映射应用于 PNG。我使用了一个 onmouseover 事件来弹出一个“工具提示”(实际上只是一个绝对定位的 div),其中包含有关该点的元数据。
这篇文章为我的努力奠定了基础,但我记得在他的实现中有一些小问题(主要是由于 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。
于 2010-01-16T23:00:10.123 回答