在圖表圖像中顯示鼠標懸停事件的軸值

我返回一個圖表圖像（帶有軸x和y）到瀏覽器中創建了我的matplotlit。現在我想顯示鼠標懸停事件時的軸值。在圖表圖像中顯示鼠標懸停事件的軸值

2010-01-15 Vishal

當我最近做了這樣的事情時，我從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。

來源

2010-01-16 23:00:10 Mark

下面是使用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瞭解更多信息。

來源

2010-01-16 01:22:47

在圖表圖像中顯示鼠標懸停事件的軸值

回答

相關問題