当前位置：文江博客话题详情

在图表图像中显示鼠标悬停事件的轴值

发布于 2024-08-18 13:26:52 字数 69 浏览 2 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

路还长，别太狂 2024-08-25 13:26:52

当我最近做这样的事情时，我从 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。

When I did something like this recently, I returned a PNG from matplotlib to the browser. I then applied an image-map to the PNG using the pixel values that correspond to the points plotted. I used an onmouseover event to pop up a 'tooltip' (actually just an absolute positioned div) that contained meta data about the point.

This article provided the foundation for my efforts but I remember there were certain hiccups in his implementation (mostly due to changes in the matplotlib api). If this question is still lingering around on Monday, I'll update this answer with specific code from my implementation (I don't have access to my work machines at the moment).

EDIT: As Promised Sample Code

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)

You'll see that I'm writing the image to a png file and then returning JSON. I use javascript to update a DIV with the new img and image map.

回复收藏 0 原文

愁杀 2024-08-25 13:26:52

这是使用 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了解更多。

Here's a solution using jQuery:

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

See http://docs.jquery.com/Tutorials:Mouse_Position to learn more.

回复收藏 0 原文

~没有更多了~